Skip to main content

Table

Used to organize and display large sets of tabular data.

Import

import { Table, Caption, THead, TH, TBody, TR, TD } from '@pluralsight/react'

Anatomy

  1. Table
  2. Caption
  3. Head Section
  4. Row
  5. Head Cell
  6. Body Section
  7. Row
  8. 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.

  1. pando-table: The element of the Table.
  2. pando-table-caption: The element of the Caption.
  3. pando-table-row: The element of the Row.
  4. pando-table-head-cell: The element of the Head Cell.
  5. 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

  1. 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.

  1. scope is set to "col" on the th elements.