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
Oxg0ZI9j1f$985.00
pending
eileen_goldner@hotmail.com
FaLjfZ8HVX$44.00
pending
carmen_bode1@hotmail.com
HGRjZ8NFMw$154.00
failed
flossie1@hotmail.com
inhcXSVO4n$660.00
failed
abdiel31@yahoo.com
3b7hKWrAw3$646.00
pending
maximillian64@gmail.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Edward Greenfelderginger_ritchie@hotmail.comEast Kurt
Inactive
$413.11
Mrs. Emelia McGlynnwayne42@yahoo.comEast Amanda
Active
$236.08
Chloe Russelterrell.kozey7@yahoo.comNorwoodchester
Active
$933.77
Loretta Williamsonervin99@yahoo.comLucyville
Inactive
$1,192.87
Owen Lueilwitzorlando_konopelski@yahoo.comEast Wallace
Active
$1,147.96
Total$3,923.79

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
1727Refined Granite CheeseMovies
$340.82
99
4384Fantastic Rubber TunaShoes
$385.82
100
5892Unbranded Bamboo SoapAutomotive
$130.04
63
7263Electronic Gold HatGarden
$69.71
96
7875Soft Aluminum SoapMovies
$154.81
44
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
#EQFTZCharlene Sporersilvia87@gmail.comAdminEngineeringInactive
#4BFOGReed Barrows Ijoy.terry@hotmail.comMemberSalesActive
#MPAQ4Mr. Lenora Greenholtwallace.friesen@hotmail.comViewerMarketingActive
#_XYESMr. Hildegard Runolfssonrahsaan_lemke@gmail.comAdminSupportActive
#7EQJKSteven O'Connellnellie_mayert71@yahoo.comMemberEngineeringActive
#UXTQUDr. Retha Schuster PhDjayda8@yahoo.comViewerSalesInactive
#RGOFTEddie Rutherford Jr.jannie.haley69@yahoo.comAdminMarketingActive
#JXG3ADavin Cronaemiliano.erdman@gmail.comMemberSupportActive
#Z9UNFToni Ullrichelaina.wuckert19@yahoo.comViewerEngineeringActive
#NHLTGIsaac Runteconcepcion_russel55@hotmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Caleb Rice Vnikko36@yahoo.comMemberInactive
Erick Friesenbryant_waelchi@yahoo.comAdminInactive
Shanna Bednarsylvia.hackett@hotmail.comViewerActive
Daniel Johnstonkerry_schroeder86@gmail.comViewerInactive
Joannie Larsonbrandt.mcglynn@yahoo.comMemberInactive
Warren Jerdeerin_hirthe83@hotmail.comAdminActive
Schuyler Pouroscurt_weimann44@yahoo.comAdminInactive
Erica Legrosdavon.predovic6@gmail.comViewerActive
Carla Jenkinstommy91@gmail.comViewerActive
Garry Priceivy12@hotmail.comMemberInactive
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
Burdette Howell Vandre93@gmail.comSupportActive
Ransom Quitzonjay_fadel16@hotmail.comSupportActive
Edmund Russelned87@hotmail.comEngineeringInactive
Shane Rutherfordrandy.botsford27@yahoo.comSalesActive
Malinda Harvey-McClurealexanne77@hotmail.comMarketingInactive
Ali Marquardtsabrina19@hotmail.comSupportActive
Gerald Blocktremayne_hansen75@yahoo.comMarketingInactive
Mr. Vergie Lindnora_ondricka@hotmail.comEngineeringActive
Bertrand Boyerfelipe53@hotmail.comEngineeringActive
Eduardo Stehrlysanne.stiedemann60@hotmail.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
7HF34OAlanisCassinalanis.cassin48@yahoo.com(956) 857-1144831 Castle Lane Suite 543EngineeringActive
SCEKA-MalcolmDeckowmalcolm.deckow37@hotmail.com(958) 942-56115765 Barton Road Apt. 792MarketingActive
F24B-HMittieKunzemittie.kunze49@gmail.com(503) 241-2118536 Columbia Avenue Apt. 318SalesInactive
NMLAFVJimmyMrazjimmy_mraz@yahoo.com(599) 853-73115675 Christian Haven Apt. 388MarketingActive
KPBHEIJoParisianjo.parisian@yahoo.com(413) 969-73819203 Nienow Corners Suite 547MarketingInactive
FM_XBYAubreeFarrellaubree_farrell66@gmail.com(422) 530-39719019 Lindsay Motorway Apt. 935MarketingActive
2UNLYALyricReillylyric_reilly@gmail.com(529) 294-415786497 Grange Avenue Apt. 517SupportActive
RIPJMXBerneiceJohnsberneice_johns@gmail.com(321) 410-67786999 Buckridge Meadows Apt. 311SalesInactive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Allene Weimann IVnash11@gmail.comViewerSupportActive
Meredith Bergstromsebastian_farrell@yahoo.comViewerSalesActive
Vernon Wehneralexys.gislason81@hotmail.comAdminMarketingActive
Shirley Wolffcesar_collins49@gmail.comMemberSalesActive
Dr. Faith Volkman-Kunde IVmatthew_volkman@gmail.comAdminEngineeringInactive
Modesta Cronaodell.veum-kassulke@gmail.comMemberSalesInactive
Antonetta Padbergaurore.heaney@yahoo.comViewerMarketingInactive
Delores Jacobs-Lindgrenalejandro.hackett@hotmail.comMemberMarketingActive
Mrs. Dewayne Baumbachkendra73@gmail.comViewerSupportActive
Mrs. Florence Handernest.stoltenberg@hotmail.comAdminSupportInactive
Rows per page:
Page 1 of 2