Introduction
Tables are containers that present information, helping users to organise, display, and interact with data sets of various sizes and complexities. As of now, MDX tables allow sorting [ascending & descending] for each column.
- Tables are used for the display large datasets
- Tables help users compare data in a control and easy to read manner
Usage
Tables can be used for a variety of use cases. We recommend displaying a maximum of 20 table rows. If the data set is larger, add pagination.
Ensure column headers are clear, concise, and consistently formatted to aid in data comprehension.
Limit the number of columns to prevent clutter and maintain focus on key data points.
Left-align textual content and right-align numerical data. Column headers align with the data they represent.
Make sure to proper follow alignment and always refrain from center-aligning any content to avoid clutter and readability issues.
Make sure to use the same format for all content inside a table, e.g. currency or time format.
Don't switch between different content formats inside a table to avoid confusion and clutter.
Convey missing cell data by using an en dash (–) [Option+Dash].
Avoid leaving cells blank or empty. If you don't have enough data for a table, opt for a different component instead.
Utilise row headers for easy distinction between rows.
Avoid using row headers unnecessarily or when the content does not warrant their inclusion.
Enable users to sort columns for better data exploration.
Avoid displaying too much information in a single table row, as it can overwhelm users and hinder readability.
Display only the columns necessary for the user's workflow.
Refrain from displaying columns that are not beneficial to the user's workflow and as not overcrowd a table.
Mobile Usage
Please be aware: In production, you will be required to employ separate tables for larger and smaller screens, and hide [display: none] the one that is not currently displayed.
Also known as
Data Table, Content Table,