Table
Tables display 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.
Overview
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 |
Import
Import the component from @faststore/ui
_10import { Table } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/Table/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
| Installments | Monthly Payment | Total |
|---|---|---|
| 1x | $200 | $200 |
| 2x | $100 | $200 |
| 3x | $68 | $204 |
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. |
Table Body
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-body |
Table Head
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-head |
Table Row
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-row |
Table Footer
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-table-footer |
Table Cell
| 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. |
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) |
Variants
With Footer
Example
Code
| 1x | $200 |
|---|---|
| 2x | $200 |
| 3x | $204 |
| Total | $604 |
| Local token | Default value/Global token linked |
|---|---|
--fs-table-footer-weight | var(--fs-table-head-weight) |
--fs-table-footer-bkg-color | none |
Colored
Example
Code
| Colored | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
| 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) |
Bordered
Example
Code
| Bordered | Total |
|---|---|
| 1x | $200 |
| 2x | $200 |
| 3x | $204 |
| 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) |
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 |
Customization
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"