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
2i7gry1HEs$793.00
pending
dena_johnston@yahoo.com
a7m9hNuEeC$348.00
success
jaylen_becker19@gmail.com
b89ruJhQG6$881.00
pending
alex59@gmail.com
907a4d9Qog$418.00
success
abner.konopelski74@gmail.com
FGV1GBhTWz$452.00
pending
janie75@gmail.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Dr. Billy Labadieluella_kautzer@gmail.comLowellton
Inactive
$900.08
Leon Rueckerprincess6@hotmail.comAlameda
Active
$538.01
Kelvin Gorczanydanielle.veum14@yahoo.comJoechester
Inactive
$265.41
Nicolas Hessel-DuBuquekendrick_reinger35@yahoo.comEnterprise
Inactive
$857.73
Mr. John Hanetristian.kozey@hotmail.comBinsberg
Active
$73.23
Total$2,634.46

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
7453Handmade Ceramic BaconAutomotive
$110.68
5
4259Bespoke Bamboo TowelsToys
$476.62
98
5183Sleek Cotton BallMusic
$136.89
73
5167Small Marble HatMusic
$425.08
61
9931Small Rubber TowelsMusic
$169.02
31
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
#WYDUJSarah Swift-Jonesmaria.nikolaus90@yahoo.comAdminEngineeringInactive
#X4G0UMrs. Meghan Batzhannah98@hotmail.comMemberSalesActive
#LVBN6Yolanda Cummingstheresia_stokes1@gmail.comViewerMarketingActive
#OLCCLDoug Watersarlene47@gmail.comAdminSupportActive
#78H5JBessie Sawaynname_gleichner@hotmail.comMemberEngineeringActive
#VVVZMNoah Effertzharrison.kulas@hotmail.comViewerSalesInactive
#C1ZWNArnold Reingerrachel.okuneva@gmail.comAdminMarketingActive
#RTYRODr. Kenneth Oberbrunnerenos_batz40@gmail.comMemberSupportActive
#WWLPCWilbert Millsbradly.hickle77@yahoo.comViewerEngineeringActive
#GGYHMLeona Bartell PhDmaximillian.grady13@hotmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Jerry Rodriguezvictoria62@gmail.comMemberActive
Laverne Ebertmargie.heidenreich71@hotmail.comMemberActive
Dr. Elizabeth Krisjackeline11@hotmail.comMemberActive
Earl Wuckert PhDdaren_wuckert@gmail.comAdminActive
Andy Pauceksophie54@gmail.comMemberActive
Flora Considineriver_deckow@gmail.comMemberActive
Everett O'Connernorene_gutmann@gmail.comMemberInactive
Maureen Fisherjacinto_koepp51@gmail.comAdminInactive
Brooke Hegmannmuhammad39@gmail.comViewerActive
Delbert Legrososwaldo_walter@hotmail.comAdminInactive
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
Mamie Beahanvelda_will-altenwerth@gmail.comSupportInactive
Dr. Christina Gutmannadrianna.goodwin15@hotmail.comMarketingInactive
Patti Kreigermax.ernser33@gmail.comEngineeringInactive
Christie O'Kon Vlora.rath@yahoo.comMarketingInactive
Jackie Kuvalislonny83@hotmail.comMarketingActive
Carolyn O'Connellhester_raynor6@yahoo.comSalesInactive
Aaron Braundevin_carter@gmail.comEngineeringActive
Courtney Heathcotepearline.cassin28@hotmail.comSupportActive
Sara Hermannbennett_lemke@hotmail.comMarketingActive
Rolando Franeckilea_gutmann@gmail.comSalesActive
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
NWIFQEDorianO'Connelldorian_oconnell68@gmail.com(347) 802-08913655 Kunze Ville Apt. 349SalesInactive
FHOVE5DorianO'Connelldorian.oconnell@gmail.com(506) 925-9294338 Hauck Centers Suite 785EngineeringActive
R-SWLFDorianO'Connelldorian_oconnell64@hotmail.com(641) 395-12893903 Kuvalis Roads Apt. 222MarketingActive
VQHYIKDorianO'Connelldorian_oconnell50@gmail.com(597) 716-42969693 Carroll Villages Apt. 703EngineeringActive
CONIKADorianO'Connelldorian.oconnell@yahoo.com(464) 813-126316978 Ash Road Suite 824MarketingInactive
9CLJHJDorianO'Connelldorian.oconnell@hotmail.com(731) 220-75132948 William Curve Apt. 844SalesInactive
CYDXFADorianO'Connelldorian_oconnell@hotmail.com(374) 760-0894190 Toy Fork Suite 775MarketingInactive
XTJS6GDorianO'Connelldorian.oconnell91@gmail.com(955) 660-0799247 Lowe Shores Suite 562EngineeringInactive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Frankie Padbergfrancisca.gleichner@gmail.comMemberSalesActive
Nichole Mohrrachael48@hotmail.comViewerEngineeringInactive
Lena Strosinorlando79@hotmail.comMemberEngineeringActive
Beatrice Thompsonhayden.damore@gmail.comAdminEngineeringActive
Mary Tremblay-Dietrichwerner_smith@hotmail.comViewerEngineeringInactive
Angelica Braunjordane.lynch33@yahoo.comViewerSalesActive
Ms. Rosalie Wisoky IVchaya.grimes@yahoo.comMemberMarketingInactive
Vera Russelbrianne_lind47@yahoo.comViewerSalesInactive
Judy Abbottelody_hoeger@gmail.comAdminEngineeringActive
Bradford Schambergermadaline.koelpin@gmail.comAdminMarketingActive
Rows per page:
Page 1 of 2