Data table

Component checklist

Overview

Data tables provide an excellent way to organize and present data in a user interface. The column headers allow the sorting of data in ascending or descending order. Rows can be expanded to reveal additional information gradually, and individual or multiple actions can be performed on rows.

 

Formatting

Anatomy

A table typically comprises three fundamental elements, namely Header, Row, and Cell. In addition, Soul offers an optional feature to include a summary bar as the table's footer.

1. Table header: The table header is the top section of a table that labels each column. It is essential for understanding the type of data presented in each column of the table.
2. Table row: A table row represents a single record or unit of data in a table. Each row consists of multiple cells aligned horizontally, with each cell corresponding to a column header.
3. Table cell: A table cell is the basic unit for data entry in a table, used to display individual pieces of information corresponding to a row and column.
4. Summary bar: A summary bar provides a quick overview or summary of the data or content presented, such as totals, averages, or key metrics. It helps users understand the data at a glance without having through the entire dataset.

 

Sizing

The data table is available in three different row sizes: Large, Medium, and Small. By default, the table is set to medium size which should suffice for most use cases.

 

Behavior

Interactions

The data table’s rows follow interaction conventions found in other Soul components. Buttons, checkboxes, radio buttons, dropdown menu, select, toggle, and inputs are used in the data table, and all behave according to their guidelines.

The data table rows' hover state should always be enabled to help the user visually scan columns even if the row is not interactive.

 

Inline actions

Each row in the table can have specific actions associated with the data context. These inline actions are located in the first column of the data table and only become visible when you hover over the row. If the content is too long, the action buttons can overflow, ensuring that they remain fully visible.

 

Bulk actions

Users can perform bulk actions on one or more items within a table. Once a table row is selected, the bulk action bar appears at the bottom of the page, presenting a set of possible actions to apply to all select items. This feature can increase user efficiency compared to the effort of repetitively performing the same inline action across multiple table rows.

When the bulk mode is active, single action buttons and dropdown menus on the row should be disabled.

To exit the bulk action mode, the user can click on the cancel button on the far right of the bar or deselect all items.

 

Sorting

You have the option to sort columns in either ascending or descending order. To do so, you can access the sorting controls located in the column headers.

When you want to demonstrate that a column in a table is sortable, you can use a link in the table header. An arrow-up or arrow-down will indicate which column is currently sorted. Please note that only one column can be sorted at a time.

 

Pagination

Soul, in terms of Emplifi UI, suggests using lazy load as an alternative to numbered pagination. With this approach, the table data is loaded automatically by a predefined amount every time the user reaches the end of the table. The design specifies the number of data rows to load to achieve maximum performance.

Use a skeleton loading animation to provide the user with visual feedback that additional data is being loaded.

 

Loading

Use skeleton loading as a visual cue when you need to load data. This pattern can also be employed to let the user know that only a single row or column has been loaded.

 

Vertical scrolling

When a table exceeds the height of a user's viewport, it is imperative to display the vertical scrollbar outside the table. This way, users can effortlessly scroll through the entire screen, not just the table, for a seamless experience.

When dealing with a table that is part of an element, like a widget, it's best to keep the scrollbar within the element.

 

Horizontal scrolling

When the table exceeds the width of the user's viewport, a horizontal scrollbar appears within the table. The table size dictates the options available for scrolling.

The first column always stays fixed, while the horizontal scrollbar appears to the right of it. This is a recommended approach to help users keep track of the origin of the data when scrolling.

When utilizing a horizontal scrollbar, it's recommended to incorporate a shadow effect on the sides of the scrollable content to provide a visible indication of the direction in which the user can navigate the content. This will help enhance the user's experience and make it easier for them to navigate through the content without any confusion.

 

Content

Alignment

• Left alignment: Use left alignment in cases of elements of a text character (text information, hyperlinks, profiles, users, labels), a group of two and more visual elements in one column, and headers.
• Right alignment: Use right alignment in cases when numbers align to the right, as this makes it easier to compare data.
• Center alignment: If a column contains the same type of visual elements of the same or similar size, you can use center alignment, e.g., checkboxes, platform tags, or predicted grades.

 

Column titles

• Column headings should be concise and descriptive, using one or two words to represent the data in that column.
• In cases where a column title is too long, wrap the text to two lines and then truncate the rest of the text. The full text should be shown in a tooltip when hovering.
• Column titles should use sentence-case capitalization.

 

Truncation

• If the information entered in a cell surpasses its allotted space, abbreviate it using the following pattern to make sure it fits within the cell.
• The full content should be shown in a tooltip on hover.

 

Data placeholders

In some specific cases, data in a cell cannot be displayed. For this case, Soul defines two types of placeholders complemented by a tooltip to explain why data is missing.

N/A placeholder

Use the N/A (Not Applicable) placeholder in every case when the field does not apply to the current item or entry. “N/A” should be easily understood by users as indicating non-relevance.

Example: In a data table where a “video length” metric is not applicable to an image.

 

Em dash (––) placeholder

Use an em dash (––) placeholder when the data is missing, unknown, or not yet available.

Example: A field for “Listening mentions” where the number of mentions has not been provided or recorded yet.

 

Incomplete data

For cases where some data is missing or incomplete, Soul is defined to show an alert icon to inform the user about his case.

Complement the icon with an Informative tooltip shown when hovering over the cell, which provides related information and actions the user can take to get the compiled data set.

Example: In the summary bar use tooltip text to display why data is missing in the column.

 

Variants

Soul presents two fundamental versions of the table, differing in the way users can interact with the data.

Static

The default variant for displaying data without any additional actions is the "static" data table. This type of table allows users to focus on a single row at a time. It provides a simple way to work with data in its current state without the need for any further manipulation.

When dealing with tasks that require handling multiple rows concurrently, opt for the "selectable" variant of the data table.

 

Selectable

The "selectable" data table enables users to select one or multiple rows in a data table at the same time. To select a row, simply check the box associated with it. Users also have the option to select all rows at once by clicking the checkbox in the column header.

Checkboxes in rows have two states: checked and unchecked. However, the "check all" checkbox in the column header has three states: checked, unchecked, and indeterminate.

 

Summary bar

Consider adding a summary bar to the data table to provide a more comprehensive view of the information in the column.

The summary bar can either sum the data or display the average value. Optionally, the table can have a group button that allows the user to switch between the two options. This will improve the user experience and make it easier to access the desired information.

 

Breakdowns

Breakdowns are a handy way to classify data in a table. You can choose to view or hide the categories as needed.

In order to establish a breakdown, a specific component is usually placed on top of the table. This component can be either a select or multi-select in most cases. If there are only a few options available, typically two or three, it is recommended to use the group button instead of select.