Data Table - Seventh UI CSS

Default

Name	Status	Location	Owner	Updated
Main entrance camera	Online	Lobby	Operations	2 minutes ago
Parking barrier	Attention	Garage	Facilities	15 minutes ago
Server rack	Offline	Datacenter	Infrastructure	1 hour ago

Filter Filter Filter

Row Sizes

Large row	56px	Minimum cell width 160px

Medium row	48px	Figma default

Small row	40px	Dense operational view

Row States

Enabled	Default row state
Hover	Neutral-alpha background
Clicked / selected	Blue selected row treatment
Focus	2px blue focus border

Row Patterns

	Selectable row	Use native checkbox state.
	Radio row	Use native radio grouping.
	Expandable row	Expansion state is consumer-owned.
Expanded content can use nested layout, forms, or detail summaries while keeping table semantics.
	Expandable selectable row	Combine selection and expansion controls only when both actions are clear.

When a row has more than three available actions, use one overflow menu trigger instead of rendering every action inline.

Action Overflow

More than three actions

Pagination Sizes

Dark Theme

Title	Title	Actions
Text	Text
Selected	Text

Behavior Notes

This component is CSS-first. Sorting, filtering, pagination, row expansion, row selection, column resizing, virtual scrolling, and data fetching are owned by the consuming application.

Use .sui-data-table-wrapper for horizontal scrolling. Set --sui-data-table-wrapper-max-block-size when a table also needs vertical scrolling.

Use semantic <table> markup by default. Use ARIA grid patterns only when a consumer intentionally builds a non-table composite with keyboard navigation.

CSS API

<div class="sui-data-table-shell">
  <div class="sui-data-table-wrapper">
    <table class="sui-data-table sui-data-table--medium">
      <thead>
        <tr>
          <th class="sui-data-table__header-cell" scope="col">Title</th>
        </tr>
      </thead>
      <tbody>
        <tr class="sui-data-table__row">
          <td class="sui-data-table__cell">Text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>