Data Tables

Overview

The Data Table's features are ideal for organizing and displaying data in a UI. The column headers can sort data in ascending or descending order, rows can be expanded to progressively disclose information, and single or batch actions can be taken on rows.

The Data Table toolbar gives a location for primary buttons, search, filtering, table display settings, and other utilities.

When to use

  • To organize and display data that needs to be compared against each other

When not to use

  • As a replacement for a spreadsheet application. Instead give the user the ability to download a .csv or .xls file
  • When the content needs visual hierarchy or a more complex layout or when interactions are required. In this case, utilize a Data Table item.
    • A Data Table gives more flexibility and control of the data across different form factors.
Data Table Example

General Guidelines

Prioritize Your Data

Tables with lots of data can be problematic for trying to easily access data or actions. Tables must display content horizontally and can frequently overflow content out of view. Prioritizing your data left to right can ensure that the most important data is easily accessible. Also, consider using a feature that allows you to break up your primary and secondary data.

Example of a Data Table with lots of data

Be Concise

Prioritize Your Data

Column headers need to be concise in order to maximize readability in your table. Avoid providing redundant labels for dates, monetary values and unit numbers.

Formatting

Anatomy

Example of a Data Table with lots of data
  • Toolbar - global controls including filters, settings, primary button, result count and other features
  • Column Headers - title for the row with optional sorting features and optional select all control when batch actions are needed
  • Table Row - rows can be customized based on complexity of content using traditional table columns or using custom list items where layout can be controlled as device width changes
  • Inline action - each row may have an inline action which is always placed the far right column
  • Pagination - an optional component that allows users to navigate data as different pages when the amount of data is too large to be shown all at once

Placement

Data Tables should be placed in a page’s main content area and given plenty of space to display data without truncation. Avoid placing Data Tables inside modals or smaller containers where the information can feel cramped or needs truncation.

The container that a table lives in should only be as wide as its content. With a simple table, the container should help emphasize its simplicity.

Simple Data Table centered in small wrapping container

For Data Tables with much more content and columns, a full width container will likely be needed to serve up the content in a readable usable format.

Complex Data Table that is in a fluid container to utilize all of the browser width

Mobile Best Practice

When considering Data Tables in a small form factor (ie mobile devices) there are important things to consider.

  • Keep table content to a minimum to prevent horizontal scrolling. Use list views to stack content so all data is in view
  • When table data is required and it bleeds outside the device’s width, anchoring the first column will help the user track the data according to the primary data point
  • If performance issues exist, consider using dynamic loading methods to prevent users from having to deal with the details of a pagination control which are not conducive for touch devices

Types

Standard Data Table

The Data Table component uses a rigid column and row layout for presenting data. It is very dependent on horizontal space to show additional data.

Example of Data Table layout

Flexible Data Tables

The Flexible Data Table component uses flexible containers to display data, which can be controlled as the browser width changes. This approach is preferred for adaptive or responsive layouts.

Example of Flexible Data Table component

Main Content

Table Toolbar

The table toolbar is reserved for global table controls such as search, settings, filters or export of table data.

Example of a Data Table with lots of data
  • Filters and/or Search - any control that reduces the result count A “Saved Search” feature is still considered a filter
  • Total Count - Number of items in the list (including all pages if pagination is utilized)
  • Sort by controls - when column sorting is not available, then custom sort by controls can paired along with optional secondary controls
  • Primary Button / Action - This is the main action / purpose for the page used when there is just one batch action available
  • Secondary features - These are features that are prioritized as less critical. They typically don’t affect the results and are intended to enhance what the user can do with the data set, like download, share, etc.

Column Titles

  • Column titles should stick to one or two words that describe the data in that column. Being concise helps readability of the data and optimizes the layout
  • In cases where a column title is too long, wrap the text to two lines and then truncate the rest of the text. The full text should be shown in a tooltip on hover or using the title tag
Data Table showing how the title tag gets displayed

Table Rows

  • Data in each row should be prioritized left to right
  • For rows with multi-select, checkbox controls should always be left aligned before the main data point
  • Zebra striping for rows allows users to easily track data horizontally and is only needed for tables with 5 or more columns
  • For rows that have a primary action, follow the guidance for primary button usage

Behavior

Pagination

Pagination divides a table data into separate pages and only should be used as a solution for when the amount of data is causing performance issues. Follow the guidance for the pagination component in the usage section.

Pagination control at the bottom of a Data Table

Sorting

Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon. Actively sorted icons are indicated by the arrow icon being red.

Red arrow indicates which column is actively being sorted

Multi-select & Batch Actions

Batch actions are functions that may be performed on multiple items within a table. Once the user selects more than one row from the table, the action bar appears, presenting the user with actions they can take. To hide the batch action bar, the user can “Deselect All” Note: Action bar is not yet included in the library but will be coming soon.

Data Table showing batch actions for multiple selections

Search

Search is the preferred function for filtering results especially a search that allows the user to search on all data points in the table. The search control can look can vary depending on its functionality.

Dynamic search control example where results dynamically filter as user enters search criteria
Standard search control where user must trigger the search with a button

Table Toolbar

The table toolbar is reserved for global table actions such as table settings, complex filters, exporting, or editing table data.

Table Toolbar

Table toolbar example with minimum controls
Table toolbar example with standard amount of controls
Table toolbar example with high-levels of controls

Advanced Data Functionality

For products that are looking to incorporate even more functionality to their Data Tables, such as frozen columns, draggable columns or advanced filtering, Kendo UI offers a library that teams are utilizing. We offer a base style for the Kendo UI Data Table for those teams and products that wish to incorporate this solution.

For documentation and examples on implementation of the Kendo UI Data Table, please visit the following links: