Data Table

Advanced data table with search, sorting, pagination, column visibility, and row selection using TanStack React Table.

Installation

pnpm dlx shadcn@latest add https://jb.desishub.com/r/data-table.json

Usage

import { DataTable } from "@/components/data-table/data-table";
import {
  SortableColumn,
  DateColumn,
  ActionColumn,
  StatusColumn,
  ImageColumn,
} from "@/components/data-table/column-helpers";

const columns = [
  {
    accessorKey: "name",
    header: ({ column }) => <SortableColumn column={column} title="Name" />,
  },
  {
    accessorKey: "status",
    cell: ({ row }) => <StatusColumn row={row} accessorKey="status" />,
  },
  {
    accessorKey: "createdAt",
    cell: ({ row }) => <DateColumn row={row} accessorKey="createdAt" />,
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <ActionColumn
        editHref={`/edit/${row.original.id}`}
        onDelete={() => handleDelete(row.original.id)}
      />
    ),
  },
];
 
<DataTable columns={columns} data={data} searchPlaceholder="Search items..." />;

Props

DataTable

Prop	Type	Default	Description
`columns`	`ColumnDef[]`	-	TanStack column definitions.
`data`	`TData[]`	-	Data array to display.
`searchPlaceholder`	`string`	`"Search..."`	Search input placeholder.
`searchable`	`boolean`	`true`	Show the search bar.
`showViewOptions`	`boolean`	`true`	Show column visibility toggle.

Column Helpers

SortableColumn - Sortable column header with arrow icon
DateColumn - Formatted date display
ImageColumn - Image thumbnail (50x50)
StatusColumn - Active/Disabled badge
ActionColumn - Edit/Delete dropdown menu