Table

Organizes structured content so that it is easy to scan, make comparisons, and analyze the data


CdrTable replaces the deprecated CdrDataTable component. The documentation for CdrDataTable is still available, and the component itself has been ported to FEDCOMP as @rei/data-table

# Overview

# Default

The default table is medium sized, bordered, full width, and has responsive overflow scrolling.

# Striped

Alternating light/dark backgrounds.

# Border

Adds border between rows

# Advanced with custom styles

This is an advanced example with multiple headers and a custom class to change the background color for headers inside <tbody>

# Accessibility

Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:

  • WCAG level A requirements:

    • Table headers MUST be designated with <th>
    • Table header text MUST accurately describe the category of the corresponding data cells.
    • Table data cells MUST be associated with their corresponding header cells. Note: Use of scope (<th scope="col"> and <th scope="row">) is highly recommended, though not always necessary (i.e. if all cells in the first row are marked as <th> without scope, most modern screen readers will infer that the scope is the column below each header cell).
    • Table data group headers (if any) MUST be associated with their corresponding data cell groups (e.g. via scope="rowgroup" or scope="colgroup").
    • Table headers and data associations MUST NOT be referenced across nested, merged, or separate tables.
  • WCAG level AA requirements:

    • Tabular data SHOULD be represented in a <table>. Note: Even if the data are not represented in a table, WCAG 1.3.1 requires the data to be associated with their labels.
    • Tables SHOULD have a programmatically-associated <caption> or name (e.g. via aria-label or aria-labelledby).
    • The name or <caption> of a table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly.

This component has compliance with WCAG guidelines by:

  • Routing all attributes to the table element

# Guidelines

# Use When

  • Presenting multiple metrics and categories together
  • Displaying tabular data for users to compare

# Don't Use When

  • Positioning contents on page. Instead, use Grid
  • Laying out a page design. Instead, use Grid

# The Basics

  • Use on either light or dark backgrounds.
  • Content within tables can include text, photos, graphics, or other components (i.e. links, buttons, icons)

# Anatomy

  • cdr-table like cdr-grid is a wrapper component without predetermined layout requirements. This allows you the flexibility to construct the structure you need to accurately display the data you have. There are cases where you might need to change background colors or add additional borders (see the advanced example). When this is done, tokens for the table colors (background, border, etc.) should be used so your customizations can persist through future cedar updates.
  • Our table component provides the visual class only and does not account for markup requirements to create an accessible table. Be sure to review the examples and the accessibility requirements for this component.

# API

# Props

striped

name

Boolean

type

false

default

Sets row colors to alternate between darker and lighter backgrounds. Striping will not apply when `border` is true

border

name

Boolean

type

true

default

Adds borders between rows. Will disable `striped` if both are true

full-width

name

Boolean, string

type

true

default

Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }

responsive

name

Boolean

type

true

default

Makes the table scroll horizontally when it would overflow its container

hover

name

Boolean

type

false

default

Adds a darker background on row hover

size

name

string

type

'medium'

default

Sets the table size (cell padding); values can target responsive breakpoints. Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' | 'large@sm' }