Table controls

Description ​

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

Accordion ​

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

• 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.

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.

2. 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.

Internal and external links ​

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.

Long links and text ​

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.

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).

2. Sorting icons should show the potential sorting direction, not the current state.
3. Default sorting is descending order (SortDesc).
4. 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.

Click zone for sorting ​

Click zone for sorting

Case	Click 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

Description	Ascending (SortAsc)	Descending (SortDesc)
Icon
Numbers. Values -, n/a, 0, etc. are smaller values.	From smaller to larger – 0, 1, 2 → 9	From 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 Z	Z 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 PO	At the discretion of UX and PO
Dates	From a newer date to an older one	From 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.

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.