TanStack Table v9 + Shadcn UI
Sorting, filtering, and pagination, built up one feature at a time
Column definitions, a table instance, and two loops. No sorting, no filtering, no pagination.
| Name | Status | Date | Amount | |
|---|---|---|---|---|
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | Feb 27, 2026 | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | Mar 2, 2026 | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | Mar 8, 2026 | $92.00 |
Showing the first 8 of 48 payments. The rest arrive once there is pagination to handle them.
Click a header to sort. Click again to reverse it, once more to clear it. Shift-click a second header to sort by both.
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | Feb 27, 2026 | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | Mar 2, 2026 | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | Mar 8, 2026 | $92.00 |
One input searching across name and email. Sorting still works, and the two features stack without knowing about each other.
12 of 12 rows
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | Feb 27, 2026 | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | Mar 2, 2026 | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | Mar 8, 2026 | $92.00 |
Lucas Moreau | lucas.moreau@example.com | success | Mar 15, 2026 | $559.00 |
Hannah Wolff | hannah.wolff@example.com | pending | Mar 21, 2026 | $1,203.00 |
Diego Santos | diego.santos@example.com | success | Mar 29, 2026 | $47.00 |
Yuki Tanaka | yuki.tanaka@example.com | success | Apr 4, 2026 | $688.00 |
A dropdown filtering the status column down to one value, alongside the search box.
12 of 12 rows
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | Feb 27, 2026 | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | Mar 2, 2026 | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | Mar 8, 2026 | $92.00 |
Lucas Moreau | lucas.moreau@example.com | success | Mar 15, 2026 | $559.00 |
Hannah Wolff | hannah.wolff@example.com | pending | Mar 21, 2026 | $1,203.00 |
Diego Santos | diego.santos@example.com | success | Mar 29, 2026 | $47.00 |
Yuki Tanaka | yuki.tanaka@example.com | success | Apr 4, 2026 | $688.00 |
A min and max pair filtering the amount column. Leave either side blank to leave that end open.
12 of 12 rows
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | Feb 27, 2026 | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | Mar 2, 2026 | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | Mar 8, 2026 | $92.00 |
Lucas Moreau | lucas.moreau@example.com | success | Mar 15, 2026 | $559.00 |
Hannah Wolff | hannah.wolff@example.com | pending | Mar 21, 2026 | $1,203.00 |
Diego Santos | diego.santos@example.com | success | Mar 29, 2026 | $47.00 |
Yuki Tanaka | yuki.tanaka@example.com | success | Apr 4, 2026 | $688.00 |
Column filter state
[]
A dropdown that hides and shows columns. Date starts hidden, and Name can’t be hidden at all.
Ken Whitfield | ken99@example.com | success | $316.00 |
Abe Lawson | abe45@example.com | processing | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | $837.00 |
Silas Ryan | silas22@example.com | failed | $874.00 |
Carmella Boyd | carmella@example.com | pending | $721.00 |
Jasmine Reid | jasmine.reid@example.com | success | $128.00 |
Omar Haddad | omar.haddad@example.com | failed | $1,450.00 |
Priya Nair | priya.nair@example.com | processing | $92.00 |
Lucas Moreau | lucas.moreau@example.com | success | $559.00 |
Hannah Wolff | hannah.wolff@example.com | pending | $1,203.00 |
Diego Santos | diego.santos@example.com | success | $47.00 |
Yuki Tanaka | yuki.tanaka@example.com | success | $688.00 |
All 48 payments, five to a page. Change the page size or search, and the page count follows along.
Ken Whitfield | ken99@example.com | success | Jan 14, 2026 | $316.00 |
Abe Lawson | abe45@example.com | processing | Jan 22, 2026 | $242.00 |
Monserrat Vidal | monserrat44@example.com | success | Feb 3, 2026 | $837.00 |
Silas Ryan | silas22@example.com | failed | Feb 11, 2026 | $874.00 |
Carmella Boyd | carmella@example.com | pending | Feb 19, 2026 | $721.00 |
Showing 1 to 5 of 48
Page 1 of 10
Built with Next.js 16, TanStack Table v9, and Shadcn UI