Table Tables display organized data in rows and columns.

Tables display sets of information in a contained structure.

Table of contents

Standard usage
Multi-select

Usage guidelines

When to use
  • Use a table to organize related sets of data in a way that is easy for people to find the datapoint that they are seeking.
How to use
  • Use sentence case for all table headings.
  • Tables are most effective when designed with the fewest number of columns necessary to display information. Overcrowding tables with unnecessary columns and data makes information difficult to scan and parse.
  • To make a column sortable, add the sortable attribute to that column's <th> element.
  • Resonance tables use zebra striping by default to improve scannability on desktop. For short and simple tables that are generally less than 5 rows long, zebra striping can be removed.
  • If a column is used to display numbers, the unit should be listed next to the header name instead of repeating it in each row.
  • Rows automatically collapse into cards at smaller screens. To see an example, click the phone icon for the 'Standard usage' demo above.

Attributes

An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.

<res-component booleanAttribute stringAttribute="parameter">    
  <child-element></child-element>
</res-component>
AttributeTypeDescription
mobilebooleanSets whether mobile styles are used
zebrabooleanForce zebra stipes
noZebrabooleanDisable zebra stipes
no-scrollbooleanRemoves horizontal scrolling from the table
selectablebooleanSet as a multi-select table
sortablebooleanWhen added to a th element, makes the entire column sortable
intbooleanWhen added to a sortable th element, enforces strict integer sorting
alignstringWhen added to a th element, sets the alignment for that column
  • center
  • right

API

NameTypeDataDescription
selectablepropertybooleanGet/set selectable state
scrollablepropertybooleanReturns if table is scrollable (i.e. wider than its container) (read only)
selectedRowsmethodarrayReturns array of selected table row DOM elements (read only)
selectedIndicesmethodarrayReturns array of selected table row indices (read only)
buildCheckboxesmethod---Builds multi-select checkboxes
rebuildCheckboxesmethod---Destroys and rebuilds multi-select checkboxes after they've been created
storeRowsmethod---Rehydrates the internal row array

Notes

Depends on:
Required DOM

Without these, the component will throw an error on render.

  • <table> - Table element
Supported optional DOM

If added as children, these elements will receive specific styles and/or functionality.

  • <label> - Label element

History

VersionNote
0.21.4Adds variable fallbacks that satisfy updated linting rules
0.20.0Changes td and th text from $res-color-gray-500 to $res-color-gray-600 to improve readability.
0.16.1Add storeRows public method for rehydrating the internal rows array (useful whenever a table is rearranged).
0.15.6Add noZebra attribute to force unstyled rows in tables greater than 5 rows.
0.14.2Add support for buildCheckboxes and rebuildCheckboxes API methods.
0.13.0Add support for multi-select res-tables.
0.12.0Apply new spacing scale.
0.11.0Tweaks to accommodate new icon set.
0.9.0Add .scrollable property to API
0.7.1Add zebra attribute to spec and remove hover styles.
0.7.0Web component refactor. Replace mobile-at integer attr with mobile boolean.
0.6.0Built to spec.
0.5.0Proposed for spec.