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
fCzxwXJJNk$738.00
success
rashad33@yahoo.com
XR0Bt5nXo7$26.00
processing
matthew.huel32@hotmail.com
wXaucEwKkp$97.00
success
dolores_steuber@gmail.com
Ty6KAqrWnW$116.00
processing
adela76@yahoo.com
tIxbYcY32a$582.00
processing
skye_bergstrom@gmail.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Eileen Osinskisilvia_schuster@hotmail.comPort Abigailmouth
Active
$5.38
Florine Schowalter IIaaliyah.kovacek23@yahoo.comAlanmouth
Inactive
$867.18
Bradly Batz-Wunschdanielle12@hotmail.comGrantboro
Active
$919.31
Brianne Nikolausethel22@hotmail.comHageneston
Active
$412.27
Stuart Prosaccolula_cremin@hotmail.comRutherfordville
Inactive
$382.02
Total$2,586.16

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
4019Fresh Bamboo ChipsGames
$88.72
89
9493Elegant Bamboo ChairComputers
$407.47
73
2928Modern Silk ChipsToys
$233.19
83
3582Elegant Steel BaconBaby
$331.41
55
2993Tasty Steel ShirtOutdoors
$217.07
54
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
#96UOVLauryn Ullrichalex_cronin@yahoo.comAdminEngineeringInactive
#CEAZ9Theresa Padberglaverne32@yahoo.comMemberSalesActive
#LZ1Y1Perry Morarshany.bashirian@gmail.comViewerMarketingActive
#TC4DHLeroy Lescharthur.cummerata@yahoo.comAdminSupportActive
#SCMY-Mable Wardfelton.cole@yahoo.comMemberEngineeringActive
#EF65MCarrie Hintzrufus55@gmail.comViewerSalesInactive
#TGSGFBryan Casper Vbreanna.aufderhar38@gmail.comAdminMarketingActive
#FOE10Elsie Schambergeraudreanne.kuphal76@hotmail.comMemberSupportActive
#GN1FVMr. Virgil Reynoldstorrance24@gmail.comViewerEngineeringActive
#YUUAWJenny Browngayle15@yahoo.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Mary Feilelsie_jakubowski-hickle37@yahoo.comAdminInactive
Bennie Corwinconstantin.okuneva@gmail.comAdminInactive
Teresa Crooksmiguel.bahringer@hotmail.comMemberInactive
Mr. Tristian Casperjessyca53@gmail.comViewerActive
Tracey Rippinemily_hermiston@yahoo.comMemberInactive
Ada Leschwinston_pacocha71@hotmail.comAdminInactive
Darryl Watsicarhonda_mcclure@gmail.comMemberActive
Theresa Paucekcassandre_kautzer64@hotmail.comMemberInactive
Wendy Lueilwitzjohnnie_feeney-gislason34@hotmail.comAdminInactive
Wallace Dachwillow_schuppe30@hotmail.comMemberActive
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
Donavon Friesentorrance_abshire7@hotmail.comEngineeringInactive
Joanne Cormierjulio_jones96@hotmail.comEngineeringActive
Kristopher Hyatt Sr.ismael_heathcote-goodwin@hotmail.comSupportInactive
Ms. Destany Erdmansimon_wiza@hotmail.comSalesActive
Al Grahammaiya_spencer@yahoo.comSalesInactive
Adam Torphyedward.ziemann24@hotmail.comSalesActive
Lily Abernathy PhDsandra_cummings91@yahoo.comMarketingInactive
Frances Mayerhector12@yahoo.comSupportInactive
Leonora Lemkexzavier_swift20@yahoo.comSupportInactive
Preston Lefflerdeclan_wuckert95@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
MVAZIFGoldenThielgolden.thiel68@gmail.com(736) 615-03303560 Sandy Lane Apt. 795MarketingActive
SQFIXSSidneyHagenessidney.hagenes@hotmail.com(984) 970-1319560 Claudie Estates Apt. 553SupportInactive
SGFSZSLucieSatterfieldlucie_satterfield@gmail.com(332) 606-53267664 Hills Fords Suite 627SupportInactive
FFRLXPHazelMaggiohazel_maggio@hotmail.com(474) 346-1926108 Leigh Radial Suite 894SupportActive
_I6FFSMarshallLangmarshall.lang68@yahoo.com(630) 235-3872747 Tatyana Meadows Apt. 943SalesActive
XEY7KWRossieHartmannrossie_hartmann74@gmail.com(210) 614-66757411 Spring Gardens Suite 560MarketingInactive
IPQDVNIdaErdmanida_erdman59@hotmail.com(917) 256-316763534 Dawn Club Suite 907SalesInactive
T6QCSIArnoldHermistonarnold.hermiston@yahoo.com(414) 787-3887354 Beech Close Apt. 192SalesActive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Mr. Kenneth Kertzmann-Pfannerstill Jr.sylvia_price41@yahoo.comAdminSalesActive
Rosie Ferryrasheed_lockman89@gmail.comViewerSalesInactive
Jewell Schmelerkaren.kuhlman@hotmail.comMemberMarketingInactive
Kristi Langlesley_breitenberg13@gmail.comAdminEngineeringInactive
Mr. Armando Schambergerroland_marquardt61@gmail.comMemberSupportInactive
Bradford Reynoldscielo39@hotmail.comMemberSalesInactive
Sherri Bogisich IIIbrain.weissnat35@yahoo.comMemberMarketingInactive
Paris McLaughlinmadilyn_quitzon17@gmail.comViewerMarketingActive
Anthony Denesikmiranda6@yahoo.comViewerSupportInactive
Mr. Jermaine Howelldavid_gibson21@hotmail.comMemberSalesInactive
Rows per page:
Page 1 of 2