Back to App UI
Data Table
A full data table — live text filter, three-state sortable headers, row selection with a select-all header checkbox, status chips, pagination, and an empty state, all in one panel.
12 of 12 invoices
| Status | ||||
|---|---|---|---|---|
Ivy Tanaka ivy@meridian.app | Paid | Jul 20, 2026 | $2,650.00 | |
Emma Novak emma@polaris.dev | Pending | Jul 17, 2026 | $1,340.00 | |
Zara Ahmed zara@quantic.co | Paid | Jul 14, 2026 | $3,120.00 | |
Maya Okafor maya@lumina.app | Paid | Jul 11, 2026 | $1,975.00 | |
Noah Kim noah@stackline.dev | Failed | Jul 9, 2026 | $460.00 | |
Liam Chen liam@acme.co | Pending | Jul 5, 2026 | $840.00 |
0 of 12 row(s) selected
Page 1 of 2
App UItablesortfilterpaginationselection
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Pipeline
filter → sort → paginate, in that exact order, one memo
Sorting
Inactive ChevronsUpDown → ArrowUp/ArrowDown; aria-sort on th
Selection
Survives filtering and paging; header checkbox scopes to page
Status chips
Same primary/neutral/destructive split as the alert families