# Tailwind Table: React Data Table with Sorting, Search, Row Selection and Pagination > Free Tailwind table for React: sortable columns, search, status filters, checkbox selection, pagination and phone cards. No table library needed. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination). - Page, with a live preview: https://shadcn.exchange/r/weinc/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination - Screenshot: https://shadcn.exchange/shot/weinc/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination/light.png - Registry item: https://we.inc/r/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Files ### `components/we-inc/tailwind-table-react-data-table-with-sorting-search-row-selection-and-pagination.tsx` ```tsx import { useEffect, useMemo, useRef, useState } from "react"; // Demo data (made up). Replace with your own rows; keep the same keys or update COLUMNS. type Status = "Paid" | "Pending" | "Overdue" | "Refunded"; type Row = { id: string; customer: string; email: string; plan: string; amount: number; status: Status; date: string }; const ROWS: Row[] = [ { id: "INV-1042", customer: "Marta Okafor", email: "marta@northfield.example", plan: "Studio", amount: 240, status: "Paid", date: "2026-10-02" }, { id: "INV-1041", customer: "Callum Reyes", email: "callum@tidewater.example", plan: "Starter", amount: 49, status: "Pending", date: "2026-10-01" }, { id: "INV-1040", customer: "Ines Lindqvist", email: "ines@birchandco.example", plan: "Team", amount: 590, status: "Overdue", date: "2026-09-28" }, { id: "INV-1039", customer: "Dev Raman", email: "dev@quarrylane.example", plan: "Studio", amount: 240, status: "Paid", date: "2026-09-27" }, { id: "INV-1038", customer: "Hana Kowalski", email: "hana@pinecrest.example", plan: "Starter", amount: 49, status: "Refunded", date: "2026-09-25" }, { id: "INV-1037", customer: "Tomasz Ellery", email: "tomasz@saltmarsh.example", plan: "Team", amount: 590, status: "Paid", date: "2026-09-22" }, { id: "INV-1036", customer: "Priya Achebe", email: "priya@foundry.example", plan: "Studio", amount: 240, status: "Pending", date: "2026-09-20" }, { id: "INV-1035", customer: "Oscar Muller", email: "oscar@lowmoor.example", plan: "Starter", amount: 49, status: "Paid", date: "2026-09-18" }, { id: "INV-1034", customer: "Yara Benedetti", email: "yara@ashgrove.example", plan: "Team", amount: 590, status: "Overdue", date: "2026-09-15" }, { id: "INV-1033", customer: "Felix Adeyemi", email: "felix@kestrel.example", plan: "Studio", amount: 240, status: "Paid", date: "2026-09-12" }, { id: "INV-1032", customer: "Lena Hartmann", email: "lena@riverbend.example", plan: "Starter", amount: 49, status: "Paid", date: "2026-09-10" }, { id: "INV-1031", customer: "Samir Castillo", email: "samir@oldmill.example", plan: "Team", amount: 590, status: "Pending", date: "2026-09-07" }, ]; type Key = "customer" | "plan" | "amount" | "status" | "date"; const COLUMNS: { key: Key; label: string; align?: "right" }[] = [ { key: "customer", label: "Customer" }, { key: "plan", label: "Plan" }, { key: "status", label: "Status" }, { key: "date", label: "Issued" }, { key: "amount", label: "Amount", align: "right" }, ]; const STATUSES: ("All" | Status)[] = ["All", "Paid", "Pending", "Overdue", "Refunded"]; const PAGE_SIZE = 6; const BADGE: Record = { Paid: "bg-emerald-50 text-emerald-700 ring-emerald-600/20", Pending: "bg-amber-50 text-amber-800 ring-amber-600/25", Overdue: "bg-rose-50 text-rose-700 ring-rose-600/20", Refunded: "bg-slate-100 text-slate-700 ring-slate-500/20", }; const DOT: Record = { Paid: "bg-emerald-500", Pending: "bg-amber-500", Overdue: "bg-rose-500", Refunded: "bg-slate-400" }; const money = (n: number) => "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2 }); const day = (d: string) => new Date(d + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); function Badge({ s }: { s: Status }) { return ( ); } function Check({ checked, mixed, onChange, label }: { checked: boolean; mixed?: boolean; onChange: () => void; label: string }) { const ref = useRef(null); useEffect(() => { if (ref.current) ref.current.indeterminate = !!mixed && !checked; }, [mixed, checked]); return ( ); } function SortIcon({ dir }: { dir: "asc" | "desc" | null }) { return ( ); } export default function DataTable() { const [query, setQuery] = useState(""); const [status, setStatus] = useState<"All" | Status>("All"); const [sort, setSort] = useState<{ key: Key; dir: "asc" | "desc" }>({ key: "date", dir: "desc" }); const [page, setPage] = useState(0); const [selected, setSelected] = useState>(() => new Set(["INV-1040"])); const [dense, setDense] = useState(false); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); const rows = ROWS.filter((r) => (status === "All" || r.status === status) && (!q || [r.customer, r.email, r.id, r.plan].some((v) => v.toLowerCase().includes(q)))); const m = sort.dir === "asc" ? 1 : -1; return [...rows].sort((a, b) => { const x = a[sort.key], y = b[sort.key]; const d = (typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y))) * m; return d || b.date.localeCompare(a.date); // ties: newest first }); }, [query, status, sort]); const pages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); const current = Math.min(page, pages - 1); const visible = filtered.slice(current * PAGE_SIZE, current * PAGE_SIZE + PAGE_SIZE); const allOnPage = visible.length > 0 && visible.every((r) => selected.has(r.id)); const someOnPage = visible.some((r) => selected.has(r.id)); const toggle = (id: string) => setSelected((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const togglePage = () => setSelected((s) => { const n = new Set(s); visible.forEach((r) => (allOnPage ? n.delete(r.id) : n.add(r.id))); return n; }); const sortBy = (key: Key) => { setSort((s) => ({ key, dir: s.key === key && s.dir === "asc" ? "desc" : "asc" })); setPage(0); }; const cell = dense ? "py-2" : "py-3.5"; const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500"; return (

Invoices

Demo data. {ROWS.length} invoices from the last 30 days.

{[false, true].map((d) => ( ))}
{/* Toolbar */}
{ setQuery(e.target.value); setPage(0); }} className="h-10 w-full rounded-lg border border-slate-300 bg-white pl-9 pr-3 text-sm placeholder:text-slate-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/30" />
{STATUSES.map((s) => ( ))}
{/* Selection bar */}
{selected.size > 0 && ( <> {selected.size} selected
)}
{filtered.length === 0 ? (

No invoices match

Try another name or clear the filters.

) : ( <> {/* Desktop and tablet: real table with a sticky header */}
{COLUMNS.map((c) => { const active = sort.key === c.key; return ( ); })} {visible.map((r) => { const on = selected.has(r.id); return ( ); })}
Invoices, sorted by {sort.key} {sort.dir === "asc" ? "ascending" : "descending"}
toggle(r.id)} label={`Select ${r.id}`} />
{r.customer}
{!dense &&
{r.email}
} 		{r.plan} {day(r.date)} {money(r.amount)}
{/* Phone: each row becomes a card */}
    {visible.map((r) => { const on = selected.has(r.id); return (
  • toggle(r.id)} label={`Select ${r.id}`} />
    {r.customer} {money(r.amount)}
    {r.plan}{day(r.date)}
    • ); })}
{/* Pagination */} )}
); } ```