Table

Anatomy

Guidelines

The Table is a component used to display sets of data in an organized, tabular format. Compared to our DataTable component, it's less opinionated and custom, but more than suitable for basic data sets.

Tables for layout

Historically, HTML tables were once used to arrange elements on a webpage before modern CSS layout tools like Flexbox and Grid existed. Never use the Table for layout purposes. We provide components specialized in building layouts such as the Box and Grid. For more information and the full list of available components, see our "Layout" section under "Components."

Table vs. DataTable

The Table and DataTable components are very similar but play a different role in how the user interacts with the data displayed:

• Tables are low-level components used to display data in a read-only basis. For the most basic use cases, a Table is preferred.
• DataTables are feature-rich custom components build on top of the Table. They are suited for more complex interactions such as sorting, filtering, pagination, and column management that the Table component cannot handle.

Appearance

Layout

Layout determines how the Table distributes column widths. The default auto layout allows columns to adjust to content size. Fixed layout divides columns equally regardless of content, providing predictable sizing.

Row styles

Beyond the default bordered rows, the Table supports striped and borderless styles.

Borderless rows remove the separator between entries for a cleaner presentation. Striped rows alternate between two background colors to improve readability in data-dense Tables.

Behaviors

States

Depth padding

Table cells support depth-based padding for tree-like or nested table patterns. When enabled on a cell, additional inline-start padding is calculated based on a nesting level, visually indenting child rows to convey hierarchy.

Panel alignment

When a Table is placed inside a Panel, edge cells (first and last in each row) automatically inherit the Panel's content padding. This ensures that Table content aligns flush with the Panel's borders without manual padding adjustments.

Content

Caption

Table captions are important for providing assistive technology information about the Table's purpose and the type of data it contains. Short, descriptive nouns or noun phrases work best for captions.

Column headers

Column headers should clearly label the data in each column. Write headers in sentence case and avoid abbreviations where possible.