Table

Display tabular data with sorting and pagination

Source Code

A list of user details.
Name	Email	Status
Alex Thompson	a.tompson@company.com	Inactive
Sarah Chen	sarah.c@company.com	Active
James Wilson	j.wilson@company.com	Inactive
Maria Garcia	m.garcia@company.com	Active
Lars Nielsen	l.nielsen@company.com	Active
Emily Davis	emily.d@company.com	Active
Michael Brown	m.brown@company.com	Inactive
Sophia Martinez	s.martinez@company.com	Active
Daniel Lee	d.lee@company.com	Inactive
Olivia Taylor	o.taylor@company.com	Active
Benjamin Clark	b.clark@company.com	Inactive
Amelia Lewis	a.lewis@company.com	Active
Lucas Walker	l.walker@company.com	Inactive
Harper Hall	h.hall@company.com	Active

Installation


pnpm dlx radianui@latest add table

Usage

Imports

import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableFooter,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table"

Code

<Table>
	<TableCaption>User Table</TableCaption>
	<TableHeader>
		<TableRow>
			<TableHead>Name</TableHead>
		</TableRow>
	</TableHeader>
	<TableBody>
		<TableRow>
			<TableCell>Radian</TableCell>
		</TableRow>
	</TableBody>
</Table>

We are using TanStack Table as the core logic layer and pair it with our Table component for the UI. This approach preserves flexibility while maintaining a consistent look and feel. The examples below showcase different ways to build data tables using TanStack Table. Some examples also integrate dnd-kit to enable draggable and re-orderable rows or columns.

Note

TanStack Table is a required dependency for all implementations. dnd-kit is only needed for examples that include drag-and-drop functionality.

Basic Data Table

Email	Status	Amount
lena.miller@example.com	success	$450.00
ethan.jones@example.com	processing	$299.00
sophia.wilson@example.com	failed	$128.00
noah.brown@example.com	success	$620.00
amelia.anderson@example.com	success	$785.00
oliver.thomas@example.com	failed	$205.00

0 of 6 row(s) selected.

Examples

Expand Table

Name	Email	Status	Balance
Carla Martinez	carla.martinez@example.com	Pending	$320.00
Frank Wilson	frank.wilson@example.com	Inactive	$50.00
Grace Kim	grace.kim@example.com	Pending	$200.00
Henry Adams	henry.adams@example.com	Active	$980.00
Ivy Chen	ivy.chen@example.com	Active	$640.00
Jack Thompson	jack.thompson@example.com	Inactive	$0.00

Resizable Table

Email	Location	Balance	Department	Role	Join Date
bob.smith@example.com	London, UK	$3,100.00	Marketing	Content Strategist	2021-07-10
carol.lee@example.com	Sydney, Australia	$5,600.00	Finance	Accountant	2020-11-02
daniel.khan@example.com	Toronto, Canada	$2,750.00	Human Resources	HR Manager	2023-01-05
emily.wilson@example.com	Berlin, Germany	$4,900.00	Engineering	Backend Developer	2019-09-22
frank.miller@example.com	Tokyo, Japan	$3,300.00	Support	Customer Success	2021-04-12
grace.taylor@example.com	San Francisco, USA	$6,100.00	Design	UX Designer	2022-08-19

Draggable Table

Name	Email	Location	Status	Balance
Alice Johnson	alice.johnson@example.com	New York, USA	Active	$4,200.00
Bob Smith	bob.smith@example.com	London, UK	Inactive	$3,100.00
Carol Lee	carol.lee@example.com	Sydney, Australia	Pending	$5,600.00
Daniel Khan	daniel.khan@example.com	Toronto, Canada	Active	$2,750.00
Emily Wilson	emily.wilson@example.com	Berlin, Germany	Inactive	$4,900.00
Frank Miller	frank.miller@example.com	Tokyo, Japan	Pending	$3,300.00
Grace Taylor	grace.taylor@example.com	San Francisco, USA	Active	$6,100.00

Employee Dashboard Table

User Details	Team	Total Spend	Status	Last Active	Progress
LY Lucas Young lucas.young@example.com	JDJSMBED8	$98,400	Active	6 months ago	91%
MW Milli Walker milli.walker@example.com	JDJSMB2	$69,800	Inactive	6 months ago	36%
EH Ethan Harris ethan.harris@example.com	JDJS4	$87,900	Active	6 months ago	77%
CS Chloe Scott chloe.scott@example.com	JD6	$112,000	Pending	6 months ago	58%
BK Benjamin King benjamin.king@example.com	JDJSMBEDCJ2	$95,200	Inactive	6 months ago	46%

1-5 of 14