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
lAX4Rewvze$874.00
processing
gunnar.denesik@gmail.com
Art4KXeLId$520.00
failed
ralph_abshire@yahoo.com
1unA5AqtNR$622.00
pending
arlene59@gmail.com
WuVVTxorvg$792.00
success
electa2@hotmail.com
CGbFfL9CT5$231.00
processing
clemens.rogahn-bahringer14@hotmail.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Anthony Konopelskilewis.friesen53@hotmail.comSchmidtworth
Active
$210.86
Afton Torphyobie_kessler-huel29@hotmail.comAugustinestad
Inactive
$309.51
Kale Stammalfredo_denesik@yahoo.comPort Marion
Inactive
$1,126.82
Miranda Crooksdonna45@hotmail.comRahsaanworth
Inactive
$530.71
April Greenholtbecky_schoen73@yahoo.comEast Antoniohaven
Inactive
$21.43
Total$2,199.33

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
8798Modern Bamboo ShirtElectronics
$430.99
29
3321Oriental Granite ChipsGames
$393.51
58
2558Sleek Bamboo ChairGrocery
$59.72
44
3186Luxurious Silk CheeseShoes
$446.39
6
8412Intelligent Silk PizzaOutdoors
$26.84
84
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
#M7GMDArielle Gottliebdaryl.larkin-walter60@hotmail.comAdminEngineeringInactive
#C2SCHVirgil Mills DDSthalia.renner91@gmail.comMemberSalesActive
#Z7OSJRyley Haagstacy.marvin@yahoo.comViewerMarketingActive
#WXU5-Flossie Maggioisom_okon@yahoo.comAdminSupportActive
#A3ABXBobby Gutkowskiroger_lind60@hotmail.comMemberEngineeringActive
#48K09Kiel Keelingzola23@yahoo.comViewerSalesInactive
#4BKFZHenderson Kovacekchristopher85@hotmail.comAdminMarketingActive
#GDDJNRalph Caspertiffany67@hotmail.comMemberSupportActive
#NVIEXMatilda Kertzmannkathryn.funk22@yahoo.comViewerEngineeringActive
#UW0XEMelody Swiftheloise.wolff93@yahoo.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Mrs. Edwardo Hudsonjacquelyn.schiller@gmail.comAdminActive
Samantha McLaughlin PhDmitchell_rau@gmail.comMemberInactive
Edwin Stammemelie28@hotmail.comMemberInactive
Josephine Padbergpaulette_lubowitz@yahoo.comAdminActive
Raven Toybeaulah_dooley28@gmail.comAdminInactive
Aiyana Dickinson Ieverett.macgyver7@hotmail.comViewerInactive
Bridget Ritchie IVrahsaan70@yahoo.comMemberActive
Virgie Ziemann-Rodriguez IVfelicia_walker20@hotmail.comAdminActive
Nelson Mertzalbertha42@gmail.comViewerInactive
Brian Hoegerkathleen_raynor89@hotmail.comViewerActive
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. Kristoffer Kuhnclaud_denesik@gmail.comSalesInactive
Lexie Emmerich-Mayertchristelle_abbott2@gmail.comMarketingInactive
Jessica Jakubowskimarjorie.mcclure69@hotmail.comMarketingInactive
Destini Raudarryl.shanahan-abernathy@hotmail.comSupportInactive
Theodora Jakubowski IIIarnaldo3@hotmail.comSalesInactive
Britney Bergnaumdwight15@hotmail.comSalesInactive
Bill Denesikalejandro_witting86@gmail.comSupportInactive
Nickolas Lednerterri_williamson@hotmail.comSupportActive
Amanda Erdman Ievangeline6@yahoo.comSalesInactive
Ana Spencerlucius.bartoletti-huels24@yahoo.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
2D9CDODemarcoStantondemarco_stanton@gmail.com(551) 929-9425921 1st Avenue Apt. 809MarketingInactive
L7PEBZDeweyWalshdewey_walsh@hotmail.com(436) 658-67144061 Nicholaus Mills Apt. 436MarketingActive
_LWQVKJaydenBatzjayden.batz@yahoo.com(395) 471-70493762 Abshire Way Apt. 506SalesInactive
DMAUDSTaniaBorertania_borer@gmail.com(993) 891-8778296 Cartwright-Koss Estate Apt. 187SupportActive
I83GXVNickolasBreitenbergnickolas_breitenberg32@gmail.com(334) 392-082120168 N Railroad Street Suite 136SalesInactive
PQJ8BNAstridAdamsastrid.adams89@hotmail.com(931) 925-2264797 Orlando Radial Apt. 448EngineeringInactive
RPDUECHaleighCummingshaleigh.cummings@hotmail.com(649) 499-344955061 Jerry Keys Suite 529SupportActive
YZB6LTFayeDouglasfaye_douglas85@yahoo.com(338) 744-83374766 Juana Underpass Suite 671MarketingInactive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Tiffany Carrollkasandra_abshire46@yahoo.comAdminSupportInactive
Melvin Smitharmando.ryan30@gmail.comViewerSalesActive
Lana Gutmannlessie.swaniawski@hotmail.comMemberEngineeringInactive
Adeline Hammessue.harris@yahoo.comMemberSupportActive
Mr. Trevor Mantefaith_hoeger58@hotmail.comAdminEngineeringActive
Trey Hirthe-Russelchelsie_green@gmail.comViewerSupportActive
Ms. Eunice Kshlerinkari.hickle@hotmail.comViewerSupportInactive
Hobart Stiedemann-Dibbertgenevieve_hand@yahoo.comViewerEngineeringInactive
Alden Skilestrenton.leffler9@gmail.comViewerSalesInactive
Mr. Mark Gleasonlarry_reinger94@hotmail.comViewerSupportActive
Rows per page:
Page 1 of 2