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 | |
|---|---|---|---|---|
| MlYhBZHo8M | $238.00 | pending | sherwood_daugherty@yahoo.com | |
| RARhDgmHw1 | $107.00 | failed | marilyn_klein52@hotmail.com | |
| YsMyJqhp3P | $594.00 | pending | nina90@yahoo.com | |
| rQ0B55voMt | $11.00 | failed | claudine23@gmail.com | |
| L6ZJBGj4nC | $58.00 | failed | francis25@gmail.com |
Basic
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Suzanne Kuhic IV | charlie_kuhlman87@yahoo.com | Okunevaview | Active | $741.07 | |
| Kayla Pagac | sterling_toy@yahoo.com | Mattburgh | Active | $565.03 | |
| Marjory Hamill | gene99@hotmail.com | Santa Monica | Active | $868.05 | |
| Mrs. Alexa Kulas | sara_waters@yahoo.com | Port Jett | Active | $444.85 | |
| Jameson Kunde | malachi.nolan53@gmail.com | East Dean | Inactive | $686.12 | |
| Total | $3,305.12 | ||||
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 |
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 |
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 |
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 |
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 |
|---|---|---|---|---|
| 6820 | Rustic Aluminum Fish | Automotive | $429.97 | 67 |
| 1247 | Modern Marble Computer | Movies | $27.60 | 76 |
| 5543 | Sleek Gold Towels | Shoes | $239.73 | 43 |
| 5465 | Recycled Steel Cheese | Games | $376.95 | 3 |
| 5449 | Small Rubber Shirt | Kids | $107.64 | 24 |
Server-Side Pagination
Manual pagination with server-side data fetching and search. Enable manual-pagination prop and listen to the @update:pagination event.
ID | Name | Email | Role | Department | Status |
|---|---|---|---|---|---|
| #KJ_P4 | Cornelius Wuckert | santos.cronin79@yahoo.com | Admin | Engineering | Inactive |
| #LD8QS | Kayli O'Hara | sammie75@yahoo.com | Member | Sales | Active |
| #CL1QV | Mamie Raynor | rico_kuhic68@gmail.com | Viewer | Marketing | Active |
| #DT4A4 | Jason Collier | alverta.witting33@hotmail.com | Admin | Support | Active |
| #L8E1Y | Rashad Heathcote Sr. | vicente39@gmail.com | Member | Engineering | Active |
| #TJWQB | Moriah Leuschke | derrick.zulauf@yahoo.com | Viewer | Sales | Inactive |
| #WZSXL | Jay Nitzsche MD | olin.hessel@gmail.com | Admin | Marketing | Active |
| #AYMDU | Jeffrey Grady | jakayla.kling47@yahoo.com | Member | Support | Active |
| #ZU0RY | Claire Tremblay | tyreek.lehner33@hotmail.com | Viewer | Engineering | Active |
| #RC5R3 | Dallin Gusikowski | abagail12@yahoo.com | Admin | Sales | Active |
Expansion
Expandable rows to display additional details using the expansion feature.
Name | Email | Role | Status | |
|---|---|---|---|---|
| Blake Hickle | reginald_abbott32@hotmail.com | Member | Inactive | |
| Ms. Kellie Kub | dale_kuvalis@yahoo.com | Admin | Inactive | |
| Georgianna Klocko | caroline_erdman@yahoo.com | Member | Inactive | |
| Gretchen Von PhD | teri_gibson82@yahoo.com | Viewer | Inactive | |
| Pedro Kiehn Jr. | kaleigh84@hotmail.com | Member | Inactive | |
| Gilbert Torp | garrett24@hotmail.com | Admin | Inactive | |
| Clark Luettgen | marc_nitzsche51@hotmail.com | Admin | Inactive | |
| Connie Keebler | krista16@yahoo.com | Viewer | Inactive | |
| Amara Roberts | kimberly.gislason83@hotmail.com | Admin | Inactive | |
| Chester Price | simone_prohaska@gmail.com | Member | Active |
Row Pinning
Pin rows to the top or bottom. The table emits update:rowPinning and row-pin so parents can sync state.
| Pin | Name | Email | Department | Status |
|---|---|---|---|---|
| Tyreek Skiles | cyrus_effertz@hotmail.com | Marketing | Active | |
| Wilbur Luettgen | lena.morar66@gmail.com | Support | Active | |
| Shanna Murphy | charlotte.haley70@gmail.com | Support | Active | |
| Antonia Rodriguez | agustin57@yahoo.com | Sales | Inactive | |
| Roxanne Dickinson | xavier.reinger-dach@hotmail.com | Engineering | Active | |
| Blanca Kemmer | georgia_bernier95@hotmail.com | Sales | Active | |
| Barbara Koss V | clinton.romaguera@hotmail.com | Sales | Inactive | |
| Leigh Legros | letha62@hotmail.com | Engineering | Active | |
| Jimmy Okuneva | louise.raynor42@yahoo.com | Support | Active | |
| Keeley Legros | diana52@hotmail.com | Engineering | Active |
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.
ID | First Name | Last Name | Email | Phone | Address | Department | Status |
|---|---|---|---|---|---|---|---|
| O4QVOH | Curt | Bernhard | curt.bernhard48@hotmail.com | (919) 656-2283 | 9054 Hamill Wells Apt. 292 | Support | Inactive |
| MEVGNQ | Tasha | Rosenbaum | tasha_rosenbaum21@hotmail.com | (240) 991-4835 | 39833 Bobbie Brook Apt. 187 | Marketing | Active |
| W5QM98 | Myrtis | Reichert | myrtis.reichert0@hotmail.com | (601) 876-0952 | 29019 Deshaun Divide Suite 980 | Marketing | Inactive |
| MFDXNW | Gladys | Swaniawski | gladys_swaniawski52@hotmail.com | (955) 886-9120 | 564 Moen Plain Suite 724 | Support | Inactive |
| STSFPF | Brown | Paucek | brown_paucek94@hotmail.com | (856) 317-6461 | 7858 Tennyson Road Suite 772 | Marketing | Inactive |
| VSAKRX | Rafael | Cartwright | rafael.cartwright@hotmail.com | (932) 925-5716 | 3639 Mills Hills Apt. 929 | Engineering | Inactive |
| 6ONGDN | Myrtle | Kshlerin | myrtle.kshlerin@gmail.com | (816) 783-8805 | 54209 Raynor Forest Suite 172 | Support | Inactive |
| CZKXMP | Loyce | Ritchie | loyce_ritchie@yahoo.com | (628) 692-9241 | 84345 Kathleen Circle Apt. 535 | Marketing | Inactive |
Context Menu
Name | Email | Role | Department | Status |
|---|---|---|---|---|
| Dovie Connelly | dorothy_huel@hotmail.com | Viewer | Marketing | Inactive |
| Gwendolyn Senger | jimmy.mccullough81@yahoo.com | Viewer | Engineering | Active |
| Catalina Larson | lucie13@yahoo.com | Member | Engineering | Active |
| Mr. Aleen Rippin I | ocie.crooks@gmail.com | Member | Engineering | Inactive |
| Terrell Harris I | mafalda.lynch@hotmail.com | Admin | Support | Inactive |
| Lavinia McKenzie | mable70@gmail.com | Viewer | Marketing | Inactive |
| Seth Pfannerstill | lynne_keebler@hotmail.com | Member | Engineering | Active |
| Kay Thiel II | jennie_monahan@yahoo.com | Admin | Engineering | Active |
| Aletha Schamberger | camilla.schaden@yahoo.com | Admin | Marketing | Inactive |
| Brock Romaguera | shane12@yahoo.com | Viewer | Marketing | Active |