Data table

Data tables are used to organize and display data within the UI. A data table always contains column headers that sort data in ascending or descending order and table rows with actionable data.

Table header

Types

Soul offers two types of table headers, namely Static and Sortable. Each of these variants can be accompanied by a range of elements used to contextualize the placement of data tables or the content of individual columns.

Static header

Sortable header

Help: If you need to explain the column's meaning, include a help icon in the header and show an explanatory tooltip after the user hovers over it.

Multiselect: Enable users to select all rows in the data table using a checkbox. This feature is commonly used for bulk actions.

Leading icon: Show a leading icon in the table header to aid user recognition of column contents.

Actions: If you want to include additional actions, you can use a dropdown menu. It is hidden by default and appears when you hover over the header cell.

Typography

Element	Font-size (px)	Font-weight
Column header	11	Bold
Row text	13	Regular

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.