Data Table

Overview

Data tables are read-only data grids with limited functionality. Data tables support sorting, pagination, and column resizing, but not row selection, row actions or bulk actions.

Other names: Table

Behaviors

Empty state

A table is in an empty state when there is no data to display, an error occurs when loading the data, or a filter has no matching rows.

There’s a difference between a table that’s still loading data and a table that has no data to display.

A message in the middle of the table notifies the user why the table is empty. This can include a button to fix the problem, an icon to indicate there was an error, or just a brief message.

Minimum height for an empty state grid/table is dependent on the scenario. If vertical space permits the set height should be set to 400px.

Loading state

When data is loading a repeating progress indicator line appears directly above the table header. This progress indicator is the full width of the table.

Until the loading is done, all functionality is disabled. This includes filters, table headers, and pagination. Once loading finishes, the functionality is restored and the progress indicator disappears.

Override Kendo’s default loading template with a progress indicator.

Column reordering

If drag and drop is enabled, selecting and holding a column header allows users to drag the column to a new location. When the user drops the column header in the new position, this immediately changes the sequence of the data displayed in all the rows in the table.

Column resizing

If resizing is enabled, users can resize data table columns by selecting and dragging the edges of the column header cells.

Filter

Filtering of tables can be done by implementing a filtering pattern.

Pagination

Every table has a pagination control at the bottom. Pagination is disabled until the table has finished loading.

Sorting

Data tables should have a default sort order that is logical and easy to intuit such as chronological or alphabetical.

Data tables can be configured to allow column sorting. When sorting is on, each column header can be selected to sort the data by the values in that column.

Column sorting has three states: none (no arrow), ascending order (up arrow), and descending order (down arrow).
Selecting the column header cycles through the three states.

Usage guidelines

Content guidelines

Column titles
Aim for a few words when choosing column titles. Ideally, column titles should be no more than 2 lines and should not truncate.

Column titles should be sentence case. Include units of measurement, if applicable.

Cell values
Cell values should be concise. Longer values can truncate or wrap by no more than 2 lines (unless unavoidable). No cell should be empty. Cells without a value should show two hyphens --.

Components in cells
Data tables can only use non-interactive components in cells. Including icons (not to be confused with icon buttons), severity, and tags.

Icons
When using icons in data tables, always pair the icons with text. Icons should be used to enhance meaning, not for decoration. There is a default icon color depending on light theme or dark theme. Icons in data tables that don’t use color to indicate meaning, like product logos, can be a range of colors.

Position

Data tables can be inside accordions and panels.

Data tables extend to the edge of their parent container, ignoring padding and margins. There should be a space between the bottom of the grid and the bottom of the browser or parent container.

Data table or data grid

Data tables and data grids have some overlap in features. Use a data table when presenting read-only datasets where row selections, row actions, or bulk actions are not necessary. Data grids can be more complex than data tables and are used for displaying datasets where row selections, row actions, or bulk actions are required.

Data table or list

Use a data table when displaying multiple columns or when filtering, sorting, or column manipulation are needed. Use a list if only a single column needs to be displayed and row selections or row actions are required.

Referenced in this section:

Typography guidelines