SimpleTable
Use SimpleTable to display small sets of data and Markdown. It doesn't support
sorting, resizing, filtering, or virtualization. It behaves like a native HTML
table.
When to use
- For a purely visual representation of tabular data without interactivity such as sorting or pagination.
When not to use
- For feature-rich interactions such as dynamic manipulation or managing datasets with extensive or complex content such as charts. Use DataTable instead.
Visual configuration
SimpleTable supports configuration for its visual look, data density, and data
point separation.
Container
Contained
- Use the contained variant for most cases, and particularly when the table is prominent in the visual hierarchy of the view.
Uncontained
- Always use the uncontained variant if the table is the only element inside a
Surface. - Use for a subtler appearance if the table is secondary in the visual hierarchy of the view.
Data density
SimpleTable has three density options that control the standard row height and
whitespace in a cell.
Default
- Use the default row density for datasets where users need to process and scan the information shown quickly.
Condensed
- Use the condensed row density to show more information in smaller areas and compact layouts. Consider that cell content might be more challenging for users to scan and distinguish.
Comfortable
- Use the comfortable row density to improve readability for tables with visually crowded cell content.
Data point separation
No separation
- Use no visual data point separation for simple data sets. For example, if you use a key-value list.
Horizontal dividers
- Use horizontal dividers to highlight the distinction and separation between rows.
Zebra stripes
- Consider using zebra stripes for large datasets where users may want to interact with one or more data points in the view. This ensures easier scanning and distinction between rows.
Vertical dividers
- Use vertical dividers to separate columns, especially when dealing with a relatively large amount of data points.
Combined separation
- Combine zebra stripes and vertical dividers to establish a structured dataset, ensuring row and column distinction for effective readability.
