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
FNAaJIQDIJ$689.00
failed
billy.koss12@yahoo.com
vATlY4ZoEc$660.00
success
marcia11@hotmail.com
E2prLHX7J0$997.00
failed
zula.block@gmail.com
uNXQjNyCdM$110.00
failed
mohammed39@gmail.com
YgqdmZAGFy$335.00
pending
allen_becker@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Adell Jakubowski Jr.freeman30@yahoo.comGeraldinestead
Active
$136.48
Stevie Wildermanneal8@hotmail.comRockwall
Active
$600.59
Kristie Wiegandashley71@hotmail.comRubyberg
Inactive
$655.11
Dwayne Ondrickarozella83@yahoo.comAdanport
Inactive
$127.48
Dane Kundederon_deckow-collins@hotmail.comSouth Cindy
Active
$344.30
Total$1,863.96

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
6555Handcrafted Gold TunaMusic
$78.68
64
8613Handmade Rubber TunaKids
$331.75
38
9354Rustic Metal SausagesBooks
$29.92
38
6669Ergonomic Metal MouseGames
$430.69
76
5562Awesome Rubber PizzaAutomotive
$258.27
2
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
#HDQFNJill Jastmiguel.borer@hotmail.comAdminEngineeringInactive
#P9YDFMyrtle Heller DVMamani_swift45@yahoo.comMemberSalesActive
#L7_GATom Kerlukeevan.schoen@yahoo.comViewerMarketingActive
#DEB-YUrsula Wintheiser MDjessica73@hotmail.comAdminSupportActive
#RWRIAMs. Jeannette Torphyjerald_franecki86@yahoo.comMemberEngineeringActive
#W-MLDBradley Schiller Sr.madelyn_armstrong78@hotmail.comViewerSalesInactive
#EWFVSJaclyn Robertsamari28@hotmail.comAdminMarketingActive
#TJYJMAlejandro Botsforddarrel_stracke27@gmail.comMemberSupportActive
#UWRTLGwen Watsicatom.rau@gmail.comViewerEngineeringActive
#IZIO4Elisha Harberaugust85@yahoo.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Aiyana Lynchkristina.senger@yahoo.comMemberActive
Amy Ferryhettie_greenfelder@yahoo.comViewerActive
Bryce Wardconstance93@hotmail.comMemberInactive
Jedediah Braungiovani_kessler88@yahoo.comMemberActive
Boyd Koelpinclay0@hotmail.comAdminInactive
Armani Lakin Jr.steven.oreilly@yahoo.comMemberActive
Victor Robeljoey.stamm31@hotmail.comAdminActive
Anissa Schadenraul.sporer@yahoo.comViewerInactive
Camden Morissettekali26@yahoo.comMemberInactive
Rosemary Gislasonshawna96@yahoo.comMemberActive
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
Mr. Dallas Kuhlmannolan.breitenberg@hotmail.comEngineeringInactive
Brenda Mann Jr.don_damore@hotmail.comSalesActive
Mr. Benjamin Beahankeith_schamberger@gmail.comSalesActive
Stevie Schoenmandy_leannon@yahoo.comEngineeringActive
Ms. Mekhi Kozeycorine_dooley85@yahoo.comSalesActive
Furman Powlowskiseth_runolfsdottir47@yahoo.comMarketingActive
Yolanda Collierenrique_little78@yahoo.comSalesInactive
Kasandra Corwindonny87@yahoo.comSalesActive
Obie Erdmanludie_casper74@yahoo.comSupportActive
Dora Jacobihaylie_oreilly@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
RB0EI2EbonyNaderebony.nader@yahoo.com(267) 525-61692299 Railroad Avenue Apt. 409EngineeringActive
K1QLESAmirCasperamir.casper16@hotmail.com(603) 319-28903803 McClure Bridge Apt. 519MarketingActive
WP1QRHJimmyBechtelar-Gerlachjimmy.bechtelar-gerlach@yahoo.com(263) 502-63976005 Dare Wells Apt. 138SalesInactive
X_ETVWMeaghanWunsch-Kozeymeaghan_wunsch-kozey@gmail.com(747) 427-03458280 Balistreri Springs Suite 600MarketingInactive
CWKVTDSteveRobertssteve_roberts88@yahoo.com(704) 563-871781064 Alia Lights Suite 589SalesActive
-AWJZHLoyalLoweloyal_lowe@gmail.com(233) 650-17327663 Bud View Apt. 569SupportInactive
N7LF48DawnKundedawn.kunde@yahoo.com(334) 921-689127515 Karlie Coves Suite 919SupportInactive
5NJKENDarylLeschdaryl.lesch43@gmail.com(985) 994-219267541 The Ridgeway Suite 819EngineeringActive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Ray Lind Iadrianna_murazik51@yahoo.comMemberMarketingInactive
Amira Effertzheber.shanahan@hotmail.comMemberMarketingActive
Bart Shieldspatience_howell9@gmail.comViewerSupportInactive
Enola Altenwerthstewart64@yahoo.comMemberEngineeringActive
Verna Smithamvickie1@hotmail.comMemberSupportInactive
Wendell Dietrichdesiree.stokes8@gmail.comAdminSalesActive
Wilfred Bartellpablo44@gmail.comMemberSupportInactive
Lydia Hirtheirma_schinner@yahoo.comViewerMarketingInactive
Jay Trantowgenevieve5@yahoo.comMemberSalesActive
Ansley Schmelerjesus_bernier@gmail.comAdminSupportActive
Rows per page:
Page 1 of 2