Guidelines

When to use

• to help users consume large amounts of information: Tables are great for displaying structured data in an easy-to-digest manner.
• When a user needs to find a specific piece of data and perform an action: Table’s features allow locate the information quickly and perform an action directly.
• When a user needs to compare and analyze the data thoroughly: While charts and graphs are very useful in providing insights, some power users will want to see the source data behind them.
  

When not to use

• When you have only a couple of columns: Tables with fewer columns will have a lot of white space, making the data more difficult to digest. Try using lists or cards for a better experience.
• In confined spaces: Once a user has to scroll to view all data, it becomes challenging to compare, analyze, or locate the information effectively.
  

---

Properties

Selection and bulk actions

The selectable property enables users to select multiple rows in the table and perform actions on all of them simultaneously, reducing the effort required to apply the same action to each item individually.

When enabled, the first column of the table will display checkboxes that allow users to select specific rows. The checkbox in the column header enables users to select or deselect all rows displayed on the page at once.

When one or more rows are selected, a Bulk Action Bar will become active, providing the user with access to a set of available actions.

Placement

Data tables should be placed in a pages main content area and given plenty of space to display data without truncation.

---

Behaviors

Table Title

Usage

To incorporate the Data Table Title component effectively, follow these guidelines:

1. Placement: The Data Table Title should be placed at the top of the data table, above the table's headers.
2. Clarity: Keep the title concise and descriptive to provide users with a clear understanding of the table's content.
3. Alignment: Ensure the title is properly aligned with the table's columns for a neat and professional appearance.

Best Practices

To maximize the effectiveness of the Data Table Title component, consider the following best practices:

1. Consistency: Maintain consistent styling and placement of the title across different data tables within your application.
2. Responsiveness: Ensure the title adapts gracefully to various screen sizes, providing an optimal user experience on different devices.
3. Accessibility: Verify that the title meets accessibility standards, allowing all users, including those with disabilities, to access the information effectively.

---

Table Toolbar

The table toolbar is exclusively designated for global table actions, such as table settings, complex filters, exporting, or editing table data. To keep the toolbar clean and user-friendly, we suggest using tertiary or icon-only buttons for these actions. Ideally, we recommend displaying a maximum of three actions within the table toolbar.

For cases where additional actions are needed, we encourage making them accessible through alternative components like an overflow menu or similar solutions. This approach ensures that users can access all relevant actions while maintaining a tidy and efficient table toolbar interface.

Types of Data Table Actions

1. Grouping: Grouping actions allow users to group data in the table based on specific criteria, enhancing data organization and readability.
2. Filtering: Filtering actions enable users to refine the data displayed in the table, allowing for focused analysis based on desired attributes.
3. More Options: The "More" action provides access to additional options, such as exporting data, customizing the table view, or performing other relevant actions.

Usage

To integrate Data Table Actions seamlessly, follow these guidelines:

1. Placement: Position the actions appropriately within the data table, ensuring easy access and clear visibility.
2. Icons and Labels: Use intuitive icons and concise labels to signify each action, aiding users in understanding their purpose quickly.
3. Grouping and Filtering Logic: Implement grouping and filtering actions logically, reflecting users' needs and common data exploration patterns.

---

Table Search

Features

1. Search Input: The component includes a search input field where users can enter keywords or phrases to search for specific data.
2. Clear Button: An optional clear button appears within the search input, allowing users to quickly clear the search query.
3. Instant Filtering: As users type their search query, the data table dynamically filters and displays matching results in real-time.

Usage

To effectively integrate Data Table Search, follow these guidelines:

1. Placement: Position the search component prominently within the data table, making it easily accessible to users.
2. Search Logic: Implement a search logic that aligns with user expectations and considers relevant data attributes for searching.
3. Search Feedback: Provide visual feedback, such as loading indicators or messages, to inform users about search progress and results.

---

Batch actions

Features

1. Selection Checkbox: The component includes a selection checkbox for each row, enabling users to mark entries for bulk actions.
2. Select All Checkbox: An optional "Select All" checkbox appears to facilitate selecting all rows in the table with a single click.
3. Action Dropdown: A dropdown menu contains a list of available actions that users can apply to the selected rows.

Usage

To effectively integrate Data Table Bulk Action, follow these guidelines:

1. Placement: Position the component strategically within the data table, making it easily discoverable and accessible.
2. Selection Logic: Implement a robust selection logic that allows users to easily select individual rows or all rows at once.
3. Clear Selection: Provide a clear and intuitive way for users to clear their selections and start over if needed.

Best Practices

To optimize the user experience with Data Table Bulk Action, consider the following best practices:

1. Clarity: Ensure that the purpose and available actions are clear to users, minimizing confusion during bulk operations.
2. Feedback: Provide visual feedback to confirm successful execution of bulk actions and any potential errors.
3. Accessibility: Ensure the component is accessible to all users, including keyboard navigation and proper ARIA attributes.

 

 

Common examples of bulk actions in a table component include:

1. Delete: Users can select multiple rows and delete them all in one operation, eliminating the need to delete each row individually.
2. Edit: Users can select multiple rows and update a specific field or property for all the selected items simultaneously. E.g. they might change the status of multiple orders from "pending" to "completed" with a single edit.
3. Archive: Users can select multiple rows and move them to an archive or secondary storage, keeping the main table clutter-free while still retaining access to the selected items.
4. Export: Users can select multiple rows and export the data to a different file format, such as CSV or Excel, making it easier to share or analyze the information outside of the application.

 

A typical workflow for bulk actions in a table component:

1. Selection: The table component provides checkboxes or other selection mechanisms for each row, allowing users to mark multiple rows for the bulk action. Users can select individual rows or use select/deselect all options.
2. Action menu: Once the desired rows are selected, a menu or toolbar with available bulk actions is displayed. This menu often appears above or below the table, providing options such as delete, archive, export, or apply specific changes.
3. Action confirmation: When users choose a bulk action, they might be prompted to confirm their choice before proceeding. This confirmation step ensures that users are aware of the action they are about to take, especially when performing potentially irreversible operations like deleting.
4. Execution: After confirming the bulk action, the table component performs the chosen action on all the selected rows simultaneously. This can involve deleting the rows, archiving them, updating their status, or performing any other specified operation.
5. Feedback: Once the bulk action is executed, the table component provides feedback to the user, indicating the success or failure of the operation. This feedback may be in the form of notifications, alerts, or updated visuals in the table, ensuring users are aware of the outcome.

---

Collumn Sorting

Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon on hover, and when a column has been sorted.

A sorted data table has three states: unsorted (arrows), sorted-up (arrow--up) or sorted-down (arrow--down). The icon indicates the current sorted state and is only shown if sorting is activated. Only the column being sorted should display an icon, and unsorted icons are only visible on hover.

Features

1. Sortable Columns: Users can click on the column headers to toggle between ascending and descending sorting.
2. Indicator Icons: Optional sorting indicator icons appear next to the sorted column header, providing visual cues.
3. Default Sorting: Optionally, define default sorting for the table to present data in a predefined order.

Usage

To effectively integrate Data Table Column Sorting, follow these guidelines:

1. Accessible Interaction: Ensure the sorting functionality is accessible to all users, including those who use assistive technologies.
2. Clear Feedback: Provide clear visual feedback to indicate the current sorting status, especially when column headers are clicked.
3. Reset Option: Consider adding a reset option to return the table to its original order after sorting.

---

Row Selection

By default, the selectable variant allows users to select more than one row in a data table simultaneously. To select a row, the user must select the checkbox associated with the row. The user can select all rows at once by selecting the checkbox in the column header. Checkboxes in the rows have only two states, checked and unchecked. However, the check all checkbox in the column header has three states, check, unchecked, and indeterminate. The indeterminate state indicates that at least one selection was made, but not all.

Actions applied to the chosen selected items are found in the default batch action mode .

Features

1. Selection Checkbox: The component includes a selection checkbox for each row, enabling users to mark rows for selection.
2. Select All Checkbox: Optionally, a "Select All" checkbox appears to facilitate selecting all rows in the table at once.
3. Row Highlighting: When a row is selected, it is visually highlighted to provide clear feedback to the user.

Usage

To effectively integrate Data Table Row Selection, follow these guidelines:

1. Selection Logic: Implement a robust selection logic that allows users to easily select individual rows or all rows at once.
2. User Intent: Ensure that row selection aligns with user needs and common use cases for data interaction.
3. Clear Selection: Provide a clear and intuitive way for users to clear their selections and start over if needed.

Best Practices

To optimize the user experience with Data Table Row Selection, consider the following best practices:

1. Clarity and Visibility: Ensure the selection checkboxes are easily discoverable and clearly visible to users.
2. Feedback: Provide visual feedback to confirm successful row selection and any potential errors.
3. Accessibility: Ensure the component is accessible to all users, including keyboard navigation and proper ARIA attributes.

---

Inline actions & Overflow menu

Inline actions are functions that may be performed on a specific table row. Each row is accompanied by a DropDownMenu that contains actions related specifically to that row.

When the DropDownMenu contains fewer than three options, keep the actions inline as icon buttons instead. This reduces a click and makes available actions visible at a glance.

By default, the overflow menu icons are persistent on each row. Having the overflow menus always visible signals to the user actions can be taken on the table rows. Alternatively, a product team may use the DropDownMenuonHover prop to only show the overflow menu on hover and focus to reduce the visual clutter of an overflow menu on every row.

See the DropDownMenuonHover component for further guidelines and configurations.

Inline Actions

Features

1. Action Buttons: The Inline Actions component contains clear and easily recognizable action buttons relevant to the data or content.
2. Compact Design: The Inline Actions are designed to be compact and space-efficient, minimizing visual clutter.
3. Instant Interaction: Users can interact with the Inline Actions directly and quickly trigger the intended actions.

Usage

To effectively integrate Inline Actions, follow these guidelines:

1. Relevance: Ensure the Inline Actions are directly related to the content or data displayed within the container.
2. Limitation: Only include essential actions that are frequently used to avoid overwhelming users.
3. Consistency: Maintain visual consistency with other components and design elements in your application.

Overflow Menu

Features

1. More Options: The Overflow Menu component provides access to additional actions that couldn't fit in the available screen space.
2. Icon Indicator: A vertical ellipsis icon indicates the presence of the Overflow Menu, prompting users to discover hidden actions.
3. Space-Saving: The Overflow Menu allows us to present a comprehensive list of actions without cluttering the user interface.

Usage

To effectively integrate the Overflow Menu, follow these guidelines:

1. Prioritization: Place the most critical and frequently used actions in the Inline Actions, and less commonly used actions in the Overflow Menu.
2. Visibility: Ensure that the Overflow Menu icon is easily identifiable and visible to users.
3. Tooltip: Optionally, provide a tooltip with explanatory text to help users understand the purpose of the Overflow Menu.

---

Pagination

Pagination divides table data into separate pages. Simple pagination indicates the current page in view and offers controls to incrementally navigate to the previous or next page. Advanced pagination is accompanied by an option that enables the user to change the number of items per page and to jump to a specific page number. The pagination component is always placed at the bottom of the data table. See the Pagination component for further guidelines and configurations.

Features

1. Page Navigation: The Pagination component offers controls to navigate between different pages of the data table.
2. Page Size Selection: Optionally, users can choose the number of rows displayed per page, customizing their view.
3. Visual Feedback: Clear visual cues highlight the current page and indicate the total number of pages.

Usage

To effectively integrate Data Table Pagination, follow these guidelines:

1. Page Size Options: Offer a balanced selection of page size options that cater to various user preferences and device capabilities.
2. Intuitive Navigation: Implement intuitive navigation controls, ensuring smooth page transitions and visual feedback.
3. Responsive Design: Ensure the pagination component adapts seamlessly to different screen sizes and devices.

---

Content

The majority of table contents include data that is inputted by the user or pulled from other areas of the product. The table does, however, include some parts that require content design attention.

Main elements

Table title and description

• Table titles should clarify what the data has in common and what purpose it serves.
• Use a description under the title to provide more information about the data, where it comes from, how it can be used, or how it affects the product in another place.
• Use sentence case.

Column titles

• Column titles should describe the data in that column.
• Keep column titles at 4 words or less.
• In cases where a column title is too long, the text should be wrapped to two lines, and the rest should be truncated. The full text should be shown in a tooltip on hover.
• Use sentence case.

Buttons (actions)

• Tables will use either tertiary or ghost buttons in various places. Each button should have a tooltip which states what happens when it is selected.
• Use an actionable tone when writing button tooltips.
• Use 1-3 words for button tooltips.
• Do not use special characters or punctuation for button tooltips.