Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Text Cell Alignment
Do
Text in table cells should be left-aligned for clarity and easy scanning.
Don't
Avoid center alignment as it disrupts readability and makes comparisons harder.
Missing Cell Values
Do
When there are gaps in available data for specific table cells, make use of dashes for text based data and "0" for numeric based data to illustrate this to users.
Don't
Do not leave table cells empty if there is no available data.
Pagination Positioning
Do
Place pagination directly below the table so it remains visible and accessible, even when there are only a few rows.
Don't
Avoid placing the pagination at the bottom of a page when there are only a few table rows, as users may overlook it and miss the control entirely.
Column Quantity
Do
By default we recommend limiting tables to a maximum of six columns to keep information scannable and easy to navigate.
Don't
Avoid displaying more than six columns at once, as this can overwhelm users—move non-essential columns into the customize column option.
Limited Non-text Element Usage
Do
Use non-text elements like status indicators, avatars, or badges sparingly to support readability and add clarity.
Don't
Avoid overloading tables with multiple non-text elements, as this reduces their impact and creates unnecessary visual noise.
Column Header Active State
Do
Use the active state in column headers only to indicate when sorting is applied, ensuring users understand the interaction.
Don't
Avoid applying the active state to headers that are not using sorting, as this creates confusion and misleads users.
Table Cell Truncation
Do
Apply truncation to overflow text so all rows maintain a consistent height, ensuring tables remain scannable.
Don't
Avoid allowing text to wrap into multiple lines—use a side panel or modal to show full content if truncation isn’t sufficient.
Fixed Column Positioning
Do
Place fixed columns at the far left of the table to maintain consistency and support smooth navigation.
Caution
When combining fixed columns with multi-select functionality, use care—stacking these side by side can feel jarring and hinder usability.
Don't
Avoid positioning fixed columns in the middle or far right, as this disrupts scanning and confuses users.
Table Row Sizing
Do
Use a single row size consistently—default to comfy, but switch to compact for dense, data-heavy tables.
Don't
Mix different row sizes within the same table, as this breaks consistency and disrupts the user experience.
Empty State Pagination Positioning
Do
Place pagination directly below the table, even in empty states, so it remains visible and accessible.
Don't
Avoid positioning pagination at the bottom of the page, as this hides it from users and disrupts discoverability.
Table Selection State
Do
Indicate row selection through the active checkbox in the multi-select column, keeping the interaction clear and consistent through this area.
Don't
Avoid using table row hover states to show selection, as this blurs the distinction between selection and simple mouse-over interaction.
Zebra Display Consistency
Do
Apply zebra striping (alternating row backgrounds) consistently to help users scan and navigate table content with ease.
Don't
Don't use inconsistent zebra patterns, as this disrupts readability and makes it harder for users to focus on the data.
Empty State Label
Do
Customize empty state labels so they clearly relate to the table’s content, helping users understand what is missing.
Don't
Avoid adding extra instructions or actions in the label—keep it focused solely on communicating the absence of data.