Can't figure out how to use shadcn Checkbox in tanstack columnHelper header.

[davidshare]

I am new to using Tanstack, and trying to create a table with tanstack. The code for my column definition is below.

There are lots of errors, but this is the first one and I have not been able to figure it out:

'Checkbox' refers to a value, but is being used as a type here. Did you mean 'typeof Checkbox'?ts(2749)

Please I need help figuring this out and understanding it because I can't seem to make sense of the docs.

"use client";

import {createColumnHelper} from "@tanstack/react-table";
import {Permission} from "@/types/role";
import {Checkbox} from "@/components/ui/checkbox";
import {Badge} from "@/components/ui/badge";
import {Button} from "@/components/ui/button";
import {MoreHorizontal, Edit, Trash2, Shield} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {rolesData} from "@/data/roles-data";

const columnHelper = createColumnHelper<Permission>();

export const permissionColumns = [
  columnHelper.display({
    id: "select",
    header: ({table}) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({row}) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  }),
  columnHelper.accessor("name", {
    header: "Permission Name",
    cell: ({row}) => <div className="font-medium">{row.getValue("name")}</div>,
  }),
  columnHelper.accessor("description", {
    header: "Description",
    cell: ({row}) => (
      <div className="max-w-[300px] truncate">
        {row.getValue("description")}
      </div>
    ),
  }),
  columnHelper.accessor("category", {
    header: "Category",
    cell: ({row}) => {
      const category = row.getValue("category") as string;
      const categoryColors: Record<string, string> = {
        content: "bg-[#8A2BE2]",
        users: "bg-[#2272FF]",
        settings: "bg-[#00FFFF]",
        analytics: "bg-[#FFA500]",
      };

      return (
        <Badge className={categoryColors[category] || "bg-gray-600"}>
          {category}
        </Badge>
      );
    },
  }),
  columnHelper.display({
    id: "roles",
    header: "Assigned Roles",
    cell: ({row}) => {
      const permissionId = row.original.id;
      const roleCount = rolesData.filter((role) =>
        role.permissions.includes(permissionId)
      ).length;
      return (
        <div className="flex items-center">
          <Shield className="h-3 w-3 mr-1 text-[#B0B0B0]" />
          {roleCount} role{roleCount !== 1 ? "s" : ""}
        </div>
      );
    },
  }),
  columnHelper.accessor("createdAt", {
    header: "Created",
    cell: ({row}) => {
      const date = new Date(row.getValue("createdAt"));
      return <div>{date.toLocaleDateString()}</div>;
    },
  }),
  columnHelper.display({
    id: "actions",
    cell: ({row}) => {
      const permission = row.original;

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="w-8 h-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="bg-black border-gray-800">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              className="text-white cursor-pointer hover:bg-[#0B0D2A]"
              onClick={() => navigator.clipboard.writeText(permission.id)}
            >
              Copy ID
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-white cursor-pointer hover:bg-[#0B0D2A]">
              <Edit className="w-4 h-4 mr-2" /> Edit
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-[#FF0099] cursor-pointer hover:bg-[#0B0D2A]">
              <Trash2 className="w-4 h-4 mr-2" /> Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  }),
];

[davidshare]

@ThePiyushAggarwal - you seem to have worked on something similar, can you help?

[ThePiyushAggarwal]

This seems to be a general TypeScript error issue. By looking at the code, the error doesn't make sense.
If you get a working online code with the whole repository, I might be able to help. But pretty busy these days. Weekdays are work. Weekends are vacations 😏.