Table

free

Table gives dense records a scannable grid you compose from styled row and cell primitives.

Member	Role	Status
Aria Patel aria@acme.io	Owner	Active
Diego Ramos diego@acme.io	Admin	Active
Mei Lin mei@acme.io	Editor	Invited
Sam Turner sam@acme.io	Viewer	Active

import Table from '@/components/ui/table';
import Avatar from '@/components/ui/avatar';
import Tag from '@/components/ui/tag';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Table

pnpm dlx nateui@latest add Table

yarn dlx nateui@latest add Table

Examples

Basic

Invoice	Client	Amount
INV-1024	Northwind Traders	$1,280.00
INV-1025	Globex Corp	$3,540.00
INV-1026	Soylent Industries	$920.00

import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td } = Table;

Compact

SKU	Product	In stock
KB-01	Mechanical Keyboard	132
MS-04	Wireless Mouse	58
HS-02	Studio Headset	9
WC-06	HD Webcam	0
DK-03	Docking Station	24

import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td } = Table;

Bordered

Project	Lead	Progress
Website relaunch	Aria Patel	80%
Mobile app v2	Diego Ramos	45%
Billing migration	Mei Lin	12%

import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td } = Table;

Vertical Divider

Region	Deals	Revenue
North America	42	$128k
Europe	31	$96k
Asia Pacific	27	$74k

import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td } = Table;

Grouped Header

Rep	Meetings		Outcomes
Rep	Q1	Q2	Won	Lost
Aria Patel	24	31	12	4
Diego Ramos	18	22	9	7
Mei Lin	30	27	15	3

import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td } = Table;

Sorting


ORD-3014	$960	7
ORD-3012	$420	3
ORD-3015	$275	2
ORD-3013	$180	1

import { useState } from 'react';
import Table from '@/components/ui/table';

const { THead, TBody, Tr, Th, Td, Sorter } = Table;

Filtering

Name	Team
Aria Patel	Design
Diego Ramos	Engineering
Mei Lin	Engineering
Sam Turner	Support
Priya Shah	Design

import { useState } from 'react';
import Table from '@/components/ui/table';
import Input from '@/components/ui/input';

Row Selection

	File	Size
	Q3-report.pdf	2.4 MB
	brand-assets.zip	18 MB
	roadmap.png	640 KB
	contract.docx	82 KB

import { useState } from 'react';
import Table from '@/components/ui/table';
import Checkbox from '@/components/ui/checkbox';

Pagination

Reference	Amount
TXN-5000	$42.00
TXN-5001	$79.00
TXN-5002	$116.00
TXN-5003	$153.00
TXN-5004	$190.00

23 transactions

import { useState } from 'react';
import Table from '@/components/ui/table';
import Pagination from '@/components/ui/pagination';

Expandable Rows

Shipment	Carrier	Status
SHP-01	FedEx	In transit
Picked up - Austin, TX Departed - Memphis, TN
SHP-02	UPS	Delivered
SHP-03	DHL	Pending

import { Fragment, useState } from 'react';
import Table from '@/components/ui/table';
import { PiCaretRight } from 'react-icons/pi'

TanStack Table

Ticket	Subject	Priority	Updated
TCK-201	Checkout button unresponsive	High	2h ago
TCK-198	Export CSV missing a column	Medium	5h ago
TCK-195	Typo in confirmation email	Low	1d ago
TCK-190	Slow load on reports page	Medium	2d ago
TCK-187	Dark mode toggle resets on reload	Medium	3d ago

import { useMemo, useState } from 'react';
import {
  columnVisibilityFeature,
  createPaginatedRowModel,

API

Table is a compound component: the default export is the styling wrapper, and the section, row, and cell primitives hang off it as Table.THead, Table.TBody, Table.TFoot, Table.Tr, Table.Th, Table.Td, and Table.Sorter. Each primitive renders its matching native element and forwards native props, so you own the data and behavior yourself.

Table

Prop	Description	Type	Default
`bordered`	Wrap the table or overflow renderer in a bordered card surface.	`boolean`	`false`
`compact`	Reduce cell padding for dense data.	`boolean`	`false`
`hoverable`	Highlight body rows on hover.	`boolean`	`true`
`overflow`	Wrap the table in an overflow container. Uses the native overflow wrapper unless `renderOverflow` is supplied.	`boolean`	`true`
`overflowClass`	Extra classes for the default overflow container.	`string`	-
`renderOverflow`	Renders a custom overflow container around the table when `overflow` is enabled. The result is placed inside the bordered surface when `bordered` is enabled.	`(table: ReactNode) => ReactNode`	-
`verticalDivider`	Show vertical column dividers per section.	`TableVerticalDivider`	`{ head: false, body: false, footer: false }`
`asElement`	Render the table as a different element, for example a flex layout.	`ElementType`	`'table'`
`...nativeProps`	Native `table` element props.	`ComponentPropsWithRef<'table'>`	-

Table.THead / Table.TBody / Table.TFoot

Prop	Description	Type	Default
`asElement`	Render the section as a different element.	`ElementType`	`'thead'` / `'tbody'` / `'tfoot'`
`...nativeProps`	Native section element props.	`ComponentPropsWithRef<'thead'>`	-

Table.Tr

Prop	Description	Type	Default
`asElement`	Render the row as a different element.	`ElementType`	`'tr'`
`...nativeProps`	Native `tr` props, including `className` for selected or active rows.	`ComponentPropsWithRef<'tr'>`	-

Table.Th / Table.Td

Prop	Description	Type	Default
`asElement`	Render the cell as a different element.	`ElementType`	`'th'` / `'td'`
`...nativeProps`	Native cell props, including `colSpan`, `rowSpan`, and `className`.	`ComponentPropsWithRef<'th'>`	-

Table.Sorter

Prop	Description	Type	Default
`sort`	Current sort direction. `true` shows the neutral indicator; `'asc'` and `'desc'` show the active arrows.	`boolean \| 'asc' \| 'desc'`	-
`className`	Extra classes for the sorter wrapper.	`string`	-

Types

type TableVerticalDivider = {
  head?: boolean
  body?: boolean
  footer?: boolean
}