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.

Name	Email	Role	Status
Ali Yılmaz	ali@example.com	Admin	active
Ayşe Demir	ayse@example.com	Editor	active
Mehmet Kaya	mehmet@example.com	Viewer	inactive
Zeynep Çelik	zeynep@example.com	Editor	active
Can Öztürk	can@example.com	Admin	active

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..."
/>

Simple Table

Minimal table without selection or column toggle.

Product	Price	Stock
Keyboard	$59	120
Mouse	$29	340
Monitor	$399	45
Headset	$89	200
Webcam	$49	80

<DataTable
  columns={productColumns}
  data={products}
  pageSize={10}
  searchable={false}
  pagination={false}
/>