Table

Tables display information in a friendly way, allowing users to scan for details quickly. The Table component is a compound of the following:

• Table - renders a <table> tag.
• TableBody - renders a <tbody> tag.
• TableHead - renders a <thead> tag.
• TableRow - renders a <tr> tag.
• TableFooter - renders a <tfoot> tag.
• TableCell - renders a <th> or <td> tag depending on the value of the variant prop.

Import

import { Table } from '@faststore/ui'

Usage

Installments	Amount	Total
1x	$200.00	$200.00
2x	$100.00	$200.00
3x	$68.00	$204.00
4x	$52.00	$208.00
5x	$43.00	$215.00
Installments	Amount	Total

Props

All table-related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

Table

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-table

TableBody

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-table-body

TableRow

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-table-row

TableFooter

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-table-footer

TableCell

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-table-cell

variantTableCellVariant

Description

Specify if this component should be rendered as a header (``) or as a data cell (``).

Default value

data

scope"col" | "colgroup" | "row" | "rowgroup"

Description

Defines the cells that the header element (``) relates to. @see

Customization

data-store-table

data-table-head

data-store-table-row

data-table-footer

data-table-body

data-table-cell='head'

data-table-cell='data'