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
Pajp8uTc59$21.00
pending
jade.johnson@hotmail.com
t6ZyulapNV$761.00
processing
dominique.oreilly@hotmail.com
EoIV5FRQpg$782.00
processing
gilda_hahn15@yahoo.com
S8ZD1ZisOk$726.00
pending
bianka28@hotmail.com
H07pIAKPqW$810.00
success
aylin.quitzon@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Isaac Gloverelse60@gmail.comLaverntown
Active
$23.51
Barbara Schambergervernon44@gmail.comSouth Rosalyn
Active
$573.47
Van Ebertdavion94@yahoo.comSelmerburgh
Active
$731.74
Dr. Ginger Westdakota_cummings@hotmail.comSauerton
Inactive
$902.86
Russell Hackettdexter.emard3@gmail.comDubuque
Active
$1,113.28
Total$3,344.86

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
9497Handcrafted Steel TunaComputers
$164.77
26
3821Tasty Cotton HatIndustrial
$286.04
86
8830Handcrafted Rubber BallBeauty
$311.76
63
4945Handcrafted Gold HatKids
$300.10
17
6402Handcrafted Steel TunaJewelry
$106.12
93
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
#7FCXIHazel Ziemeizaiah.champlin28@yahoo.comAdminEngineeringInactive
#QOIX3Ben Lednerrogelio_turcotte@gmail.comMemberSalesActive
#MWCKYCatherine Satterfield DVManibal_heaney@yahoo.comViewerMarketingActive
#M9_NTAntoinette Lueilwitzriley21@hotmail.comAdminSupportActive
#WHK7AMr. Marty Hyattcullen_quitzon10@hotmail.comMemberEngineeringActive
#R_NCNDave Hicklesamson_kuhic@hotmail.comViewerSalesInactive
#S_DP-Theresa Franeymercedes49@yahoo.comAdminMarketingActive
#CZNWNJulia Ledner IImohammad82@hotmail.comMemberSupportActive
#DYBHGLorena Windlerjaunita.frami@hotmail.comViewerEngineeringActive
#2IJTWGeorge Ondrickajaylon26@hotmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Gretchen Stammdayna_schmidt23@hotmail.comViewerInactive
Gary Brakusantonetta_barton@yahoo.comViewerInactive
Donna Hermanewald25@hotmail.comMemberInactive
Sam Murrayeaston76@hotmail.comViewerInactive
Max Reynoldscarmel17@yahoo.comAdminActive
Fredrick Conroysteve.jenkins@gmail.comViewerInactive
Ms. Erika Gibsonjazmyne.nikolaus@hotmail.comAdminInactive
Jean Waters-Schroedershea_schamberger@hotmail.comMemberActive
Toni Lindgreneleanora_morissette-huel3@yahoo.comMemberInactive
Leroy Lindgren DDScloyd.mayert50@hotmail.comAdminActive
Rows per page:
Page 1 of 2

Row Pinning

Pin rows to the top or bottom. The table emits update:rowPinning and row-pin so parents can sync state.

Use the pin menu to choose top, bottom, or unpin.
Pin
Name
Email
Department
Status
Brad Flatleyshaun.kilback-mitchell@gmail.comSupportActive
Pablo Feeneyally_schuppe71@gmail.comSupportActive
Sam Spinkafelicita.douglas96@hotmail.comSupportActive
Lonnie McGlynn DDSjon44@hotmail.comMarketingActive
Daniel Sipesadrienne.will13@hotmail.comSalesInactive
Mr. Ricardo Nicolas-Steuberselena98@gmail.comSalesActive
Barbara Jenkinspeyton.bernhard@yahoo.comSupportInactive
Jean Rippinquinton_wehner@hotmail.comSalesInactive
Opal Roobdejah.kozey49@hotmail.comEngineeringActive
Rudolph Klingdan.bruen86@gmail.comSalesInactive
Rows per page:
Page 1 of 2

Column Pinning

Opt-in header pin buttons let you pin columns left or right. Pinned columns are sticky to the table edges; override --ui-table-pinned-bg in CSS if you need a different background. Use enable-column-pinning and show-column-pin-buttons to render the controls, and listen to update:columnPinning / column-pin if you need to sync state.

Pin columns with the header menu: choose left, right, or unpin.
ID
First Name
Last Name
Email
Phone
Address
Department
Status
IXJJ_BMortimerHintzmortimer_hintz92@hotmail.com(337) 443-1378432 Brookside Suite 181MarketingActive
9YVGZIMortimerHintzmortimer_hintz@gmail.com(486) 847-47656878 Rohan Burg Suite 180EngineeringInactive
DTHSNYMortimerHintzmortimer_hintz10@gmail.com(551) 716-31372237 Feest Valleys Suite 586SupportInactive
J2SUE3MortimerHintzmortimer.hintz@yahoo.com(290) 227-289867991 Lori Passage Apt. 753SalesActive
-HYYWMMortimerHintzmortimer_hintz32@yahoo.com(586) 420-003861671 Clark Street Apt. 839SalesInactive
GSRJZWMortimerHintzmortimer.hintz@yahoo.com(502) 274-15099416 Schroeder River Apt. 649SupportInactive
SKSOKKMortimerHintzmortimer_hintz23@hotmail.com(920) 229-1616673 Leo Extension Suite 632MarketingActive
KXW01JMortimerHintzmortimer_hintz@hotmail.com(841) 914-6332822 Gibson Estates Apt. 559SalesActive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Angie Faysalvatore_dicki9@hotmail.comMemberEngineeringActive
Sarah Prosacco Sr.delbert57@yahoo.comAdminSupportActive
Iris Colelauretta.altenwerth39@hotmail.comAdminEngineeringActive
Wendell Schambergerhaskell12@hotmail.comAdminSupportActive
Jerry Haley Sr.esther84@yahoo.comAdminSalesActive
Brandon Hellerangelica_emmerich92@gmail.comViewerMarketingActive
Marguerite McClureruss_balistreri@hotmail.comViewerSalesActive
Mrs. Glenda Murphychase41@yahoo.comAdminMarketingActive
Steve Greenholtcelia48@gmail.comMemberSupportInactive
Miss Terry Goyettevena_ziemann47@gmail.comAdminSalesInactive
Rows per page:
Page 1 of 2