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 toChevronDown
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
- 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
formargin-left
.
- 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.
TIP
Scroll the table to the first row when navigating pages or applying filters.
Sorting
Sorting principles
- 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 withactive
state. Use the--icon-secondary-neutral-hover-active
token (same for active and hover icon states).
- Sorting icons should show the potential sorting direction, not the current state.
- Default sorting is descending order (
SortDesc
). - 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
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
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.
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
.