⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.


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

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.

Table Body

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

Table Head

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

Table Row

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

Table Footer

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

Table Cell

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

Local tokenDefault value/Global token linked
--fs-table-footer-weightvar(--fs-table-head-weight)
--fs-table-footer-bkg-colornone

Colored

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

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


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"