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.

Preview

Name Role Status Joined Ada Lovelace Engineer Active 2026-01-04 Alan Turing Researcher Invited 2026-02-11

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

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

Basic usage

<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.

ItemQty Default128 Widgets64 ItemQty Bordered128 Widgets64 ItemQty Striped128 Widgets64 ItemQty Minimal128 Widgets64

Show code Copy

Density

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

ItemQty Widgets128 Gadgets64

Show code Copy

API

Properties

Property	Attribute	Type	Default	Description
density	—	TableDensity	'normal'	Cell padding
empty	—	boolean	false	Show the full-width empty-state placeholder instead of body rows. Provide the message via `slot="empty"`. The header still renders so the columns stay in context. A single `nana-table-cell` can't span columns (CSS tables have no `colspan`), so the placeholder is rendered as a full-width block below the grid.
hoverable	—	boolean	false	Highlight rows on hover
loading	—	boolean	false	Replace the body rows with an animated skeleton loader while data loads. The header stays visible so the layout doesn't jump when the rows arrive.
maxHeight	max-height	string | undefined	—	Constrain the body height (e.g. `"24rem"`) so the table scrolls vertically. This is what makes `sticky-header` actually stick.
sizing	—	SizingMode	'fill'	Column sizing strategy. - `fill`: Table fills the container width; columns auto-size (default). - `content`: Columns size to their intrinsic content; table scrolls horizontally if wider than the container. - `fixed`: Declared column widths are honoured; required for reliable truncation.
skeletonRows	skeleton-rows	number	4	Number of placeholder rows the skeleton loader renders while `loading`.
stickyHeader	sticky-header	boolean	false	Keep the header visible while the body scrolls. Pair with `max-height` so the body actually scrolls.
variant	—	TableVariant	'default'	Visual style

Events

Event	Description
nana-mode-change

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 parts

Part	Description
::part(container)	The scroll container
::part(table)	The native `<table>` element
::part(cell)	A header or body cell
::part(caption)	The table caption
::part(skeleton)	The skeleton-loader region shown while `loading`
::part(empty)	The empty-state region

CSS custom properties

Property	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.

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

• Keyboard accessible
• Screen-reader labels
• Focus-visible states
• ARIA roles and states
• WCAG 2.2 AA contrast

Related components

• Carousel
• Carousel Item
• Image Comparer
• QR Code
• Icon

Storybook

Explore Table interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook