Data Display

Data Table

A full-featured data table with sorting, filtering, column visibility, pagination, and row selection. Built on TanStack Table v8.

Name	Email	Status
Alice Martin	alice@example.com	Active
Bob Smith	bob@example.com	Inactive
Carol White	carol@example.com	Active

0 of 3 row(s) selected

Page 1 of 1

Installation

npx benflux-ui add data-table

Usage

import { DataTable } from "@/components/ui/data-table"
import type { ColumnDef } from "@tanstack/react-table"

type User = { id: string; name: string; email: string; status: string }

const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "status", header: "Status" },
]

export default function Example({ data }: { data: User[] }) {
  return (
    <DataTable
      columns={columns}
      data={data}
      searchKey="name"
      searchPlaceholder="Filter by name..."
    />
  )
}