SimpleTable

The SimpleTable component is a simplified version of the DataTable. It is designed to handle small sets of data and markdown representation. It does not feature sorting, resizing, filtering, or virtualization and behaves like a native HTML table.

OverviewPropertiesUsage

Visual configuration

The SimpleTable allows configuration for its visual look, data density, and data point separation to ensure a clear and functional presentation of the data.

Visual look

Contained

• Use the contained variant for most cases, mainly when the table plays a prominent role in the visual hierarchy of the view.

Uncontained

• Always use the uncontained variant when the table is the only element inside a Surface.
• Use for a subtler appearance when the table takes on a secondary hierarchy within its context.

Data density

SimpleTables have three density options that control the standard row height and whitespace in a cell.

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.

Default

• Use the default row density for datasets where users should process and scan the shown information quickly.

Comfortable

• Use the comfortable row density if you need 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.

SimpleTable vs. DataTable

All visual parameters are configurable for SimpleTable and DataTable.

SimpleTable

• Use the SimpleTable for a purely visual representation of tabular data, without support for any significant interactivity such as sorting or loading performance like pagination.

DataTable

• Use the DataTable for feature-rich interactions such as dynamic manipulation and to manage datasets with extensive or complex content such as charts.