Table

Semantic HTML table with consistent styling.

import { Table } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Table component in your application.

import { Table } from "@ninna-ui/data-display";

export default function Example() {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head>Name</Table.Head>
          <Table.Head>Email</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Alice</Table.Cell>
          <Table.Cell>alice@example.com</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Basic

A basic table with header and body rows.

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol White	carol@example.com	Viewer

With Caption

Add a caption to describe the table content.

Team Members
Name	Role	Status
Alice	Admin	Active
Bob	Editor	Active
Carol	Viewer	Inactive

Item	Amount
Widget A	$250
Widget B	$150
Widget C	$350
Total	$750

API Reference

Props for the Table component and its sub-components.

Table (Root)

Prop	Type	Default	Description
`children*`	`ReactNode`	-	Table sub-components (Header, Body, Footer, Caption)
`className`	`string`	-	Additional CSS classes

Table.Row

Prop	Type	Default	Description
`children*`	`ReactNode`	-	Row cells (Head or Cell)
`className`	`string`	-	Additional CSS classes

Table.Head

Prop	Type	Default	Description
`children`	`ReactNode`	-	Header cell content
`className`	`string`	-	Additional CSS classes

Table.Cell

Prop	Type	Default	Description
`children`	`ReactNode`	-	Cell content
`className`	`string`	-	Additional CSS classes

Table.Caption

Prop	Type	Default	Description
`children*`	`ReactNode`	-	Caption text
`className`	`string`	-	Additional CSS classes

Accessibility

Table uses native HTML <table> for full semantic support
Caption provides an accessible table description
Header cells use <th> with proper scope
Screen readers announce cell positions and header associations