Skip to content

Table controls

TIP

For all main table styles and principles, refer to the Table.

Description

This documentation outlines elements and controls crucial for working with our tables.

TIP

Users typically engage with tables for the following tasks:

  • Viewing data
  • Entering data
  • Searching for data
  • Controlling data
  • Collecting data

Each of these tasks represents a distinct process that demands attention.

Accordion

A table row can expand like an Accordion, typically containing more detailed information like charts, text, or links.

TIP

If you have too much data inside such an accordion, we consider you to think about a separate page for it.

  • The accordion row should have a ChevronRight icon in the leftmost column to indicate expandability. Use icon with M size and --icon-secondary-neutral token for color.
  • The active state of an opened accordion row is highlighted with the --table-td-cell-active token.
  • When opened, the ChevronRight icon changes to ChevronDown of the same size and color.
  • Rows inside the accordion have specific styling to prevent visual merging when multiple rows are open. Use --table-td-cell-actions-accordion for background-color and --border-table-accent for 1px solid border-bottom.

Opening accordion from table cell

If a table cell content (text, link, etc.) opens an accordion, place the ChevronRight icon next to it.

The active state of the cell should be highlighted with --table-td-cell-active token, with the ChevronRight changing to ChevronDown.

Checkboxes

For selecting multiple rows and performing actions, add a Checkbox in the leftmost cell of each row.

The table header should have a main Checkbox to highlight all rows on the page.

Checkbox must cover the entire cell as the target zone.

Rows highlighting and pagination

When switching pages, checked checkboxes should not reset.

For example, user selects 3 lines on page 1, then goes to page 2, and selects 5 lines there. When user returns to page 1, the selected rows should be saved.

Keyboard shortcuts for working with rows

Use Shift key for selecting multiple rows at once.

Columns resizing

Hovering over the header border changes the cursor to col-resize, with a border color change to --border-table-accent.

The resizable area includes 1px border and 5px to the left of it.

TIP

Changing one column's size shouldn't affect others.

Editing and adding content

  1. For inline editing add Edit icon which showed while user hovers over a table cell. Use icon with M size, --icon-secondary-neutral token for color and add --spacing-1x for margin-left.

  1. Clicking on the Edit icon reveals InlineInput.

If other clickable icons are present, position the edit icon closer to the text.

Highlighting content

When searching a table, highlight matches in the data with --bg-highlight-results token for background-color.

Links in cells can lead to internal pages or external resources:

  • For those which lead to the internal page, use the link/button, depending on the context.
  • For those which lead to the external resource, use LinkExternal icon with M size and --icon-secondary-neutral token for color.

Choose from three options based on context:

Wrap long text at the end with an ellipsis

  • This solution is suitable for most of the tables, since data they contain usually occupies a single row.
  • Show the full text in the tooltip while hovering over the text.

Wrap long text in the middle with an ellipsis

  • This option is suitable for URLs that differ in the last characters.
  • Show the full text in the tooltip while hovering over the text.

Move long text to the next line

This option is suitable for cases when the table cell has more than one row of a data. For example, if there is a row-span with substrings in the row.

Pagination

If the table has more than one page, include Pagination with a 16px margin between the table and pagination.

If the table contains a small amount of data, show the pagination for one page.

TIP

Scroll the table to the first row when navigating pages or applying filters.

Sorting

Sorting principles

  1. Columns that can be sorted must have SortDesc/SortAsc icon indicating sorting direction. It's shown while hovering over TH cell and is always shown for TH cell with active state. Use the --icon-secondary-neutral-hover-active token (same for active and hover icon states).

  1. Sorting icons should show the potential sorting direction, not the current state.
  2. Default sorting is descending order (SortDesc).
  3. If you can't sort data in the column, but you need to show which column is sorted (usually necessary in secondary tables), then add sorting icon in active state with --icon-secondary-neutral-hover-active token for color.

TIP

If data in a column shouldn't be sorted, there should be no sorting icon at all.

Click zone for sorting

Click zone for sorting
CaseClick zone
If there is a simple text/icon inside the cell.
If there is a control inside the cell (for example, Select).

Sorting behavior

  • If sorting in a column is active, the icon has an active state and shows the corresponding sorting direction.
  • When user selects a different column, icon on the selected column becomes active. Icons on other columns don’t change their direction.
  • Clicking on a sorting icon reloads the table, returning user to the first row of the table.

Sorting direction

Sorting direction
DescriptionAscending (SortAsc)Descending (SortDesc)
Icon
Numbers. Values -, n/a, 0, etc. are smaller values.From smaller to larger – 0, 1, 2 → 9From larger to smaller – 9, 8, 7 → 0
Texts. If there are several languages in the table, it is recommended to divide them into groups and sort them according to the priority and user needs (it may also depend on the target audience, product specifics, etc.)A to ZZ to A
Statuses. We recommend using gradations of the form: good/bad, necessary/not necessary, fresh/not fresh, higher/lower, etc.At the discretion of UX and POAt the discretion of UX and PO
DatesFrom a newer date to an older oneFrom an older date to a newer one

Status and actions row

Use the status row for multi-row selection and pagination (you can also show popular actions that can be performed on rows). Pin it to the table header when scrolling.

Styles

Use --table-td-cell-actions-accordion token for background-color and --border-secondary token for 1px solid border-bottom.

TIP

Specify a 400ms transition for appearing and hiding of such a row.

The actions and rules of use

  • "Deselect all" unselects all rows on any page.
  • "Select all on page (N)" selects all rows on the current page.
  • "Select all on table (N)" selects all rows in the table.
  • Limit actions to 3-5 popular options.

"Select all" is not an obvious action, so we recommend avoiding it and using the options above instead.

Table settings and column manager

For complex tables you can add a list of table settings or column manager.

Table settings

  • Place a list of settings inside such a control: from disabling columns to changing the appearance of the table.
  • Do not use it for changing columns order.
  • Avoid showing columns that cannot be hidden.

Column manager

Use it only to enable and disable columns. Show this with a counter inside the button.

  • Use it for changing the columns order.
  • Show columns that cannot be hidden as disabled.

Released under the MIT License.

Released under the MIT License.