Standard vs. quiet

Use a standard table when a table is the main focus of an experience. Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight.

Column dividers

Column dividers help organize table content and aid users in parsing related data. You can apply dividers selectively to group related columns—for example, separating user information from action columns, or grouping metadata fields together. Use dividers sparingly to avoid visual clutter.

Selection

By default, rows are not selectable. Enable selection with selectionMode=single or selectionMode=multiple.

1. Checkbox selection (default): Checkboxes appear on the left. Clicking toggles selection. Use for bulk actions or when selection should be explicit.
2. Highlight selection: No checkboxes—rows show a highlighted background when selected. Clicking a row selects it (use modifier keys for multi-select). Use when rows also need to support navigation or actions via onAction or href, or when a cleaner appearance is needed.

Navigation: Use onAction for row actions or href for links. In highlight selection style, double-click performs actions while single-click selects, allowing both behaviors.

Hover state

All tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row.