Skip to main content

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.

OverviewPropertiesUsage

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.

A SimpleTable in the contained style, with a bordered background that sets it apart from the surface.

A SimpleTable in the contained style, with a bordered background that sets it apart from the surface.

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.

A SimpleTable in the uncontained style, with no border or background, blending into the surface.

A SimpleTable in the uncontained style, with no border or background, blending into the surface.

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.

A SimpleTable with default row density, using standard row height and spacing.

A SimpleTable with default row density, using standard row height and spacing.

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.

A SimpleTable with condensed row density, using shorter rows to fit more data in less space.

A SimpleTable with condensed row density, using shorter rows to fit more data in less space.

Comfortable​

  • Use the comfortable row density to improve readability for tables with visually crowded cell content.

A SimpleTable with comfortable row density, using taller rows and extra whitespace for readability.

A SimpleTable with comfortable row density, using taller rows and extra whitespace for readability.

Data point separation​

No separation​

  • Use no visual data point separation for simple data sets. For example, if you use a key-value list.

A SimpleTable with no data point separation, showing no dividing lines between rows.

A SimpleTable with no data point separation, showing no dividing lines between rows.

Horizontal dividers​

  • Use horizontal dividers to highlight the distinction and separation between rows.

A SimpleTable with horizontal dividers separating each row.

A SimpleTable with horizontal dividers separating each row.

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.

A SimpleTable with zebra stripes, alternating the background color of each row.

A SimpleTable with zebra stripes, alternating the background color of each row.

Vertical dividers​

  • Use vertical dividers to separate columns, especially when dealing with a relatively large amount of data points.

A SimpleTable with vertical dividers separating each column.

A SimpleTable with vertical dividers separating each column.

Combined separation​

  • Combine zebra stripes and vertical dividers to establish a structured dataset, ensuring row and column distinction for effective readability.

A SimpleTable combining zebra stripes and vertical dividers for both row and column separation.

A SimpleTable combining zebra stripes and vertical dividers for both row and column separation.

Still have questions?
Find answers in the Dynatrace Community