Advanced Data Table

1"use client"
2 
3import { type ColumnDef } from "@tanstack/react-table"
4import { PlayIcon } from "lucide-react"
5 
6import { Badge } from "@/registry/ui/badge"
7import { Checkbox } from "@/registry/ui/checkbox"
8import { DataTable } from "@/registry/blocks/data-table-advanced/components/data-table"
9import { DataTableColumnHeader } from "@/registry/blocks/data-table-advanced/components/data-table-column-header"
10import { DataTableColumnCell } from "@/registry/blocks/data-table-advanced/components/data-table-column-cell"
11import { DataTableToolbar } from "@/registry/blocks/data-table-advanced/components/data-table-toolbar"
12import { DataTableSelectionToolbar } from "@/registry/blocks/data-table-advanced/components/data-table-selection-toolbar"
13import {
14  tasks,
15  statuses,
16  priorities,
17  labels,
18  type Task,
19} from "@/registry/blocks/data-table-advanced/lib/demo-data"
20 
21const columns: ColumnDef<Task>[] = [
22  {
23    id: "select",
24    header: ({ table }) => (
25      <div className="flex items-center justify-center">
26        <Checkbox
27          checked={
28            table.getIsAllPageRowsSelected() ||
29            (table.getIsSomePageRowsSelected() && "indeterminate")
30          }
31          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
32          aria-label="Select all"
33        />
34      </div>
35    ),
36    cell: ({ row }) => (
37      <div className="flex items-center justify-center">
38        <Checkbox
39          checked={row.getIsSelected()}
40          onCheckedChange={(value) => row.toggleSelected(!!value)}
41          aria-label="Select row"
42        />
43      </div>
44    ),
45    enableSorting: false,
46    enableHiding: false,
47  },
48  {
49    id: "very_long_column_name_that_should_truncate_in_the_view_options_menu_to_prevent_layout_breakage",
50    accessorFn: (row) => row.title,
51    header: ({ column }) => (
52      <DataTableColumnHeader column={column} title="Long Column" />
53    ),
54    cell: ({ row }) => (
55      <DataTableColumnCell
56        value={row.original.title}
57        className="w-[150px]"
58        label="Full Title"
59      />
60    ),
61  },
62  {
63    accessorKey: "id",
64    header: ({ column }) => (
65      <DataTableColumnHeader column={column} title="Task" />
66    ),
67    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
68    enableSorting: false,
69    enableHiding: false,
70  },
71  {
72    accessorKey: "title",
73    header: ({ column }) => (
74      <DataTableColumnHeader column={column} title="Title" />
75    ),
76    cell: ({ row }) => {
77// … truncated