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
58Q6dg7QPU$518.00
processing
bennie_medhurst72@gmail.com
PLC75oKoKi$528.00
success
terrell_bayer32@hotmail.com
WF6ckx3fxZ$510.00
success
emmet45@yahoo.com
vONpDj91vm$36.00
processing
tomas.gislason27@hotmail.com
KhD9hgKGcM$970.00
pending
keith80@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Salvador Wisozkbenny_corkery@yahoo.comSt. Louis Park
Active
$47.99
Felix Langleslie16@gmail.comColefield
Active
$1,110.62
Rebecca Conroykerry45@yahoo.comQuincy
Active
$430.41
Wava Ratkerandolph.hettinger62@hotmail.comWichita Falls
Inactive
$716.64
Bryan Strackeal.reichel8@gmail.comMissoula
Inactive
$292.27
Total$2,597.93

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
2207Oriental Concrete CheeseShoes
$385.66
3
1414Generic Metal MouseClothing
$251.38
75
1408Unbranded Rubber GlovesJewelry
$27.00
18
4997Rustic Plastic CheeseGrocery
$30.62
3
9866Oriental Aluminum ShirtJewelry
$51.66
13
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
#6OQUTTyshawn Bergstrommarlene_swift79@hotmail.comAdminEngineeringInactive
#OQLEKGlennie Brekkewillard.walker@hotmail.comMemberSalesActive
#00BYFHelmer Emmerich MDkristopher94@yahoo.comViewerMarketingActive
#J9ABJMs. Latoya Boyledallas.harvey@gmail.comAdminSupportActive
#VLB71Patricia Harveymyrtice3@hotmail.comMemberEngineeringActive
#QEDI-Nadine Harberherman.reichel@yahoo.comViewerSalesInactive
#8WZC3Dixie Blandajamar.gislason-feest@gmail.comAdminMarketingActive
#M__MUFausto Murazikaustin_dietrich@yahoo.comMemberSupportActive
#KLEAQEva Kertzmannpat.toy7@gmail.comViewerEngineeringActive
#THVKAMr. Saul Hickletonya51@yahoo.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Marcia Boscojenna_wolff@yahoo.comViewerInactive
Ruth Steuberpauline_hand52@yahoo.comAdminActive
Dr. Tyree Ondrickarebeka18@yahoo.comViewerInactive
Jeremiah Barrowsdelia_schuppe15@gmail.comViewerActive
Alphonso Mertznathaniel_okon31@yahoo.comMemberActive
Ashlynn Kirlincrystal.mayer@yahoo.comMemberActive
Richard Farrell IIlois.hegmann@yahoo.comViewerActive
Paige Gleasonmarion18@yahoo.comMemberInactive
Roy Cartermichael.damore84@gmail.comViewerInactive
Rita Kleinretta.schamberger11@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
Darnell Jakubowskiseth.murazik@gmail.comSupportActive
Casey Heaneyderek44@yahoo.comMarketingActive
Dr. Sheldon Lang DDSevert.altenwerth@yahoo.comMarketingInactive
Dillan Toyneal63@gmail.comSalesInactive
Francesca Thompsoncarrie_powlowski@gmail.comEngineeringActive
Haven Wunschmaria_padberg@hotmail.comMarketingInactive
Eldora Effertzdarrick_murphy-lubowitz@gmail.comSalesActive
Walter Raujacqueline_goldner@gmail.comEngineeringActive
Lisandro Schinneralfred.kub@hotmail.comMarketingInactive
Mrs. Geneva Howellmichele.ritchie38@gmail.comMarketingInactive
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
GV_RUOFredrickKemmerfredrick.kemmer13@hotmail.com(893) 847-6932744 Doyle Dam Apt. 991EngineeringActive
LEX793DeloresBeerdelores.beer@gmail.com(554) 339-61151304 Lafayette Street Suite 623SupportInactive
ILC3ZULeonOsinskileon.osinski@hotmail.com(971) 320-728338495 Rau Burg Apt. 381SupportActive
LDG1MVChristWindler-Smithchrist_windler-smith@yahoo.com(674) 591-8346228 Dare Center Suite 458EngineeringActive
EBRGVYRodolfoRobertsrodolfo.roberts51@gmail.com(459) 252-4369675 Metz Street Suite 687MarketingInactive
ROEKZBCeceliaShieldscecelia.shields@yahoo.com(954) 501-881623753 Robb Radial Suite 416MarketingInactive
WTPY4NFloFaheyflo.fahey36@hotmail.com(321) 739-50264587 College Street Apt. 845EngineeringActive
ZIZXKNErnestoLangoshernesto_langosh22@gmail.com(415) 551-72325780 Dolores Mall Suite 314MarketingInactive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Myron Schillertrenton63@yahoo.comAdminMarketingActive
Lynda Rueckerunique.heaney@yahoo.comMemberMarketingInactive
Adrienne Harberduane76@gmail.comMemberSalesInactive
Sheri Mayertrosemary.walsh3@hotmail.comViewerSupportActive
Yolanda Starkrafael7@hotmail.comAdminSupportInactive
Sarah Langworthalicia.kris22@hotmail.comViewerEngineeringInactive
Dr. Regan Hoppepansy22@yahoo.comMemberSupportInactive
Ms. Susie Brownpatsy_feil-nienow53@hotmail.comMemberSupportInactive
Dr. Marcos Beatty-Hageneskelli_hessel70@yahoo.comAdminSalesActive
Ari Kreigerbernice.kemmer26@hotmail.comAdminEngineeringInactive
Rows per page:
Page 1 of 2