Are Ninna UI tables responsive?

Yes. Tables are wrapped in an overflow-x-auto container by default, so they scroll horizontally on small screens. You can also use the compact density variant to reduce padding on mobile.

Does DataTable support server-side pagination?

Yes. Pass a pagination object and an onPageChange callback. DataTable renders the pagination UI and calls your callback when the user changes page — you fetch the new data slice.

Components

React Table Components

Accessible data tables with sorting, filtering, and pagination. Semantic HTML table structure with Tailwind CSS v4 styling.

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

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

Key features

Semantic HTML table structure (thead, tbody, tr, th, td)

DataTable with built-in sorting, filtering, and pagination

Responsive overflow handling

Striped rows, hover states, and compact density

Full keyboard navigation

data-slot CSS targets for every table element

Two table approaches

Ninna UI provides two table components: Table for manual composition (you render rows yourself) and DataTable for data-driven rendering with built-in sorting, filtering, and pagination.

Table gives you full control over markup. DataTable takes a columns config and a data array, then handles rendering, sorting, and pagination automatically.

Component Docs

Table DataTable Stat