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 thevariantprop.
Overview
Import
Import the component from @faststore/ui
import { Table } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/Table/styles.scss'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
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
TableBody
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
TableRow
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
TableFooter
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
TableCell
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
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
| Local token | Default value/Global token linked |
|---|---|
--fs-table-footer-weight | var(--fs-table-head-weight) |
--fs-table-footer-bkg-color | none |
Colored
| 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
| 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
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"