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

View it on Github: https://github.com/rei/rei-cedar-vue-2/tree/next/src/components/table

# 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' }

# Component Variables

For projects that cannot make use of the Vue.js component, the CdrTable styles are available through the `@rei/cdr-component-variables` package as SCSS and LESS mixins which can be applied to plain HTML elements. See examples on the Component Variables page.