Table

A table component is a graphical user interface (GUI) element used to display data in an organized way. It consists of one or more rows and columns, with each cell containing a data value. Tables present information in an easy-to-read format.

Anatomy

Table components can be customized with various options such as sorting, filtering, pagination, and styling.

Image showing a table component with its six notes pointed out and described below

  • Toolbar:

    A collection of functions, such as edit, copy, and delete, that can be used to modify the data in the table.

  • Column Header:

    The title of each column contains a description of the data it contains.

  • Row:

    Each row is a single record within the database. All columns on the row relate to the same record.

  • Pagination:

    The table footer contains information regarding the total number of records, the range of records being shown, and navigation tools to move through multiple pages where necessary.

  • Search Field:

    Use this field to search all rows and columns of the table to find a specific record or data value.

  • Sort and Filter:

    These standard tools can be applied to each column. Sort reorders the records, such as toggling between ascending and descending order. A Filter allows you to select only the records that meet specified parameters (e.g. a date range).

States

Each record in the table has a different state based upon the current situation.

Image showing a table component with its five interactive states pointed out and described below

  • Default:

    When no other states are applied, the record appears in the default state.

  • Hover:

    This occurs when the mouse passes over the record.

  • Selected:

    One or more records can be selected for further processing. These are shown with the checkbox selected.

  • Selected-Hover:

    A record that has already been selected and also has the mouse hovering over it.

  • Disabled:

    When in this state, the record cannot be selected or modified.

Behavior

The layout of a table can be modified by the user to suit their current needs. For example, for tables that contain a lot of data, the height of each row can be adjusted. To make finding specific records easier, the columns can be sorted and filtered to bring specific records to the top of the table.

Row Height

Use the Row Height feature to increase or decrease the height of each row in the table. Reducing the height may make the data harder to read. The default value for row height is Large.

Large (Default) Table Height
Image showing a table with a large row height, which is the default
Medium Table Height
Image showing a table with a medium row height
Small Table Height
Image showing a table with a small row height
Image showing a selectable table with the middle row highlighted via mouse hover. All rows are the same height.

DO: The row height on the table column header should be the same as the content row height.

Image showing a selectable table with the middle row highlighted via mouse hover. The highlighted row is a different height than the other rows.

DON'T: Do not mismatch row heights as this creates an unbalanced display.

Sorting

Sorting allows users to arrange the data logically, such as alphanumerically or by date, in ascending or descending order, for a selected column.

Alphabetical Order
Image showing a table
Specified Order
Image showing a table

Different sorting options are available depending on the type of data in the column. The arrow icon next to the column header shows the direction of the sort. Click on the column to reverse the order.

Image showing a table

  • Clickable Column:

    This is the column to be sorted. Not all columns will be sortable / filterable.

  • Sortable Visual Icon:

    The arrow displays the direction of the sort, whether ascending (up arrow) or descending (down arrow). If there is no arrow, the column has not been sorted.

  • Expand Column Dropdown:

    This icon provides access to the sort and filter functions for the column.

Selection

One or more rows of the table can be selected. Any action taken (i.e. delete) will be applied to all of the selected records. Clicking the checkbox selects that record.

Image showing a selectable table with three rows selected

Use the checkbox in the header to select all the items on the current page. Use the dropdown menu to select all items in the database.

Image showing a selectable table, the selection dropdown is opened and the user is able to select all the items in the table, all the shown items, or clear the selection

If all the items on the page are selected, an inline message appears with the option to expand the selection to include all items in the table.

Image showing a selectable table with all items shown selected, and a clickable 'select all items' message shown

The user can deselect all items in the table without having to visit every page by using the “Clear all selections” option. This also appears in the header dropdown menu. Unchecking the box in the header will unselect all items on the current page only.

Image showing a selectable table with all items selected, and a 'clear all selections' button shown

Actions

Actions are operations that can be performed on a record to modify the data.

When multiple actions are available for a selected row, pick the desired action from the icon in the header. These actions are also available under the More ( ... ) icon.

Image showing a selectable table one selection and 'Edit', 'Copy', and 'Delete' actions available

If there is only one available action, it is fully exposed on the table.

Image showing a selectable table with three selections and a 'Delete' action available on each selected row

Text

When clicked, linked items open a new page or sheet with additional information on that record.

Image showing a table with 'Customer Name' as a link

DO: Set the table's first column to use the link style when there is more information available.

Image showing a table with 'Last Modified' as a link

DON'T: Do not use the link style for table cells that are not interactive.

Image showing a table with all text content left aligned

DO: All text data in cells should be left-aligned.

Image showing a table with all text content right or center aligned

DON'T: Do not right-align or center-align text data.

Image showing a table with all text content left aligned and numerical data right aligned

DO: All numerical data in cells should be right-aligned.

Image showing a table with all numerical data left or center aligned

DON'T: Do not left-align or center-align numerical data.

Filter Table

Filters allow users to select the data shown in a table, based on selectable parameters, to quickly and easily find the record without having to search manually.

Table Filter
Image showing a table with a filter icon hovered but not selected
Table Filter Applied
Image showing a table with a filter icon selected

The parameters for a table filter can be entered in a sheet.

Image showing a table with a filter icon hovered but not selected

Filter Table Column

Table columns can be filtered. When a filter has been applied, the filter icon appears next to the header name. Only one column at a time can be filtered in this way.

Image showing a table with the first column highlighted, and it's filter and dropdown icon buttons highlighted

  • Expand Column:

    This is the header name of the column to be sorted. Not all columns will be sortable / filterable.

  • Filter Applied Icon:

    The icon shows that a filter is acting upon this column.

  • Expand Column Dropdown:

    This icon provides access to the sort and filter functions for the column.
Image showing a table with the first column header highlighted

DO: Include a filter icon next to the column header to indicate that a filter has been applied. Also, make the column header a single click item.

Image showing a table with the first column header filter icon highlighted

DON'T: Do not make the filter and chevron icons separate clickable actions.

Inset Table

An inset table is embedded within another element, such as another table’s cell, or a container div. This can be useful for displaying tabular data in a more compact or organized format, as well as for creating more complex layouts that combine multiple elements.

Image showing a table with one row expended to another table

Specs

The only variable element in a table is the row height, and these come in 3 sizes. The height of the column header and each of the rows of data should all be the same.

Large Table Row
Image showing the height of the table rows, which is 44px for both the header and body rows in the 'large' format.
Medium Table Row
Image showing the height of the table rows, which is 38px for both the header and body rows in the 'medium' format.
Small Table Row
Image showing the height of the table rows, which is 32px for both the header and body rows in the 'small' format.

Keyboard Interactions

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.

Keystrokes Interaction
Tab Moves into the table.
Shift + Tab Moves to the previous interactive element.
← Left Arrow and → Right Arrow Moves between cells and sorting items.
↑ Up Arrow and ↓ Down Arrow Moves between cells and sorting items.

Related Content

Components