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 | |
|---|---|---|---|---|
| cCMqDvflRF | $488.00 | failed | aubree.bashirian1@gmail.com | |
| L4m9Dvkda2 | $64.00 | failed | brant17@gmail.com | |
| cYVCGTZ2Z5 | $472.00 | success | efrain33@gmail.com | |
| tvhc853hpC | $876.00 | processing | dave.lockman-erdman@gmail.com | |
| Yqpokwu8Gw | $144.00 | failed | gina89@gmail.com |
Rows per page:
Page 1 of 20
Basic
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Dr. Todd Reichel DVM | tianna50@gmail.com | West Janae | Inactive | $635.70 | |
| Gary Schuppe | hollis_turner@gmail.com | Port Minnieworth | Active | $1,039.06 | |
| Brad Cassin | stacy_schultz31@gmail.com | West Toni | Inactive | $811.61 | |
| Kristen Collier | green.parker@gmail.com | Kshlerin-Hayesland | Inactive | $3.95 | |
| Daryl Ritchie | immanuel_deckow7@yahoo.com | San Leandro | Active | $671.17 | |
| Total | $3,161.49 | ||||
Basic data table made with TanStack Table
Filters
Keyword | Intents | Volume | CPC | Traffic | Link | |
|---|---|---|---|---|---|---|
| react components | I N | 2.5K | 2.5 | 88 | https://www.originui.com | |
| buy react templates | C T | 1.9K | 4.75 | 65 | https://www.originui.com/templates | |
| react ui library | I C | 3.2K | 3.25 | 112 | https://www.originui.com/docs | |
| tailwind components download | T | 890 | 1.95 | 45 | https://www.originui.com/download | |
| react dashboard template free | C T | 4.1K | 5.5 | 156 | https://www.originui.com/templates/dashboard | |
| how to use react components | I | 1.2K | 1.25 | 42 | https://www.originui.com/tutorials | |
| react ui kit premium | C T | 760 | 6.8 | 28 | https://www.originui.com/pricing | |
| react component documentation | I N | 950 | 1.8 | 35 | https://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 |
|---|---|---|---|---|
| 4600 | 2024-03-11T15:30:00 | paid | james.anderson@example.com | 594 |
| 4599 | 2024-03-11T10:10:00 | failed | mia.white@example.com | 276 |
| 4598 | 2024-03-11T08:50:00 | refunded | william.brown@example.com | 315 |
| 4597 | 2024-03-10T19:45:00 | paid | emma.davis@example.com | 529 |
| 4596 | 2024-03-10T15:55:00 | paid | ethan.harris@example.com | 639 |
Rows per page:
Page 1 of 1
Custom Columns
Custom column definitions with formatted cells and styled badges.
# | Date | Status | Email | Amount |
|---|---|---|---|---|
| #4600 | Mar 11, 15:30 | Paid | james.anderson@example.com | $594.00 |
| #4599 | Mar 11, 10:10 | Failed | mia.white@example.com | $276.00 |
| #4598 | Mar 11, 08:50 | Refunded | william.brown@example.com | $315.00 |
| #4597 | Mar 10, 19:45 | Paid | emma.davis@example.com | $529.00 |
| #4596 | Mar 10, 15:55 | Paid | ethan.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.com | Member | |
Courtney Henry @courtneyh | courtney.henry@example.com | Admin | |
Tom Cook @tomc | tom.cook@example.com | Member | |
Whitney Francis @whitneyf | whitney.francis@example.com | Admin |
Rows per page:
Page 1 of 1
With Footer
Table footer with column totals using aggregation functions.
# | Description | Qty | Amount |
|---|---|---|---|
| 1 | Web Design | 3 | $1,200.00 |
| 2 | Development | 5 | $2,400.00 |
| 3 | Consulting | 2 | $800.00 |
| 4 | Support | 4 | $600.00 |
Total | 14 | $5,000.00 |
Rows per page:
Page 1 of 1
Minimal (No Footer)
Clean table without footer controls for simple layouts.
Name | Email | Status |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Active |
| Bob Johnson | bob@example.com | Inactive |
Loading State
Table with loading indicator - includes custom loader slot support.
ID | Product | Category | Price | Stock |
|---|---|---|---|---|
| 1090 | Fantastic Concrete Bacon | Outdoors | $285.07 | 88 |
| 4312 | Modern Marble Towels | Outdoors | $83.56 | 59 |
| 4949 | Intelligent Gold Hat | Industrial | $344.10 | 100 |
| 6946 | Electronic Ceramic Chicken | Grocery | $19.47 | 69 |
| 3529 | Luxurious Granite Gloves | Music | $495.48 | 99 |
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 |
|---|---|---|---|---|---|
| #T6LUV | Juanita Bernier DDS | annabell_hammes@gmail.com | Admin | Engineering | Inactive |
| #YIXJI | Jaunita Jacobs | keith.halvorson@yahoo.com | Member | Sales | Active |
| #BC9B9 | Gregorio Waelchi | garrick26@hotmail.com | Viewer | Marketing | Active |
| #JYJC3 | Leonora Wisozk | darryl_harber6@gmail.com | Admin | Support | Active |
| #V6I8B | Geovanni Conroy | jenna.yost@yahoo.com | Member | Engineering | Active |
| #SFTGL | Kenneth O'Reilly DDS | rosina.kuhn81@yahoo.com | Viewer | Sales | Inactive |
| #I-D6Y | Rolando Pfeffer Jr. | petra_leannon74@yahoo.com | Admin | Marketing | Active |
| #YYXAX | Debra Morar | yvette_sauer9@yahoo.com | Member | Support | Active |
| #KD3NS | Jalyn Kris | osvaldo.spencer@hotmail.com | Viewer | Engineering | Active |
| #D0UDX | Mr. Orlando Kessler | selina15@hotmail.com | Admin | Sales | Active |
Rows per page:
Page 1 of 10
Expansion
Expandable rows to display additional details using the expansion feature.
Name | Email | Role | Status | |
|---|---|---|---|---|
| Lloyd Balistreri-Strosin | ervin.tillman@gmail.com | Viewer | Inactive | |
| Tasha Prosacco | skylar40@yahoo.com | Viewer | Inactive | |
| Corene Kozey | danielle_bins@hotmail.com | Member | Inactive | |
| Jaron Gibson | amber_corkery@hotmail.com | Viewer | Active | |
| Nicolas Renner-Pouros | eleanor.bins@gmail.com | Viewer | Inactive | |
| Elvira Lemke | stephon_koss46@yahoo.com | Viewer | Active | |
| Kenny Bogisich | elvie.corwin-bradtke26@yahoo.com | Admin | Inactive | |
| Todd Greenfelder | scott_swaniawski92@yahoo.com | Admin | Inactive | |
| Audrey Hudson DVM | deborah.satterfield42@yahoo.com | Admin | Active | |
| Bessie Rice-Leannon | amy_pollich@yahoo.com | Member | Active |
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 |
|---|---|---|---|---|
| Gerson Fritsch | antonia49@hotmail.com | Support | Inactive | |
| Marco Botsford | stacy.kuvalis@yahoo.com | Engineering | Inactive | |
| Alda Douglas | vanessa.mertz69@hotmail.com | Marketing | Inactive | |
| Duane Brekke | antonia.effertz53@hotmail.com | Engineering | Active | |
| Emilio Kerluke | ross_hirthe@yahoo.com | Engineering | Active | |
| Marcella Steuber PhD | enrique_wunsch-daniel80@hotmail.com | Engineering | Inactive | |
| Ludie Wintheiser | eileen36@gmail.com | Support | Inactive | |
| Beaulah Schmitt | alexander_halvorson@gmail.com | Marketing | Inactive | |
| Kenny Flatley | patsy.becker93@gmail.com | Sales | Inactive | |
| Nestor Mayer | brenden.kshlerin90@hotmail.com | Engineering | Inactive |
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 |
|---|---|---|---|---|---|---|---|
| GATA_4 | Eryn | O'Reilly | eryn_oreilly96@yahoo.com | (376) 444-8808 | 8138 Heloise Lakes Apt. 409 | Support | Active |
| JRRQMI | Stacey | Bradtke | stacey_bradtke88@yahoo.com | (570) 603-1912 | 22338 Priory Road Suite 330 | Engineering | Active |
| ILVODM | Jasmine | Rogahn | jasmine_rogahn74@gmail.com | (439) 857-8545 | 33722 Sporer Junction Apt. 176 | Engineering | Active |
| FJQRHD | Lexi | Oberbrunner | lexi_oberbrunner@yahoo.com | (836) 669-8537 | 3676 W Front Street Suite 336 | Support | Inactive |
| SOH8BF | Grant | Beatty | grant.beatty43@hotmail.com | (525) 895-2688 | 3074 Buck Inlet Apt. 839 | Marketing | Inactive |
| 8YVRRN | Omer | Wehner | omer.wehner@hotmail.com | (917) 998-5304 | 364 Dallas Mall Suite 885 | Engineering | Active |
| NGI82T | Paulette | Auer | paulette.auer66@gmail.com | (734) 252-6241 | 64039 Lebsack Club Suite 341 | Engineering | Active |
| CS9OMD | Belinda | Kihn | belinda.kihn@hotmail.com | (329) 688-9173 | 434 Main Street Suite 281 | Engineering | Active |
Rows per page:
Page 1 of 1
Pinned columns
None
Context Menu
Name | Email | Role | Department | Status |
|---|---|---|---|---|
| Drake Mayer | ford13@gmail.com | Viewer | Sales | Active |
| Ms. Iris Smitham | aditya_brekke74@hotmail.com | Viewer | Sales | Active |
| Garry Beahan I | jennie.damore51@hotmail.com | Member | Support | Active |
| Janie Baumbach | daphney_swift@yahoo.com | Member | Engineering | Inactive |
| Alena Johns | ola_parisian74@yahoo.com | Admin | Marketing | Inactive |
| Loma Emard-Little Jr. | reynold.goodwin-jaskolski24@gmail.com | Admin | Engineering | Inactive |
| Ms. Friedrich Predovic DVM | arvel.schiller@yahoo.com | Member | Sales | Active |
| Shane Goldner | bella_larson@gmail.com | Member | Engineering | Active |
| Max Frami | tracy.ferry@gmail.com | Member | Engineering | Active |
| Alfredo Cruickshank | sincere37@yahoo.com | Member | Marketing | Active |
Rows per page:
Page 1 of 2