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

Table Body

Table Head

Table Row

Table Cell

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

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"

Overview

Import

Import Styles into your FastStore project

Usage

Props

Table

Table Body

Table Head

Table Row

Table Footer

Table Cell

Design Tokens

Nested Elements

Head

Cell

Variants

With Footer

Colored

Bordered

Horizontal Scroll

Customization