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.

Dimensions

Vertical spacing

Horizontal spacing

States

States are visual representations used to communicate the status of a button as an interactive element.

Column header

Enabled: The header is in an enabled state when the user’s cursor is not hovering over it.

Hover: When the user's cursor is on the header, it goes into a hover state. If the header is sortable, the user will see visual feedback, and the cursor will change to a pointer. If the header is static, there will be no visual change, except if the header contains additional actions. In that case, a button will be visible during hovering.

Button hover: The button with a dropdown menu follows all rules described in the button and dropdown menu documentation

Rows

Enabled: A row is in the enabled state when the user’s cursor is not hovering over it and the row isn’t disabled.

Hover: A row is in the hover state when the user's cursor is on the row but they haven't clicked on it yet.

Disable: The row is in the disabled state when its action is blocked by something that needs to be completed first, like changing a field value or waiting for a system response. Its opacity is 50%. Use an explanatory tooltip to explain the situation to the user. The tooltip is shown on hover.

Loading: The row is in the loading state when data needs to be loaded. Use skeleton loader as a visual feedback for the user.

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.