# Table

> Source: https://design.nanatec.co.ke/components/table/
> A composable, accessible data table. Compose it with `nana-table-header`, `nana-table-body`, `nana-table-footer`, `nana-table-row`, `nana-table-head`, `nana-table-cell` and `nana-table-caption`. Built on the CSS table model + surface tokens, so it lays out natively, scrolls horizontally on small screens, and follows the light/dark theme.

A composable, accessible data table. Compose it with `nana-table-header`, `nana-table-body`, `nana-table-footer`, `nana-table-row`, `nana-table-head`, `nana-table-cell` and `nana-table-caption`. Built on the CSS table model + surface tokens, so it lays out natively, scrolls horizontally on small screens, and follows the light/dark theme.

## Preview

```html
<nana-table variant="striped" hoverable style="width:100%">
  <nana-table-header>
    <nana-table-row>
      <nana-table-head>Name</nana-table-head>
      <nana-table-head>Role</nana-table-head>
      <nana-table-head>Status</nana-table-head>
      <nana-table-head align="right">Joined</nana-table-head>
    </nana-table-row>
  </nana-table-header>
  <nana-table-body>
    <nana-table-row>
      <nana-table-cell>Ada Lovelace</nana-table-cell>
      <nana-table-cell>Engineer</nana-table-cell>
      <nana-table-cell>Active</nana-table-cell>
      <nana-table-cell align="right">2026-01-04</nana-table-cell>
    </nana-table-row>
    <nana-table-row>
      <nana-table-cell>Alan Turing</nana-table-cell>
      <nana-table-cell>Researcher</nana-table-cell>
      <nana-table-cell>Invited</nana-table-cell>
      <nana-table-cell align="right">2026-02-11</nana-table-cell>
    </nana-table-row>
  </nana-table-body>
</nana-table>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/table";
```

## Basic usage

```html
<nana-table variant="striped" hoverable>
  <nana-table-header>
    <nana-table-row>
      <nana-table-head>Name</nana-table-head>
      <nana-table-head>Role</nana-table-head>
    </nana-table-row>
  </nana-table-header>
  <nana-table-body>
    <nana-table-row>
      <nana-table-cell>Ada Lovelace</nana-table-cell>
      <nana-table-cell>Engineer</nana-table-cell>
    </nana-table-row>
  </nana-table-body>
</nana-table>
```

## Variants

The `variant` attribute sets the table's styling — `default`, `bordered`,
`striped`, or `minimal`. Add `hoverable` for row hover.

```html
<nana-table variant="default" style="width:100%">
  <nana-table-header><nana-table-row><nana-table-head>Item</nana-table-head><nana-table-head align="right">Qty</nana-table-head></nana-table-row></nana-table-header>
  <nana-table-body>
    <nana-table-row><nana-table-cell>Default</nana-table-cell><nana-table-cell align="right">128</nana-table-cell></nana-table-row>
    <nana-table-row><nana-table-cell>Widgets</nana-table-cell><nana-table-cell align="right">64</nana-table-cell></nana-table-row>
  </nana-table-body>
</nana-table>
<nana-table variant="bordered" style="width:100%">
  <nana-table-header><nana-table-row><nana-table-head>Item</nana-table-head><nana-table-head align="right">Qty</nana-table-head></nana-table-row></nana-table-header>
  <nana-table-body>
    <nana-table-row><nana-table-cell>Bordered</nana-table-cell><nana-table-cell align="right">128</nana-table-cell></nana-table-row>
    <nana-table-row><nana-table-cell>Widgets</nana-table-cell><nana-table-cell align="right">64</nana-table-cell></nana-table-row>
  </nana-table-body>
</nana-table>
<nana-table variant="striped" style="width:100%">
  <nana-table-header><nana-table-row><nana-table-head>Item</nana-table-head><nana-table-head align="right">Qty</nana-table-head></nana-table-row></nana-table-header>
  <nana-table-body>
    <nana-table-row><nana-table-cell>Striped</nana-table-cell><nana-table-cell align="right">128</nana-table-cell></nana-table-row>
    <nana-table-row><nana-table-cell>Widgets</nana-table-cell><nana-table-cell align="right">64</nana-table-cell></nana-table-row>
  </nana-table-body>
</nana-table>
<nana-table variant="minimal" style="width:100%">
  <nana-table-header><nana-table-row><nana-table-head>Item</nana-table-head><nana-table-head align="right">Qty</nana-table-head></nana-table-row></nana-table-header>
  <nana-table-body>
    <nana-table-row><nana-table-cell>Minimal</nana-table-cell><nana-table-cell align="right">128</nana-table-cell></nana-table-row>
    <nana-table-row><nana-table-cell>Widgets</nana-table-cell><nana-table-cell align="right">64</nana-table-cell></nana-table-row>
  </nana-table-body>
</nana-table>
```

## Density

The `density` attribute sets cell padding — `compact`, `normal`, or
`comfortable`.

```html
<nana-table density="compact" variant="bordered" style="width:100%">
  <nana-table-header><nana-table-row><nana-table-head>Item</nana-table-head><nana-table-head align="right">Qty</nana-table-head></nana-table-row></nana-table-header>
  <nana-table-body>
    <nana-table-row><nana-table-cell>Widgets</nana-table-cell><nana-table-cell align="right">128</nana-table-cell></nana-table-row>
    <nana-table-row><nana-table-cell>Gadgets</nana-table-cell><nana-table-cell align="right">64</nana-table-cell></nana-table-row>
  </nana-table-body>
</nana-table>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-mode-change` | `CustomEvent` | — |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Table sections (header, body, footer, caption) |
| `empty` | Full-width placeholder shown when `empty` is set (e.g. a "no results" message). Renders below the header, spanning every column. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-table-border-color` | — | Grid / divider colour |
| `--nana-table-row-hover` | — | Row hover background |
| `--nana-table-stripe` | — | Zebra-stripe background (striped variant) |
| `--nana-table-header-bg` | — | Header background colour |
| `--nana-table-header-color` | — | Header text colour |
| `--nana-table-radius` | — | Corner radius of the table's frame. Set to 0 for a flush, full-bleed table. |
| `--nana-table-frame` | — | Width of the frame around the table. Set to 0 to remove it. |

## CSS Parts

| Part | Description |
|---|---|
| `container` | The scroll container |
| `table` | The native `<table>` element |
| `caption` | The table caption |
| `cell` | A header or body cell |
| `content` | The inner content wrapper |
| `row` | The cells row |
| `toggle` | The chevron disclosure button |
| `detail-row` | The detail row wrapper |
| `detail` | The full-width detail panel |
| `skeleton` | The skeleton-loader region shown while `loading` |
| `empty` | The empty-state region |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/carousel/">Carousel</a></li>
  <li><a href="/components/carousel-item/">Carousel Item</a></li>
  <li><a href="/components/image-comparer/">Image Comparer</a></li>
  <li><a href="/components/qr-code/">QR Code</a></li>
  <li><a href="/components/icon/">Icon</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-table--docs