Resources
Intro & Anatomy
Tables are containers that present information systematically, helping users organise, display, and interact with datasets of various sizes and complexities.
Use tables when users need to compare data, scan for specific information, or understand relationships between different data points.
Tables help users compare data in a controlled and easy-to-read manner whilst providing sorting functionality for each column. They work best for displaying large datasets where structure and comparison are essential for user comprehension.
Options & Styles
Variants
Transparent for minimal visual separation between rows
Striped with alternating row colours for improved readability
Content
Header row is optional for labelling columns
Header column is optional for labelling rows
Rows and cells contain the primary data content
Mobile
A vertical mobile table is available and displays content in stacked format optimised for narrow screens
Cell Content
Cells can contain text blocks, images, and actions to accommodate various data types and user interactions, e.g. displaying mobile plan details with call-to-action buttons.
Cell Content Figma Swap Instance
Cell Content Example
Scroll Behaviour
Cells can contain text blocks, images, and actions to accommodate various data types and user interactions, e.g. displaying mobile plan details with call-to-action buttons.
Horizontal scroll keeps header columns fixed whilst remaining content scrolls when space is insufficient
Vertical scroll maintains fixed header rows whilst table body scrolls for lengthy datasets
Best Practice & Usage
Tables should present data clearly with consistent formatting and appropriate column management. Focus on essential information whilst maintaining readability across devices.
Ensure column headers are clear, concise, and consistently formatted to aid data comprehension.
Limit columns to prevent clutter and maintain focus on key data points.
Left-align textual content and right-align numerical data. Column headers should align with their data.
Follow proper alignment conventions and avoid centre-aligning content to prevent readability issues.
Use the same format for all content within tables, e.g. currency or time formats.
Avoid switching between different content formats within tables to prevent confusion.
Convey missing cell data using an en dash (–) rather than leaving cells empty.
Avoid empty cells. If insufficient data exists, consider alternative components.
Utilise row headers for easy distinction between rows when content warrants it.
Avoid row headers when content doesn't require additional labelling.
Enable column sorting for better data exploration and user control.
Avoid excessive information in single rows that overwhelms users and hinders readability.
Display only columns necessary for the user's workflow and tasks.
Refrain from showing columns that don't benefit the user's workflow.
Allow horizontal navigation when table width exceeds screen capacity.
Maintain adequate spacing and readability on smaller screens.
Implement stacked mobile layouts for improved usability on narrow screens.
Theming
You can customise colours, font styles and weights, borders, spacings, and sizings to match your design requirements.