Overview

The Table component is designed to display data in a structured, easy-to-read format. It allows users to quickly scan and interact with large amounts of information efficiently.

Design

Structure

The Table component consists of several elements:

• Table Header: Contains column titles and can include sorting functionality.
• Table Rows: Each row represents a single data entry, composed of multiple cells.
• Table Cells: The basic unit of data within a row. Cells can contain text, icons, or other elements.
• Pagination Controls: Located at the bottom, allowing marketers to navigate through large datasets
• Filter Controls (optional): Located above the Table Header, the Filter Controls enable marketers to narrow down data based on specific criteria, providing a more focused view of the information.
• Search (optional): Search is positioned to the right of the Filter control and provides a way for marketers to quickly find specific data within the table by entering keywords or phrases.

Variants

The Table component comes in various styles to suit different use cases:

• Full-Width Table: Spans the entire width of the container for a more expansive view.
• Fixed-Width Table: Maintains a fixed width for columns, ensuring uniformity in data presentation.
• Striped Rows: Alternates row colors for improved readability.
• Hover Highlight: Highlights rows on hover for better user interaction.

Interactions

• Sorting: Marketers can click on column headers to sort data ascending or descending.
• Row Selection: Clicking the left checkbox of a row selects it, and displays available actions in the toolbar. This also works for multi-select, although the same options may not always be available as the single selected option.
• Pagination: Controls for navigating between pages of data.
• Inline Editing: Allows marketers to edit data directly within the table cells.
• Expandable Rows: Rows can expand to reveal more detailed information or metadata.

Guidelines

Examples

Index pages

TBD

 

Fixed-width tables

TBD

 

 

Content

• Column names: Column names should be descriptive enough to describe the elements in the cell without visual context. For example, on a Campaign index, using “Name” is not descriptive enough—is it the name of the campaign? name of the creator? In this case, using Campaign gives enough context for the marketer to understand what is being referenced in the cells of this column. It also makes improves the accessibility of our tables by providing more prescriptive naming conventions.
• Long content: In tables where a column may include lengthy content, consider using truncation after a certain character limit to ensure that

Accessibility

• Ensure the table is keyboard navigable and screen reader friendly.
• Use ARIA roles and properties appropriately.
• Ensure tables are responsive and maintain usability on different screen sizes.
• For large datasets, consider virtual scrolling or server-side pagination to improve performance.

Health

Component checklist