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

Long Content Regression

Dispositivo do projeto	Perfil de canais configurado	Configurações de gravação e visualização	Codec e resolução estimada	Retenção calculada	Observações operacionais
D-Guard camera group - main entrance and parking access	Perfil de Canais com múltiplos parâmetros ativos	GRAV/VISU 1c · H264 · 640x480 · baixa compressão · fluxo contínuo	H264 · 640x480 · 15 FPS · perfil operacional estendido	30 dias com margem de segurança aplicada ao armazenamento	Linha única usada para reproduzir largura intrínseca excessiva

Regression fixture for the width contract: this table intentionally uses one row, multiple columns, long text, and no explicit column widths.

Width Contract

Data Table is fluid by default. The table minimum inline size is controlled by --sui-data-table-min-inline-size, which defaults to 100%.

Use an explicit value only when a table is intentionally wider than its container and should scroll inside .sui-data-table-wrapper.

Device	Channels	Recording profile	Codec	Retention	Status
Main entrance camera group	GRAV/VISU 1c	Continuous recording with operational review	H264 · 640x480 · 15 FPS	30 days	Ready

With table-layout: fixed, use colgroup when columns need predictable distribution. Do not rely on long content to define structural table width.

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 and adapter-friendly. Seventh UI provides the visual structure, states, density, toolbar, pagination surface, scroll wrapper, and action patterns.

Sorting, filtering, search, pagination logic, row expansion, row selection, column resizing, virtual scrolling, remote data fetching, and table engine behavior are owned by the consuming application or a dedicated table library.

Use these classes to style semantic tables or external table packages such as TanStack Table, AG Grid, DataTables, Quasar Table, PrimeVue DataTable, or an equivalent product-specific implementation.

Use .sui-data-table-wrapper for horizontal scrolling. Set --sui-data-table-min-inline-size on .sui-data-table-shell only when horizontal scroll is intentional.

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>

<div class="sui-data-table-shell" style="--sui-data-table-min-inline-size: 1122px">
  <div class="sui-data-table-wrapper">
    <table class="sui-data-table sui-data-table--medium">
      <colgroup>
        <col style="width: 235px">
        <col style="width: 160px">
      </colgroup>
      ...
    </table>
  </div>
</div>