Data Table

import type { ColumnDef } from "@tanstack/react-table"
import {
  DataTable,
  DataTableBadge,
  DataTableColumnHeader
} from "@/components/matos-ui/data-table"
import { BriefcaseBusiness, Building2, Hash, Mail } from "lucide-react"

type Employee = {
  id: string
  department: "Finance" | "HR" | "Marketing" | "Sales" | "Engineering"
  email: string
  employment: "Active" | "Inactive"
  firstName: string
  lastName: string
}

const columns: ColumnDef<Employee>[] = [
  {
    accessorKey: "id",
    header: ({ column }) => (
      <DataTableColumnHeader
        column={column}
        title="ID"
        icon={<Hash aria-hidden="true" />}
      />
    )
  },
  {
    accessorKey: "department",
    header: ({ column }) => (
      <DataTableColumnHeader
        column={column}
        title="Department"
        icon={<Building2 aria-hidden="true" />}
      />
    ),
    cell: ({ row }) => (
      <DataTableBadge tone="engineering">
        {row.getValue("department")}
      </DataTableBadge>
    )
  },
  {
    accessorKey: "email",
    header: ({ column }) => (
      <DataTableColumnHeader
        column={column}
        title="Email"
        icon={<Mail aria-hidden="true" />}
      />
    )
  },
  {
    accessorKey: "employment",
    header: ({ column }) => (
      <DataTableColumnHeader
        column={column}
        title="Employment"
        icon={<BriefcaseBusiness aria-hidden="true" />}
      />
    )
  }
]

<DataTable
  data={employees}
  columns={columns}
/>