Data Tables

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

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.

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

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.

Data Table Section Guidelines

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.

Table toolbar example with minimum controls

Table toolbar example with standard amount of controls

Table toolbar example with high-levels of controls

Column Headings

Data Table showing how the title tag gets displayed

• Concise Headings - Column headings 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.
• Wrap Text - In cases where a column title is too long, wrap the text to two lines.
• Using Tool tips - If necessary, truncate the rest of the text. The full text should be shown in a tool tip on hover or using the title tag.

Table Rows

Data Table that demonstrates data prioritization, alignment, button usage, and zebra stripes

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

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

Table Toolbar

A fixed header for a data table will keep the table’s column heading bar at the top of the browser window while the user scrolls. Use this fixed header if the data table content requires the user to scroll down through the table. This prevents users having to remember what kind of information is in each column.

Scrollable Data Table demonstrating a fixed header

Sorting

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

Red arrow indicates which column is actively being sorted

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 look of the search control 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

Expandable & Selectable Rows

Data tables can be configured to have both expandable and selectable features. The expandable icon always appears first and to the left of the selection icon.

• Expandable Rows - Use the expanded section for supplementary information or data that needs additional loading time. Consider including links or action buttons that take the user to a dedicated page, side panel, or modal to view the information and complete tasks. To expand a row, the user clicks the arrow associated with the row. The user can expand all rows at once by clicking the arrow in the column header. See more about this in [bulk select & expand]. Arrows in the rows have only two states, expand or collapsed.
• Selectable Rows - Users can select a single row to perform a global control featured in the [table toolbar]. They can also select multiple rows to apply bulk actions. To select a row, the user clicks the checkbox associated with the row. The user can select all rows at once by clicking the checkbox in the column header. See more about this in [bulk select & expand]. Checkboxes in the rows have only two states, checked and unchecked. Actions applied to the selected items are found in the bar that appears in [bulk action mode] or [table toolbar].

Data Table with expand and select features

Bulk Expand & Select

Users can select multiple rows or expand multiple rows by clicking on the icon in the table column header (or parent row). These two actions can be used together or separately. If used together, the expandable icon always appears first and to the left of the selection icon.

• Bulk Expand - allows the user to open all collapsed sections simultaneously. If there are multiple expandable rows within a table, feature this function in the table column header.
  • Interaction Design - if a user collapses a row after clicking on the bulk expand arrow, the arrow will remain pointing down. The only time the arrow points up again is when the user clicks the column header bulk expand button.
• Bulk Select - allows the user to select all check boxes within the table simultaneously. If there are multiple rows in a table with check boxes, feature this function in the table column header.
  • Interaction Design - if a user deselects a row after clicking on the bulk select box, the green check mark will disappear from the column header bar. Similarly, if a user checks all the boxes, the column header checkbox should have the green check mark.
• Expanded Row Selection - check boxes within an expandable row should only be selected during bulk select if the row is already expanded.

Data Table with expand and select features

Bulk Action Mode

Users can perform bulk actions on one or more items within a table. The Bulk action mode becomes active when one or more item in the table (or expandable row, if applicable) is selected.

• The bulk action bar animates up at the bottom of the table, presenting a set of possible actions to apply to all select items. This feature increases user efficiency, allowing them to avoid performing the same inline action across multiple table items.
• When the bulk action bar is active, action icons on the row should be disabled.
• To exit the bulk action mode, the user can deselect all items.
• The actions button can contain multiple actions for the selected items.

Option 1: action button dropdown

Option 2: action button with hierachy

Mobile Best Practice

• Keep table content to a minimum to prevent horizontal scrolling. Use list views to stack content so all data is in view.
• When a data table 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.

Advanced Data Functionality

For products that need even more functionality to their Data Tables, Kendo UI offers a library with built in features such as frozen or draggable columns and advanced filtering.

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

• ASP.net MVC
  https://demos.telerik.com/aspnet-mvc/grid
• JQuery
  https://demos.telerik.com/kendo-ui/grid/index
• Additional platforms
  https://www.telerik.com/kendo-ui