Data table definition
A data table is a 2-dimensional data structure where each row is an item, and each column is a data point about the item.
data-table
39 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Data table anatomy: table header
The table header shows contextual information about the table and render controls that affect the table. It contains a title (concise label describing the table and its contents), subtitle (brief description adding more context when title alone is not enough), actions (controls affecting the entire table), and filter (input used to filter table data, not considered an action).
Data table anatomy: column headers
Column headers are very short labels that describe the data in the column. They function as buttons that sort rows by the column data in ascending or descending order. Sort functionality may be disabled on a column-by-column basis. The column containing row actions does not have a visible column header.
Data table anatomy: row headers
Row headers identify the item being represented in the row. They are typically the first cell in the row and are visually distinct from other cells in the row.
Data table anatomy: row actions
Row actions are controls that affect the item represented in the row.
Data table anatomy: data cells
Data cells contain the data for each row that is described by its corresponding column header and optional row header.
Data table anatomy: pagination footer
The pagination footer shows the user where they are in relation to the total number of rows and provides controls for navigating all rows.
When to use data table
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. Also use when the data is easy to understand when all data points are displayed in a flat hierarchy.
When not to use data table: use list instead
Do not use a data table when columns have cells that will usually be empty, when the data is easier to understand with grouping and hierarchy (sections, headings, subheadings, etc.), when rows and columns are only a means of layout, or for data with longform content such as paragraphs or long lists.
When to use data grid instead of data table
Use a data grid instead of a data table if the primary purpose is to edit or otherwise interact with the cells (like a spreadsheet) or if rows or columns support some kind of user interaction.
Data table best practice: order rows intuitively
Data should be initially rendered in an intuitive order, such as starting with the most recently created items. By default, sort alphabetically by the first column's content. Rows will be re-ordered as the user updates the sort parameters.
Data table best practice: minimize columns
It is easier to scan many rows than it is to scan many columns. Consider swapping columns and rows when it is unlikely that there will ever be more rows than columns.
Data table best practice: adapt column widths
Use the column width options to appropriately size the columns depending on the content and the available horizontal space.
Data table best practice: keep column headers short
Column headers are short labels used to define the kind of data that is shown in that column.
Data table best practice: keep cell content concise
Cells should represent data in the shortest possible format. This makes the table easier to scan and preserves horizontal space.
Data table best practice: single data point per column
Do not use a single column to show multiple pieces of data. The column header should accurately represent the data point rendered in the column's cells. It would also be unclear which data point is being used when sorting.
Data table best practice: right-align numeric values
Right-align numeric values and use the `tabular-num` font variant when possible to make numbers easier to compare.
Data table best practice: handle cell content overflow
Avoid wrapping or truncation of cell content as much as possible. Ideally, cell content is very short and the column is wide enough to accommodate it. When not possible to fit content, wrapping is the preferred way to accommodate long content because it does not hide the content. Content truncation is available as a last resort when column widths are set, and the full content may be exposed in a tooltip.
Data table best practice: empty cells
By default, leave empty cells blank. You may show a message to explain an absence of data, but do not use a character like 'x' or '-'. Using such characters creates a weird experience for assistive technologies like screen readers.
Data table best practice: skeleton placeholders
Use skeleton placeholders to indicate loading content. The placeholder should match the real content as closely as possible. Use the following properties to adjust the size and alignment of the placeholder: column width, alignment, whether or not there is a leading visual. Do not worry about whether the text wraps. Ideally, the height of the cell will not change once the data is loaded.
Data table best practice: pagination for large datasets
Use pagination to accommodate tables with a large dataset. By paginating, the user can focus on segments of a large dataset without being overwhelmed. Pagination also helps with performance by reducing the amount of data to be downloaded and the amount of content that needs to be rendered.
Data table best practice: page length
Do not put too many or too few rows per page. If page length is too short, it would be annoying to browse the data in small segments. If page length is too long, users could get lost or overwhelmed. Factors that influence ideal page length include whether rows can be filtered, number of columns, visual complexity of the rendered cells, and amount of context needed when reviewing the data. Twenty rows is a good place to start.
Data table best practice: empty state
Communicate when the table has no data to show by displaying a Blankslate component in place of the table.
Data table best practice: small screens
Strategies for adapting the table for narrow viewports include using the column width options, removing less important columns, or scrolling horizontally.
Data table column width: Grow (default)
Stretch to fill available space, with min width equal to the width of the widest cell in the column. This is the same behavior as a CSS grid column with the value `minmax(auto, 1fr)`. May have a min and max width constraint.
Data table column width: Grow or collapse
Stretch to fill available space in the parent or shrink to fit in the available space in the parent. May have a min and max width constraint. Without a min width constraint, the column could collapse to a width of 0px.
Data table column width: Auto
The column is the width of its widest cell. Not intended for use with columns whose content length varies a lot because a layout shift will occur when the content changes. May have a min and max width constraint.
Data table column width: Explicit width
Will be exactly that width and will not grow or shrink to fill the parent.
Data table column width: Action column
The action column does not accept a width. Its min-width would be the width of the actions.
Data table column width: Filling available space
If all columns have width constraints set and the row does not fill the table container, the difference is added to the width of the last column.
Data table cell density options
Three density options are available: Condensed (optimize for showing more information in a smaller area), Normal (default - shows a lot of information in a small area but provides enough whitespace that cells won't risk visually running together), and Spacious (optimizes readability for tables with visually busy cell content).
Data table cell text alignment
Two text alignment options are available: Left (default - matches natural reading direction of text in right-to-left writing systems) and Right (optimizes for comparing column data that is easier to compare when right-aligned, most commonly used for numeric data).
Data table cell content fitting options
Three content fitting options are available: Wrapping (default), single-line truncation, and multi-line truncation.
Data table row actions: 1 action
When there is only one row action, row actions are placed in the last column and do not require a visible column header.
Data table row actions: multiple actions
If you have multiple actions for a row, start by pulling them into a dropdown menu.
Data table row actions: 1 primary action with overflow
If one of the actions is heavily used, pull it out for easier access. Do not pull out more than 1 action.
Data table sorting interaction
If a table is sortable, it must start with one column sorted on page load. Interacting with a column that is already sorted will toggle the sort between ascending and descending. If a column is not sorted yet, the first click sorts in ascending order.
Data table sorting states
The column header has four sorting states: Unsorted (default), Ascending sort active, Descending sort active, and Sort in progress.
Data table filtering
A filter input is used to write a query and only show rows that match that query.