Documentation
Feedback
Guides
Storefront Development

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

Table Body

Table Head

Table Row

Table Cell


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
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
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page