Data Table
Data table is a 2-dimensional data structure where each row is an item, and each column is a data point about the item.
Anatomy
Table header
The table header shows contextual information about the table and render controls that affect the table.
- Title: A concise label that describes the table and its contents
- Subtitle: A brief description to adds more context for the table when the title alone is not enough
- Actions: Controls that affect the entire table
- Filter: An input used to filter table data to make it easier for the user to focus only on the rows relevant to their task
Column headers
A very short label that describes the data in the column. Column headers are buttons that sort rows by the column data in ascending or descending order.
Row headers
A row header identifies the item being represented in the row. They are typically the first cell in the row, and are visually distinct from the other cells in the row.
Interactive Example
Repository Issues
Track and manage issues across your repositories
| Issue | Status | Number | Assignee | Created | |
|---|---|---|---|---|---|
| Fix navigation menu accessibility | Open | #1234 | @octocat | 2 days ago | |
| Update documentation for API v2 | Closed | #1233 | @github | 3 days ago | |
| Performance improvements for large datasets | Open | #1232 | @developer | 1 week ago |
Usage
When to use a data table
- To navigate a lot of information at once and to make it easy to compare data points between rows or columns
- If the data is easy to understand when all data points are displayed in a flat hierarchy
Best practices
Order rows intuitively
Data should be initially rendered in an intuitive order. For example, starting with the most recently created items.
Minimize the number of columns
It's easier to scan many rows than it is to scan many columns. Consider swapping columns and rows when it's unlikely that there will ever be more rows than columns.
Do's and Don'ts
Use a data table for data in a flat hierarchical structure
Don't use a data table for information that has hierarchical relationships
Options
Column widths
Density Options
Loading State
| Issue | Status | Number | Assignee | Created | |
|---|---|---|---|---|---|
Accessibility
Labeling and describing the table
The table must have a title, and can optionally have a subtitle to describe more context. If you encounter a case where there is enough context that the table doesn't need a visible label, you may hide it so it's only accessible to assistive technologies.
Feedback
Help us improve this component by providing feedback, asking questions, or updating this documentation.