Table
Used to organize and display large sets of tabular data.
Import
import { Table, Caption, THead, TH, TBody, TR, TD } from '@pluralsight/react'
Anatomy
- Table
- Caption
- Head Section
- Row
- Head Cell
- Body Section
- Row
- Body Cell
Usage
Basic Table
function BasicTable() {
return (
<Table>
<Caption>All Tables should include a caption for accessibility.</Caption>
<THead>
<TR>
<TH>One</TH>
<TH>Two</TH>
<TH>Three</TH>
</TR>
</THead>
<TBody>
<TR>
<TD>Pando</TD>
<TD>R00lz</TD>
<TD>d00d</TD>
</TR>
<TR>
<TD>Pando</TD>
<TD>R00lz</TD>
<TD>d00d</TD>
</TR>
<TR>
<TD>Pando</TD>
<TD>R00lz</TD>
<TD>d00d</TD>
</TR>
</TBody>
</Table>
)
}
Customizing
There are 3 ways to customize any of the Table components.
1. Unused Classes
Each component layer of the Table has a unused class name that can be utilized in your local CSS to customize the Table at any level.
pando-table
: The element of the Table.pando-table-caption
: The element of the Caption.pando-table-row
: The element of the Row.pando-table-head-cell
: The element of the Head Cell.pando-table-body-cell
: The element of the Body Cell.
The table head and body elements do not have a class name. This is because they require no styling from Pando.
2. Passing a className
prop
You can pass a className
prop to the Table components to customize the Table. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.
import customStyles from './customStyles.module.css'
function CustomTable(props) {
return (
<Table className={customStyles.table}>
<Caption className={customStyles.caption}>
Always use a caption to describe your tables.
</Caption>
<THead className={customStyles.thead}>
<TR className={customStyles.tableRow}>
<TH className={customStyles.tableHeadCell}>Example</TH>
</TR>
</THead>
<TBody className={customStyles.tbody}>
<TR className={customStyles.tableRow}>
<TD className={customStyles.tableCell}>Example</TD>
</TR>
</TBody>
</Table>
)
}
3. Ejected Table
For a low-level "ejected" approach, you can use the Headless-styles API to customize the Table however you prefer while keeping the accessibility behavior.
import {
getTableProps,
getTableCaptionProps,
getTableHeadCellProps,
getTableBodyCellProps,
getTableRowProps,
splitClassNameProp,
} from '@pluralsight/headless-styles'
To learn more about the Headless-styles API, check out the Headless-styles documentation.
Behavior
You can combine the Pando Table with React Table to create dynamic, full-featured Tables that are styled.
Usage
Do use Captions for all Tables to complete their a11y standards.
Don't use a Table without a Caption.
Do use the Table to display complex data consisting of multiple columns and rows.
Don't use a Table to display simple information. Instead, use a List.
API
Parameters
- Any valid HTML props for any of the table-related elements.
Accessibility
The Pando Table combined with semantic HTML allow the Table components to be fully accessible and screen-readable by default.
scope
is set to "col" on theth
elements.