table

CdrTable (like CdrGrid) is a wrapper component without predetermined layout requirements. This flexibility allows you to construct the structure for accurately displaying your data:

• Use on either light or dark backgrounds
• Content within tables can include text, photos, graphics, or other components (i.e. links, buttons, icons)
• There are cases where you might need to change background colors or add additional borders
• Use tokens for the table colors (background, border, etc.) so your customizations can persist through future Cedar updates

What Cedar provides

CdrTable routs all attributes to the table element.

Development responsibilities

When using this component, here's what you are responsible for:

• Designate table headers with <th>
• Use table header text to accurately describe the category of the corresponding data cells
• Associate table data cells with their corresponding header cells
• Associate table data group headers (if any) with their corresponding data cell groups, for example through scope="rowgroup" or scope="colgroup"
• Don’t reference table headers and data associations across nested, merged, or separate tables
• Represent tabular data in a <table> (even if the data are not represented in a table, WCAG 1.3.1 requires the data to be associated with their labels)
• Include a programmatically-associated <caption> or name (e.g. via aria-label or aria-labelledby)
• Use the name or <caption> of a table to describe the identity or purpose of the table accurately, meaningfully and succinctly

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. These can be applied to plain HTML elements. See examples on the component variables page.