CADENCE

Find Your Stride

Advanced Data Table

Full-featured data table with sorting, filtering, pagination, and more

Users Table

Manage your users with advanced table features


	John Doe	john@example.com	admin	active	Acme Inc.	New York, USA	1/15/2024
	Jane Smith	jane@example.com	user	active	TechCorp	San Francisco, USA	2/20/2024
	Bob Johnson	bob@example.com	user	inactive	StartupXYZ	London, UK	3/10/2024
	Alice Williams	alice@example.com	guest	pending	FreelanceHub	Berlin, Germany	4/5/2024
	Charlie Brown	charlie@example.com	admin	active	Acme Inc.	Tokyo, Japan	1/22/2024
	Diana Prince	diana@example.com	user	active	TechCorp	Paris, France	2/14/2024
	Ethan Hunt	ethan@example.com	user	active	MissionCorp	Dubai, UAE	3/18/2024
	Fiona Green	fiona@example.com	guest	pending	GreenTech	Sydney, Australia	4/12/2024
	George Miller	george@example.com	user	inactive	MillerCo	Toronto, Canada	2/28/2024
	Hannah Davis	hannah@example.com	admin	active	DataSystems	Singapore	1/30/2024

Showing 1 to 10 of 12 results

Rows per page:

Page 1 of 2

Features

Core Features

Global search across all columns
Column-specific filtering
Multi-column sorting (click headers)
Pagination with customizable page size
Row selection (single & bulk)
Column visibility toggle

Advanced Features

Export to CSV/JSON
Bulk actions on selected rows
Row click handlers
Loading states
Empty state with message
Responsive design

Try It Out

Search for users by name, email, or company
Click column headers to sort
Select rows and use bulk actions
Toggle column visibility
Export data to CSV or JSON
Click on a row to see toast notification

Usage

Built with TanStack Table v8
Fully typed with TypeScript
Customizable column definitions
Flexible data filtering
Easy to integrate with APIs
shadcn/ui components