Block

Data Table

Interactive employee directory with search, pagination, row selection, column visibility, and status badges. Composes DataTable with Badge, Checkbox, Pagination, Button (icons), and Input from the design system.

Uses:DataTableBadgeCheckboxPaginationButtonInput

Playground

Preview
Employee directory
Employee directory
Jordan AlvarezSenior EngineerProductActiveMar 15, 2021
Morgan LeeProduct ManagerProductActiveJul 1, 2020
Taylor KimDesignerDesignOn LeaveJan 10, 2022
Avery MitchellQA EngineerProductActiveNov 20, 2021
Casey ThompsonData AnalystDataInactiveMay 5, 2019
Riley JacksonFrontend EngineerProductActiveFeb 14, 2023
Sam PatelBackend EngineerPlatformActiveSep 1, 2022
Drew MartinezDevOps EngineerPlatformOn LeaveDec 17, 2020
0 of 12 rows selected

Configure

Yes
Yes
Yes
Yes

Code

import { DataTable, createColumnHelper, type ColumnDef } from "@/components/ui/data-table"
import { Badge } from "@/components/ui/badge"
type Employee = { id: string; name: string; role: string; department: string; status: string; joined: string }

const col = createColumnHelper<Employee>()
const columns: ColumnDef<Employee>[] = [
  col.accessor("name", { header: "Name" }),
  col.accessor("status", {
    header: "Status",
    cell: (info) => <Badge>{info.getValue()}</Badge>,
  }),
]

<DataTable
  columns={columns}
  data={employees}
  searchable="name"
  searchPlaceholder="Search by name…"
  pagination
  pageSize={8}
  selectable
  columnVisibility
  title="Employee directory"
/>