Components

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
pdO64yb4Cy$764.00
success
gilbert24@hotmail.com
YFKB8NemeF$175.00
failed
ali_rogahn36@hotmail.com
MJOunjfVI6$958.00
success
kali.bergstrom11@yahoo.com
jBRagK6u2k$30.00
success
pearline10@yahoo.com
gEAZacntng$794.00
failed
elton.schmidt90@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Mark Schneiderernest_predovic7@gmail.comKuvalisborough
Inactive
$922.68
Arno Bartonalan_effertz@hotmail.comLeslieboro
Inactive
$322.25
Jon Wittingramona.reichel@hotmail.comDevinberg
Inactive
$87.37
Carl Gorczanyadele32@yahoo.comFort Mamie
Active
$644.81
Genoveva Raynorsue.swaniawski67@gmail.comSouth Emmieworth
Inactive
$536.54
Total$2,513.65

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
2778Gorgeous Metal ChairMusic
$371.42
57
5793Licensed Granite TunaAutomotive
$353.64
47
4469Fresh Aluminum ShoesClothing
$465.91
21
8346Handmade Metal ShirtGarden
$268.66
58
6822Gorgeous Bronze BaconKids
$57.51
55
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
#RXPKGLaura Jenkinstodd70@gmail.comAdminEngineeringInactive
#EQBBFHazel Kirlinstacey.ankunding13@hotmail.comMemberSalesActive
#FXDFWKaren Leschedith_heathcote@yahoo.comViewerMarketingActive
#CTNG5Candace Nienoweverett16@gmail.comAdminSupportActive
#ZEY5XPenny McClure Jr.abel82@gmail.comMemberEngineeringActive
#TE-_ETracey Reichelnora_hayes45@yahoo.comViewerSalesInactive
#JBKDELeah Ledner-Larsonaustin6@gmail.comAdminMarketingActive
#Z0KWQRoderick Raynoralejandra_weimann@hotmail.comMemberSupportActive
#JKJWDHershel Wymangordon_emard14@gmail.comViewerEngineeringActive
#Y2KDCDr. Tianna Baileylaurence45@gmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Colby Wintheisermilton31@gmail.comViewerActive
Abel Bergnaum IIIberneice50@hotmail.comViewerInactive
Blanche Hagenesjoann.barrows@hotmail.comMemberInactive
Emilio Lindgordon_abshire@yahoo.comMemberActive
Cedric Ratke-Cristvernon_konopelski45@yahoo.comAdminActive
Kiera Reichelapril40@gmail.comViewerActive
Tom O'Keefepaige.zemlak38@yahoo.comAdminActive
Cleo Roobdennis_treutel1@hotmail.comAdminActive
Antonietta Hudsonsunny.lemke34@gmail.comViewerActive
Johanna Reillydarrel.lindgren99@gmail.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
Oma Cummeratadarnell.gleichner@hotmail.comSupportActive
Kara Cronafriedrich_gulgowski@yahoo.comSupportActive
Quinn Lowekelly_schuppe@gmail.comEngineeringInactive
Dr. Magali Harberpatti_kiehn@hotmail.comSupportActive
Doris Stiedemanntonya.kunde65@hotmail.comSupportInactive
Angelo Batzconrad43@yahoo.comSupportActive
Clark Toydomenico76@gmail.comMarketingInactive
Devin O'Keefejoanne.feil@gmail.comEngineeringActive
Dr. Shaun Sengeralberta75@gmail.comSupportActive
Bernita Haagadelle_harber16@yahoo.comEngineeringInactive
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
--NJQDEstefaniaSipesestefania_sipes@hotmail.com(692) 974-811535890 Elm Street Apt. 116EngineeringInactive
ETLSWEEllisProsaccoellis.prosacco99@yahoo.com(736) 721-18899912 Rosetta Mills Suite 845SupportActive
7SBWQDZoraLittlezora.little@gmail.com(372) 892-1595621 Creola Valley Apt. 528SalesInactive
MBZDDMBarbaraFeilbarbara.feil@gmail.com(853) 514-1232950 Center Street Suite 516EngineeringActive
JESXWRFannieAltenwerthfannie.altenwerth70@yahoo.com(922) 461-89468468 Collier Neck Suite 970MarketingInactive
EI0I0IShanaKunzeshana.kunze@hotmail.com(794) 963-2837192 Einar Forges Suite 720SupportInactive
BKOYASMerleKerlukemerle.kerluke6@hotmail.com(432) 275-14883071 Krajcik Viaduct Suite 516EngineeringInactive
GL7MIGAlonzoDachalonzo_dach77@hotmail.com(614) 388-7673915 Moore Knolls Suite 940EngineeringActive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Kelvin Walkerblanche.grimes60@gmail.comMemberSupportActive
George Simonisursula.mcdermott5@hotmail.comViewerMarketingInactive
Will Farrelljohn.orn@hotmail.comMemberMarketingInactive
Gabriella Rathjevon_marks72@hotmail.comMemberSupportActive
Monserrate Greenharriet45@yahoo.comMemberSalesActive
Mattie Goldner-Legroskathryn_hettinger75@gmail.comAdminSalesInactive
Lorraine Huelsmargie.miller@gmail.comViewerSalesInactive
Perry Lesch Jr.donald.daugherty-metz54@yahoo.comMemberSupportInactive
Rosemarie Emmerichmae9@hotmail.comAdminEngineeringActive
Cody Starkamanda_boehm28@gmail.comMemberEngineeringInactive
Rows per page:
Page 1 of 2