Tanstack Table

A powerful datatable for your app built with TanStack Table.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

Regular

ID
Amount
Status
Email
yRJNuPmp8Z$766.00
processing
orville_conn49@yahoo.com
VcV8lsdiN4$794.00
success
rae.kling@hotmail.com
nlRdICb4Zw$388.00
success
kristina.gleason@hotmail.com
6DFut9muxz$598.00
processing
madaline38@hotmail.com
Yzs2WhAwwm$948.00
pending
eleazar.kuphal7@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Patricia Murphymandy20@yahoo.comFort Alisonside
Inactive
$203.42
Minnie Kuhicdaphney93@yahoo.comSouth Bernita
Active
$1.28
Deanna Labadiemya_douglas98@gmail.comWest Lafayette
Active
$993.68
Krystal Lockmanadelbert39@yahoo.comSouth Chaim
Active
$993.74
Darryl Huelmoses.graham@gmail.comPort Jorgefort
Active
$343.61
Total$2,535.73

Basic data table made with TanStack Table

Filters

Keyword
Intents
Volume
CPC
Traffic
Link
react components
I
N
2.5K2.588https://www.originui.com
buy react templates
C
T
1.9K4.7565https://www.originui.com/templates
react ui library
I
C
3.2K3.25112https://www.originui.com/docs
tailwind components download
T
8901.9545https://www.originui.com/download
react dashboard template free
C
T
4.1K5.5156https://www.originui.com/templates/dashboard
how to use react components
I
1.2K1.2542https://www.originui.com/tutorials
react ui kit premium
C
T
7606.828https://www.originui.com/pricing
react component documentation
I
N
9501.835https://www.originui.com/docs/components

Data table with filters made with TanStack Table

Simple (Auto-Generated Columns)

Shows zero-config usage with automatic column generation from data keys.

Id
Date
Status
Email
Amount
46002024-03-11T15:30:00paidjames.anderson@example.com594
45992024-03-11T10:10:00failedmia.white@example.com276
45982024-03-11T08:50:00refundedwilliam.brown@example.com315
45972024-03-10T19:45:00paidemma.davis@example.com529
45962024-03-10T15:55:00paidethan.harris@example.com639
Rows per page:
Page 1 of 1

Custom Columns

Custom column definitions with formatted cells and styled badges.

#
Date
Status
Email
Amount
#4600Mar 11, 15:30Paidjames.anderson@example.com
$594.00
#4599Mar 11, 10:10Failedmia.white@example.com
$276.00
#4598Mar 11, 08:50Refundedwilliam.brown@example.com
$315.00
#4597Mar 10, 19:45Paidemma.davis@example.com
$529.00
#4596Mar 10, 15:55Paidethan.harris@example.com
$639.00
Rows per page:
Page 1 of 1

With Slots

Using slots to customize cell rendering with avatars and dropdowns.

User
Email
Role

Lindsay Walton

@lindsayw

lindsay.walton@example.comMember

Courtney Henry

@courtneyh

courtney.henry@example.comAdmin

Tom Cook

@tomc

tom.cook@example.comMember

Whitney Francis

@whitneyf

whitney.francis@example.comAdmin
Rows per page:
Page 1 of 1

Table footer with column totals using aggregation functions.

#
Description
Qty
Amount
1Web Design
3
$1,200.00
2Development
5
$2,400.00
3Consulting
2
$800.00
4Support
4
$600.00
Total
14
$5,000.00
Rows per page:
Page 1 of 1

Clean table without footer controls for simple layouts.

Name
Email
Status
John Doejohn@example.comActive
Jane Smithjane@example.comActive
Bob Johnsonbob@example.comInactive

Loading State

Table with loading indicator - includes custom loader slot support.

ID
Product
Category
Price
Stock
1786Frozen Rubber GlovesBooks
$357.69
70
9641Licensed Metal TowelsJewelry
$27.76
60
7370Incredible Bamboo PizzaIndustrial
$54.48
83
1411Modern Cotton MouseGarden
$467.29
60
8026Intelligent Silk TableIndustrial
$344.69
43
Rows per page:
Page 1 of 3

Server-Side Pagination

Manual pagination with server-side data fetching and search. Enable manual-pagination prop and listen to the @update:pagination event.

95 total users
ID
Name
Email
Role
Department
Status
#9XJ_AJanet Jaskolskihope45@yahoo.comAdminEngineeringInactive
#UJHMDAda Binsholly.anderson@yahoo.comMemberSalesActive
#YENBLAudrey Stiedemannolaf.lynch@gmail.comViewerMarketingActive
#KDJQCKenneth Bayerjosianne.johnston91@yahoo.comAdminSupportActive
#46HPWHope Beeralessandro91@hotmail.comMemberEngineeringActive
#XI1NSMarvin Haleyephraim.stiedemann57@hotmail.comViewerSalesInactive
#SWUSVWarren Jones Ijaclyn_hintz@gmail.comAdminMarketingActive
#SJPQJKarla Rosenbaumolin_bayer25@hotmail.comMemberSupportActive
#_9WWMBethany Schadennedra43@hotmail.comViewerEngineeringActive
#MMMKAMartin Baumbachwerner.hermann@yahoo.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Martin Kerlukeelinor.daniel18@yahoo.comAdminInactive
Cindy Emardmitchell.kshlerin@yahoo.comAdminActive
Julie Cassinlennie82@hotmail.comViewerActive
Jeannette Reichertanibal.blick@hotmail.comMemberInactive
Viola Andersonarturo.hermann-oreilly@hotmail.comMemberActive
Krystal Hauckcindy_friesen29@hotmail.comViewerActive
Karen Wizaalysson19@hotmail.comAdminActive
Caroline Hahnstanton.kuhlman@hotmail.comAdminInactive
Thelma O'Keefesonny_larson79@gmail.comAdminInactive
Dawn Bergnaum-Larkinhermina76@yahoo.comMemberInactive
Rows per page:
Page 1 of 2

Context Menu

Name
Email
Role
Department
Status
Tracy Bergejaylon_lynch@hotmail.comAdminSalesInactive
Cynthia Adamsjared.dach@yahoo.comAdminEngineeringActive
Dr. Cary Skileskallie.stanton@hotmail.comViewerSupportInactive
Bob Osinskibridie48@yahoo.comAdminMarketingActive
Cora Quitzon PhDstefanie31@yahoo.comMemberEngineeringActive
Terri Bernhardlincoln29@yahoo.comViewerEngineeringActive
Boyd Bartellicie.sipes94@gmail.comAdminSupportActive
Allison Spinkamicaela_morissette@hotmail.comViewerSalesInactive
Lois Haagrhea_kling@hotmail.comViewerMarketingActive
Joshua Rauisabelle55@yahoo.comViewerSupportActive
Rows per page:
Page 1 of 2