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
UGl2bIFi8N$980.00
success
molly60@hotmail.com
KYaWoFUahT$511.00
success
mercedes.labadie@yahoo.com
Y65NsYULPH$440.00
failed
lourdes_waters@gmail.com
DC045QDHLW$892.00
processing
abe.doyle71@gmail.com
mB3z0J1D9M$203.00
processing
amos_rath@hotmail.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Margarett Warddallas_durgan78@yahoo.comLee's Summit
Active
$618.66
Kelly Fahey PhDkristy77@gmail.comMariamcester
Active
$130.94
Hugh Boyleleora.howell55@gmail.comNorth Bella
Inactive
$954.67
Jorge Runolfsdottirmelanie_ohara23@gmail.comJavierview
Inactive
$344.86
Rachael Darelynne38@gmail.comHeidenreichmouth
Active
$954.77
Total$3,003.90

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
8086Soft Marble GlovesTools
$235.00
23
6260Modern Cotton TunaElectronics
$132.85
67
8264Generic Marble ChickenBeauty
$228.41
79
1610Handcrafted Plastic CarTools
$283.49
44
4330Small Metal TableTools
$60.13
34
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
#MKUD0Jonathan Murphy Iblake.lakin33@gmail.comAdminEngineeringInactive
#WZWJUIan Lubowitzkassandra_konopelski63@yahoo.comMemberSalesActive
#AWWKNRandy Weimannkay45@hotmail.comViewerMarketingActive
#SQJTWJunius Kirlinkatrina70@gmail.comAdminSupportActive
#WXKGTRene Rathgenevieve_pouros82@hotmail.comMemberEngineeringActive
#NQGJRDashawn Ziemegerardo_schneider55@yahoo.comViewerSalesInactive
#BOJ35Dr. Amely Marquardtroosevelt_barton@yahoo.comAdminMarketingActive
#56WPUPamela Cristjany30@hotmail.comMemberSupportActive
#YPRJ9Ivan Lakinleanne.reichel48@yahoo.comViewerEngineeringActive
#TFOF9Miss Alta Murazikamiya_macgyver56@hotmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Reid Lang DDSdelbert44@yahoo.comViewerActive
Sheldon Sipesmarjorie52@gmail.comMemberInactive
Miss Dolores Bergstromgeoffrey.johnston61@yahoo.comViewerActive
Jaleel Connellyabigayle.oreilly@gmail.comViewerInactive
Mr. Olga Uptonabraham78@gmail.comViewerActive
Wendy Hilllsherman.bergstrom1@hotmail.comViewerActive
Samuel Labadienadine.kiehn20@gmail.comMemberActive
Candace Spinkaadrienne.king@yahoo.comMemberActive
Mae Predovicantonio_jones@gmail.comAdminActive
Faith Langworthjohn_ratke28@yahoo.comViewerInactive
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
Westley Grantjeff_buckridge@gmail.comMarketingInactive
Dr. Ronnie Watersbonita_williamson40@gmail.comSupportInactive
Jacqueline Veumnorma.halvorson@hotmail.comEngineeringInactive
Danielle Cronaeddie9@hotmail.comSalesInactive
Marley Rippincarlee.mckenzie19@gmail.comMarketingInactive
Kathryn Bechtelarenoch_konopelski@yahoo.comSalesActive
Ova O'Keefemandy61@yahoo.comSalesInactive
Braeden Kosslonnie_rohan@gmail.comEngineeringActive
Aaron Jones-Pfeffer Jr.walton.frami43@hotmail.comMarketingActive
Carlotta Ziemegeorgia.heaney@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
2XVCGEKennithKunzekennith_kunze@gmail.com(456) 386-75526490 Douglas Road Suite 153EngineeringActive
QAPLPCTristinKutchtristin.kutch@hotmail.com(363) 823-91078428 Halvorson Way Suite 404MarketingInactive
F-6JA6DarleneLebsackdarlene_lebsack@gmail.com(401) 987-9089656 Blind Lane Apt. 413MarketingInactive
WULG9XIsabelNolanisabel_nolan@yahoo.com(687) 669-12602338 Danika Highway Apt. 643EngineeringActive
CITLRMAbelRohan-Nolanabel.rohan-nolan90@gmail.com(998) 792-6663676 Skyline Drive Apt. 375EngineeringInactive
JZVW4TDariusSchmidtdarius_schmidt59@hotmail.com(519) 456-5352463 Hyatt Corners Apt. 189EngineeringInactive
YA2JAVMarcoThompsonmarco_thompson3@yahoo.com(320) 310-75924797 McCullough Rue Suite 379SalesActive
C5T_UPThaliaGoldnerthalia_goldner31@hotmail.com(810) 647-66295418 W Union Street Suite 840MarketingActive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Barney Medhurstroger.breitenberg10@yahoo.comAdminMarketingActive
Harriet Tremblaycurtis52@gmail.comViewerMarketingActive
Wilma Collinskailey_rowe@hotmail.comMemberSalesActive
Maurice Bergecyrus_murazik89@gmail.comMemberSupportInactive
Shari Hessel IIIbethel_wunsch@hotmail.comMemberEngineeringInactive
Mrs. Wilson Strosingordon_rosenbaum83@yahoo.comViewerEngineeringInactive
Samuel Schoendenis_ryan59@yahoo.comAdminSalesActive
Briana Hammes IVcarole.koepp@hotmail.comViewerSupportActive
Mr. Reginald Wehnerdoreen.emard5@hotmail.comViewerEngineeringInactive
Sandy Heathcoteloma43@gmail.comViewerMarketingActive
Rows per page:
Page 1 of 2