Data Table Pro

Full-featured data table with sorting, filtering, pagination, column resizing, and CSV export. Built on TanStack Table with a clean, customizable UI.

ReactUI ComponentsBuilt with Cursor

1.9k

Stars

9.8k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module data-table-pro

Code Preview

index.tsx

import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";

export function DataTable({ data, columns }) {
  const [sorting, setSorting] = useState([]);
  const [globalFilter, setGlobalFilter] = useState("");

  const table = useReactTable({
    data,
    columns,
    state: { sorting, globalFilter },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <div className="rounded-lg border">
      <input
        value={globalFilter}
        onChange={(e) => setGlobalFilter(e.target.value)}
        placeholder="Search all columns..."
        className="w-full border-b px-4 py-2"
      />
      <table className="w-full">
        {/* header and body rows */}
      </table>
    </div>
  );
}