Data Table

Full-featured data table with sorting, searching, pagination, row selection, and column visibility.

Import

import { DataTable } from "poyraz-ui/organisms";
import type { DataTableColumnDef } from "poyraz-ui/organisms";

Full Featured

Table with search, sort, pagination, row selection, and column toggle.

Ali Yılmazali@example.comAdminactive
Ayşe Demirayse@example.comEditoractive
Mehmet Kayamehmet@example.comViewerinactive
Zeynep Çelikzeynep@example.comEditoractive
Can Öztürkcan@example.comAdminactive

Showing 1–5 of 12 results

1 / 3
const columns: DataTableColumnDef<User>[] = [
  { id: "name", header: "Name", accessorKey: "name", sortable: true, filterable: true },
  { id: "email", header: "Email", accessorKey: "email", sortable: true },
  { id: "role", header: "Role", accessorKey: "role", sortable: true, filterable: true },
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    sortable: true,
    cell: (row) => (
      <Badge variant={row.status === "active" ? "default" : "outline"}>
        {row.status}
      </Badge>
    ),
  },
];

<DataTable
  columns={columns}
  data={users}
  getRowId={(row) => row.id}
  pageSize={5}
  selectable
  columnToggle
  searchPlaceholder="Search users..."
/>

Core States

DataTableCore is dependency-light and renders populated, empty, loading and error states without toolbar or pagination policy.

Ali Yılmazali@example.comAdminactive
Ayşe Demirayse@example.comEditoractive
Mehmet Kayamehmet@example.comViewerinactive
No products match the filters.
<DataTableCore columns={columns} data={users} state="populated" stickyHeader />
<DataTableCore columns={columns} data={[]} state="loading" />
<DataTableCore columns={columns} data={[]} state="empty" />
<DataTableCore columns={columns} data={[]} state="error" />

Simple Table

Minimal table without selection or column toggle.

Keyboard$59120
Mouse$29340
Monitor$39945
Headset$89200
Webcam$4980
<DataTable
  columns={productColumns}
  data={products}
  pageSize={10}
  searchable={false}
  pagination={false}
/>
pnpm dlx shadcn@latest add @poyraz/data-table

Runtime dependencies

lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/button, @poyraz/input, @poyraz/badge, @poyraz/data-table-core

Installed files

@ui/organisms/data-table.tsx