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

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.

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.

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-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"