Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
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
Width1.5m
Height1.5m
Dimensions7 x 3 x 9 in
Bordered + Icon
Total
1x$200
2x$200
3x$204
ColoredTotal
1x$200
2x$200
3x$204
BorderedTotal
1x$200
2x$200
3x$204

Import

Import the component from @faststore/ui

_10
import { 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
InstallmentsMonthly PaymentTotal
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

NameTypeDescriptionDefault
variant"colored" | "bordered"Defines what style this component should use.colored
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-table
onResizeReactEventHandler<unknown>Call a function when the component is resized.
onResizeCaptureReactEventHandler<unknown>A version of onResize that fires in the capture phase.
noncestringA randomly generated string that is only used once.

TableBody

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-table-body

TableHead

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-table-head

TableRow

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-table-row

TableFooter

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-table-footer

TableCell

NameTypeDescriptionDefault
testIdstringID 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 tokenDefault value/Global token linked
--fs-table-head-weightvar(--fs-text-weight-bold)
--fs-table-head-bkg-colornone
--fs-table-head-padding-yvar(--fs-spacing-2)

Cell

Local tokenDefault value/Global token linked
--fs-table-cell-padding-xvar(--fs-spacing-3)
--fs-table-cell-padding-yvar(--fs-spacing-1)

Variants

With Footer

Example
Code
1x$200
2x$200
3x$204
Total$604
Local tokenDefault value/Global token linked
--fs-table-footer-weightvar(--fs-table-head-weight)
--fs-table-footer-bkg-colornone

Colored

Example
Code
ColoredTotal
1x$200
2x$200
3x$204
Local tokenDefault value/Global token linked
--fs-table-colored-bkg-color
var(--fs-color-neutral-1)
--fs-table-colored-border-radiusvar(--fs-border-radius)

Bordered

Example
Code
BorderedTotal
1x$200
2x$200
3x$204
Local tokenDefault value/Global token linked
--fs-table-bordered-border-widthvar(--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$20014$200$200
2x$1001020$100$200
3x$68110$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"
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page