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.