Data Table

Overview

data-table provides a production-oriented table shell around TanStack Table. It keeps search, pagination, sorting, grouping, and view mode in the URL so table state can be linked, refreshed, and shared.

Features

• URL-backed state through TableSearchSchema
• Search, sorting, client or server pagination, and column visibility
• CSV export for the current table data
• Table and gallery display modes
• Optional grouping with row movement callbacks
• Reusable action column helper

Usage

import { DataTable, DataTableColumnHeader } from "@/components/ui/data-table";

<DataTable
  columns={columns}
  data={rows}
  exportFileName="rows.csv"
  from="/your-route"
/>

Server Pagination

Pass the current page of rows and serverPagination.rowCount when data is already paginated by an API. The table keeps TanStack pagination state in the URL and uses rowCount to calculate page controls without slicing the current page again.

<DataTable
  columns={columns}
  data={page.data}
  from="/your-route"
  serverPagination={{ rowCount: page.meta.total }}
/>