Table

@k4k3ru/components-table provides native HTML table styling. The existing editable, sticky-column and outlined variants remain available. table--plain adds a read-only presentation with horizontal dividers, token-based colors/typography and numeric alignment.

@import "@k4k3ru/components-table/dist/style.css";

<div class="table__container table__container--responsive"
     role="region" aria-label="Credit activity" tabindex="0">
  <table class="table table--plain">
    <caption class="table__caption">Credit activity</caption>
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__cell table__cell--header" scope="col">Description</th>
        <th class="table__cell table__cell--header table__cell--numeric" scope="col">Change (ticks)</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <td class="table__cell">Signup bonus</td>
        <td class="table__cell table__cell--numeric">+10,000,000</td>
      </tr>
    </tbody>
  </table>
</div>

Use table__caption--hidden to retain the table's accessible name while hiding its caption visually. A responsive container scrolls horizontally; set a content-specific minimum table width in the consuming application when needed. Native table semantics are retained at every width. A keyboard-focusable, named region lets users scroll it.

Public properties for table--plain: --table-background, --table-divider, --table-text, --table-muted, --table-hover, --table-padding-block, --table-padding-inline. Define overrides on the table or a more specific selector. They default to the shared surface, outline and body typography tokens. Logical alignment supports RTL; numeric cells use tabular figures and align to the inline end.

Read-only tables require no JavaScript initializer. Consumers own data, pagination, filtering and loading. A decorative table of shared loading__skeleton cells can mirror the columns inside an aria-hidden="true" wrapper, with a separate loading status label. Do not expose placeholder data to assistive technology.

Build from the design system root: npm run build:table.

References: shadcn Table, and the provided /Users/kakerusato/Downloads/table/ sample (matching the existing component).

Nested collapsible groups

Use native details.table__group, with a direct summary.table__group-summary and div.table__group-content. Groups support Enter/Space, keyboard focus and nested groups without a JavaScript initializer. Omit open to start collapsed. Closing an ancestor preserves descendant open states. Do not add redundant aria-expanded attributes; the browser exposes the native disclosure state.

<details class="table__group" open>
  <summary class="table__group-summary">Venue <span class="table__group-meta">21 symbols</span></summary>
  <div class="table__group-content">
    <details class="table__group" open>
      <summary class="table__group-summary">Spot</summary>
      <div class="table__group-content">
        <!-- Native table with caption, thead and tbody goes here. -->
      </div>
    </details>
  </div>
</details>

Place groups outside a table, or inside a td spanning the relevant columns; never place details directly under table or tbody. Tables retain their native semantics. Consumers own pagination and open-state persistence when recreating DOM. --table-group-indent controls nested indentation. CSS respects RTL and reduced motion.

Compact density

Add table__container--smaller to the direct container of table--plain. This reduces cell typography to the small body token and padding to .5rem vertically and .75rem horizontally. Table alignment, numeric precision and column sizing remain owned by the table/application. Buttons and badges retain their own component sizes. The normal density remains unchanged. Font overrides are available via --table-font-size and --table-line-height.

Smaller size

Use table--smaller on the component root. Cell padding .5rem .75rem, text .875rem; also supports plain tables. Existing table__container--smaller and --smallest are preserved.

See shared sizing guidance and examples.