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
CCUDHZk8JU$290.00
processing
kristina.schumm@hotmail.com
dvSXzNbRnX$949.00
failed
meta19@gmail.com
Y0zkZbpTw0$643.00
failed
chelsea67@hotmail.com
6cdzIj3naV$377.00
processing
hobart.wisozk19@gmail.com
cxDxRPubr1$836.00
success
art_borer@yahoo.com
Rows per page:
Page 1 of 20

Basic

NameEmailLocationStatusBalance
Greyson Connellyhenry82@yahoo.comLinden
Inactive
$608.11
Deonte Krisjenifer.hilll@yahoo.comSouth Rudy
Inactive
$1,084.46
Nina Wiegandernesto88@gmail.comSan Ramon
Inactive
$1,196.72
Ms. Roberta Kiehndevin.kerluke53@hotmail.comNorth Walker
Inactive
$743.48
Jason Kuphalkyra6@gmail.comRobelville
Active
$142.36
Total$3,775.13

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
5892Gorgeous Steel BallJewelry
$229.83
57
9318Oriental Steel BallBooks
$324.72
30
5212Small Steel TableBaby
$406.15
41
9563Licensed Bronze ChickenGrocery
$384.75
15
1194Generic Plastic PantsHealth
$23.78
4
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
#GUJRJMandy Sipesbetsy0@yahoo.comAdminEngineeringInactive
#WFLUEDr. Erin Walkerverna.kshlerin38@yahoo.comMemberSalesActive
#F6DZHMax Luettgen DDSfranklin_pacocha47@hotmail.comViewerMarketingActive
#YIVRPFrederic Herzogashlee.conn38@hotmail.comAdminSupportActive
#MZSBXGerman Maggiojarrett.funk15@gmail.comMemberEngineeringActive
#AHUELFloyd Morissetteclay_orn95@yahoo.comViewerSalesInactive
#RQG66Zoila McDermottkelvin.bins81@hotmail.comAdminMarketingActive
#VMKXZJarod Kuhicnorene80@gmail.comMemberSupportActive
#V2DN5Alfreda Heaneylorene_beer@hotmail.comViewerEngineeringActive
#AK7PVJohann Jonesburley86@gmail.comAdminSalesActive
Rows per page:
Page 1 of 10

Expansion

Expandable rows to display additional details using the expansion feature.

Name
Email
Role
Status
Ryan Collierjenny_mann@gmail.comViewerActive
Felipe Fisherayana_bergstrom99@hotmail.comMemberInactive
Wesley Bartolettiedward42@gmail.comAdminInactive
Aubrey Emardchristina.gerhold64@gmail.comViewerActive
Missouri Pfannerstillenrique85@gmail.comViewerActive
Mr. Andrew O'Connellmeghan.maggio@yahoo.comAdminActive
Levi Boyerrick.schumm68@gmail.comAdminInactive
Mallory Donnellyrosanna83@yahoo.comViewerActive
Sylvester Hansenjill_pouros@hotmail.comAdminActive
Miss Eula Armstrongtasha.gulgowski94@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
Bella Funktina_mcglynn@hotmail.comEngineeringInactive
Dr. Doug Friesenstephan.kassulke@yahoo.comSalesActive
Mattie Reichelminnie_ziemann99@yahoo.comSalesInactive
Clinton Lednernelson_borer74@yahoo.comEngineeringActive
Rahsaan Johnstonsophie.tremblay@yahoo.comSalesActive
Cedric Schummlila27@yahoo.comMarketingActive
Madaline Heaneyladarius.schoen87@gmail.comSalesInactive
Zackary Langworthignacio_johnson46@yahoo.comMarketingInactive
Clyde Hayescristina63@gmail.comSalesActive
Dwight Johnstonben.swift72@yahoo.comMarketingActive
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
S6AZIYDesireeLangoshdesiree.langosh21@yahoo.com(339) 540-96944163 Rolando Forge Suite 312SalesActive
K9TXYTLoriProsaccolori_prosacco@yahoo.com(258) 787-46076397 Clarendon Road Suite 420MarketingActive
AB4UMSOwenKuhlmanowen_kuhlman66@yahoo.com(485) 541-86111997 Tower Road Suite 278SalesActive
WFIWUQJosefinaCollierjosefina_collier85@hotmail.com(336) 754-065435471 Jacobson Isle Suite 574SupportActive
FFMAVZCathrynRunolfsdottircathryn.runolfsdottir@gmail.com(573) 457-61642421 Kuvalis Rest Apt. 844MarketingInactive
IDYYFMSaraHintzsara.hintz@yahoo.com(659) 594-73818592 Murray Alley Suite 888SupportActive
JWCDBJAraceliCronaaraceli.crona4@gmail.com(664) 717-171127742 Gusikowski Walk Suite 123SupportActive
ZBQH6YMarilynLittlemarilyn_little9@yahoo.com(624) 801-0994453 The Sidings Apt. 478SupportInactive
Rows per page:
Page 1 of 1
Pinned columns
None

Context Menu

Name
Email
Role
Department
Status
Flora Champlinemma.volkman95@gmail.comMemberSupportInactive
Tammy Wyman IIIwanda.conn56@hotmail.comMemberSalesInactive
Lawrence Moen DVMmelody.kulas0@gmail.comViewerSupportActive
Dorian Kovacekluther_bins@yahoo.comMemberMarketingInactive
Ivan Heidenreichbilly_koss@hotmail.comAdminMarketingInactive
Dora Runolfsdottircamille_vandervort@hotmail.comViewerMarketingInactive
Jack Weissnatchesley19@yahoo.comAdminSupportInactive
Silvia Wolfgeorge73@hotmail.comMemberSalesInactive
Corbin Pollich-Schulistlaurel_beer83@gmail.comMemberEngineeringInactive
Yvonne Abbott-Kautzerkatlynn.hansen46@gmail.comAdminSalesInactive
Rows per page:
Page 1 of 2