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