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 <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 the variant prop.

Overview

Import

Import the component from @faststore/ui

import { Table } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/Table/styles.scss'

Usage

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

Local token	Default value/Global token linked
`--fs-table-footer-weight`	`var(--fs-table-head-weight)`
`--fs-table-footer-bkg-color`	`none`

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)`

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)`

Horizontal Scroll

Customization

data-fs-table

data-fs-table-content

data-fs-table-head

data-fs-table-row

data-fs-table-footer

data-fs-table-body

data-fs-table-cell="head | data"

data-fs-table-variant="colored | bordered"

Sku Selector Tag