Table
Displays information in a friendly way, allowing users to scan for details quickly.
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<div>as wrapper with a<table>tag inside it.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 thevariantprop.
Example
Code
Colored + Icon | Values |
|---|---|
| Width | 1.5m |
| Height | 1.5m |
| Dimensions | 7 x 3 x 9 in |
Bordered + Icon | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
| Colored | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
| Bordered | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
Usage
Import the component
_10import { Table } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/Table/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Colored
Example
Code
| Colored | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
With footer
Example
Code
| 1x | $200 |
|---|---|
| 2x | $200 |
| 3x | $204 |
| Total | $604 |
Bordered
Example
Code
| Bordered | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
Horizontal Scroll
Example
Code
Installments | Monthly Payment | Min Items | Max Items | Subtotal | Total |
|---|---|---|---|---|---|
| 1x | $200 | 1 | 4 | $200 | $200 |
| 2x | $100 | 10 | 20 | $100 | $200 |
| 3x | $68 | 1 | 10 | $68 | $204 |
Design tokens
Nested Elements
Head
| Local token | Default value/Global token linked |
|---|---|
--fs-table-head-weight | var(--fs-text-weight-bold) |
--fs-table-head-bkg-color | none |
--fs-table-head-padding-y | var(--fs-spacing-2) |
Cell
| Local token | Default value/Global token linked |
|---|---|
--fs-table-cell-padding-x | var(--fs-spacing-3) |
--fs-table-cell-padding-y | var(--fs-spacing-1) |
Design tokens: Footer
| Local token | Default value/Global token linked |
|---|---|
--fs-table-footer-weight | var(--fs-table-head-weight) |
--fs-table-footer-bkg-color | none |
Design tokens: Colored
| Local token | Default value/Global token linked |
|---|---|
--fs-table-colored-bkg-color | var(--fs-color-neutral-1) |
--fs-table-colored-border-radius | var(--fs-border-radius) |
Design tokens: Bordered
| Local token | Default value/Global token linked |
|---|---|
--fs-table-bordered-border-width | var(--fs-border-width) |
- --fs-table-bordered-border-color | var(--fs-border-color-light) |
Data attributes
You can target and override
Table styles using the following data attributes:data-fs-tabledata-fs-table-contentdata-fs-table-headdata-fs-table-rowdata-fs-table-footerdata-fs-table-bodydata-fs-table-cell="head | data"data-fs-table-variant="colored | bordered"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
| Name | Type | Description | Default |
|---|---|---|---|
| variant | "colored" | "bordered" | Defines what style this component should use. | colored |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table |
| onResize | ReactEventHandler<unknown> | Call a function when the component is resized. | |
| onResizeCapture | ReactEventHandler<unknown> | A version of onResize that fires in the capture phase. | |
| nonce | string | A randomly generated string that is only used once. |
TableBody
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-body |
TableHead
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-head |
TableRow
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-row |
TableFooter
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-footer |
TableCell
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-cell |
| variant | "data" | "header" | Specify if this component should be rendered as a header (`<th>`) or as a data cell (`<td>`). | data |
| scope | "col" | "row" | "rowgroup" | "colgroup" | Defines the cells that the header element (`<th>`) relates to. @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope | |
| align | "left" | "center" | "right" | Defines how this component should be aligned. |