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 | |
|---|---|---|---|---|
| yRJNuPmp8Z | $766.00 | processing | orville_conn49@yahoo.com | |
| VcV8lsdiN4 | $794.00 | success | rae.kling@hotmail.com | |
| nlRdICb4Zw | $388.00 | success | kristina.gleason@hotmail.com | |
| 6DFut9muxz | $598.00 | processing | madaline38@hotmail.com | |
| Yzs2WhAwwm | $948.00 | pending | eleazar.kuphal7@yahoo.com |
Rows per page:
Page 1 of 20
Basic
| Name | Location | Status | Balance | ||
|---|---|---|---|---|---|
| Patricia Murphy | mandy20@yahoo.com | Fort Alisonside | Inactive | $203.42 | |
| Minnie Kuhic | daphney93@yahoo.com | South Bernita | Active | $1.28 | |
| Deanna Labadie | mya_douglas98@gmail.com | West Lafayette | Active | $993.68 | |
| Krystal Lockman | adelbert39@yahoo.com | South Chaim | Active | $993.74 | |
| Darryl Huel | moses.graham@gmail.com | Port Jorgefort | Active | $343.61 | |
| Total | $2,535.73 | ||||
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 |
|---|---|---|---|---|
| 1786 | Frozen Rubber Gloves | Books | $357.69 | 70 |
| 9641 | Licensed Metal Towels | Jewelry | $27.76 | 60 |
| 7370 | Incredible Bamboo Pizza | Industrial | $54.48 | 83 |
| 1411 | Modern Cotton Mouse | Garden | $467.29 | 60 |
| 8026 | Intelligent Silk Table | Industrial | $344.69 | 43 |
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 |
|---|---|---|---|---|---|
| #9XJ_A | Janet Jaskolski | hope45@yahoo.com | Admin | Engineering | Inactive |
| #UJHMD | Ada Bins | holly.anderson@yahoo.com | Member | Sales | Active |
| #YENBL | Audrey Stiedemann | olaf.lynch@gmail.com | Viewer | Marketing | Active |
| #KDJQC | Kenneth Bayer | josianne.johnston91@yahoo.com | Admin | Support | Active |
| #46HPW | Hope Beer | alessandro91@hotmail.com | Member | Engineering | Active |
| #XI1NS | Marvin Haley | ephraim.stiedemann57@hotmail.com | Viewer | Sales | Inactive |
| #SWUSV | Warren Jones I | jaclyn_hintz@gmail.com | Admin | Marketing | Active |
| #SJPQJ | Karla Rosenbaum | olin_bayer25@hotmail.com | Member | Support | Active |
| #_9WWM | Bethany Schaden | nedra43@hotmail.com | Viewer | Engineering | Active |
| #MMMKA | Martin Baumbach | werner.hermann@yahoo.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 | |
|---|---|---|---|---|
| Martin Kerluke | elinor.daniel18@yahoo.com | Admin | Inactive | |
| Cindy Emard | mitchell.kshlerin@yahoo.com | Admin | Active | |
| Julie Cassin | lennie82@hotmail.com | Viewer | Active | |
| Jeannette Reichert | anibal.blick@hotmail.com | Member | Inactive | |
| Viola Anderson | arturo.hermann-oreilly@hotmail.com | Member | Active | |
| Krystal Hauck | cindy_friesen29@hotmail.com | Viewer | Active | |
| Karen Wiza | alysson19@hotmail.com | Admin | Active | |
| Caroline Hahn | stanton.kuhlman@hotmail.com | Admin | Inactive | |
| Thelma O'Keefe | sonny_larson79@gmail.com | Admin | Inactive | |
| Dawn Bergnaum-Larkin | hermina76@yahoo.com | Member | Inactive |
Rows per page:
Page 1 of 2
Context Menu
Name | Email | Role | Department | Status |
|---|---|---|---|---|
| Tracy Berge | jaylon_lynch@hotmail.com | Admin | Sales | Inactive |
| Cynthia Adams | jared.dach@yahoo.com | Admin | Engineering | Active |
| Dr. Cary Skiles | kallie.stanton@hotmail.com | Viewer | Support | Inactive |
| Bob Osinski | bridie48@yahoo.com | Admin | Marketing | Active |
| Cora Quitzon PhD | stefanie31@yahoo.com | Member | Engineering | Active |
| Terri Bernhard | lincoln29@yahoo.com | Viewer | Engineering | Active |
| Boyd Bartell | icie.sipes94@gmail.com | Admin | Support | Active |
| Allison Spinka | micaela_morissette@hotmail.com | Viewer | Sales | Inactive |
| Lois Haag | rhea_kling@hotmail.com | Viewer | Marketing | Active |
| Joshua Rau | isabelle55@yahoo.com | Viewer | Support | Active |
Rows per page:
Page 1 of 2