{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"data-grid-column-header","type":"registry:ui","title":"Data Grid Column Header","description":"","dependencies":["@tanstack/react-table"],"registryDependencies":["button","@neui/data-grid","dropdown-menu"],"files":[{"path":"data-grid-column-header.tsx","type":"registry:ui","content":"\"use client\"\n\"use no memo\"\n\nimport { memo, useMemo } from \"react\"\nimport type { HTMLAttributes, ReactNode } from \"react\"\nimport {\n  getColumnHeaderLabel,\n  useDataGrid,\n} from \"@/components/neui/data-grid/data-grid\"\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface DataGridColumnHeaderProps<\n  TData,\n  TValue,\n> extends HTMLAttributes<HTMLDivElement> {\n  column: Column<TData, TValue>\n  /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */\n  title?: string\n  icon?: ReactNode\n  /** Reserved; pin controls are gated by tableLayout.columnsPinnable + column.getCanPin(). */\n  pinnable?: boolean\n  filter?: ReactNode\n  visibility?: boolean\n}\n\nfunction DataGridColumnHeaderInner<TData, TValue>({\n  column,\n  title,\n  icon,\n  className,\n  filter,\n  visibility = false,\n}: DataGridColumnHeaderProps<TData, TValue>) {\n  const { isLoading, table, props } = useDataGrid()\n  const resolvedTitle = title ?? getColumnHeaderLabel(column)\n\n  // TanStack's columnOrder defaults to [] until a consumer seeds it; fall\n  // back to the definition order so Move Left/Right work out of the box.\n  const columnOrderState = table.getState().columnOrder\n  const columnOrder =\n    columnOrderState.length > 0\n      ? columnOrderState\n      : table.getAllLeafColumns().map((leafColumn) => leafColumn.id)\n  const columnVisibilityKey =\n    props.tableLayout?.columnsVisibility && visibility\n      ? JSON.stringify(table.getState().columnVisibility)\n      : \"\"\n  const isSorted = column.getIsSorted()\n  const isPinned = column.getIsPinned()\n  const canSort = column.getCanSort()\n  const canPin = column.getCanPin()\n  const canResize = column.getCanResize()\n\n  const columnIndex = columnOrder.indexOf(column.id)\n  const canMoveLeft = columnIndex > 0\n  const canMoveRight = columnIndex < columnOrder.length - 1\n\n  const handleSort = () => {\n    if (isSorted === \"asc\") {\n      column.toggleSorting(true)\n    } else if (isSorted === \"desc\") {\n      column.clearSorting()\n    } else {\n      column.toggleSorting(false)\n    }\n  }\n\n  const headerLabelClassName = cn(\n    \"text-secondary-foreground/80 inline-flex h-full items-center gap-1.5 font-normal [&_svg]:opacity-60 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5\",\n    className\n  )\n\n  const headerButtonClassName = cn(\n    \"text-secondary-foreground/80 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground px-2 font-normal h-6 rounded-full\",\n    className\n  )\n\n  const sortIcon =\n    canSort &&\n    (isSorted === \"desc\" ? (\n      <IconPlaceholder\n        lucide=\"ArrowDownIcon\"\n        tabler=\"IconArrowDown\"\n        hugeicons=\"ArrowDown02Icon\"\n        phosphor=\"ArrowDownIcon\"\n        remixicon=\"RiArrowDownLine\"\n        className=\"size-3.25\"\n        aria-hidden=\"true\"\n      />\n    ) : isSorted === \"asc\" ? (\n      <IconPlaceholder\n        lucide=\"ArrowUpIcon\"\n        tabler=\"IconArrowUp\"\n        hugeicons=\"ArrowUp02Icon\"\n        phosphor=\"ArrowUpIcon\"\n        remixicon=\"RiArrowUpLine\"\n        className=\"size-3.25\"\n        aria-hidden=\"true\"\n      />\n    ) : (\n      <IconPlaceholder\n        lucide=\"ChevronsUpDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretUpDownIcon\"\n        remixicon=\"RiExpandUpDownLine\"\n        className=\"mt-px size-3.25\"\n        aria-hidden=\"true\"\n      />\n    ))\n\n  const hasControls =\n    props.tableLayout?.columnsMovable ||\n    (props.tableLayout?.columnsVisibility && visibility) ||\n    (props.tableLayout?.columnsPinnable && canPin) ||\n    filter\n\n  const menuItems = useMemo(() => {\n    const items: ReactNode[] = []\n    let hasPreviousSection = false\n\n    // Filter section\n    if (filter) {\n      items.push(\n        <DropdownMenuGroup key=\"group-filter\">\n          <DropdownMenuLabel key=\"filter\">{filter}</DropdownMenuLabel>\n        </DropdownMenuGroup>\n      )\n      hasPreviousSection = true\n    }\n\n    // Sort section\n    if (canSort) {\n      if (hasPreviousSection) {\n        items.push(<DropdownMenuSeparator key=\"sep-sort\" />)\n      }\n      items.push(\n        <DropdownMenuItem\n          key=\"sort-asc\"\n          onClick={() => {\n            if (isSorted === \"asc\") {\n              column.clearSorting()\n            } else {\n              column.toggleSorting(false)\n            }\n          }}\n          disabled={!canSort}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUp02Icon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n            className=\"size-3.5!\"\n          />\n          <span className=\"grow\">Asc</span>\n          {isSorted === \"asc\" && (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"text-primary size-4 opacity-100!\"\n            />\n          )}\n        </DropdownMenuItem>,\n        <DropdownMenuItem\n          key=\"sort-desc\"\n          onClick={() => {\n            if (isSorted === \"desc\") {\n              column.clearSorting()\n            } else {\n              column.toggleSorting(true)\n            }\n          }}\n          disabled={!canSort}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDown02Icon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n            className=\"size-3.5!\"\n          />\n          <span className=\"grow\">Desc</span>\n          {isSorted === \"desc\" && (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"text-primary size-4 opacity-100!\"\n            />\n          )}\n        </DropdownMenuItem>\n      )\n      hasPreviousSection = true\n    }\n\n    // Pin section\n    if (props.tableLayout?.columnsPinnable && canPin) {\n      if (hasPreviousSection) {\n        items.push(<DropdownMenuSeparator key=\"sep-pin\" />)\n      }\n      items.push(\n        <DropdownMenuItem\n          key=\"pin-left\"\n          onClick={() => column.pin(isPinned === \"left\" ? false : \"left\")}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowLeftToLineIcon\"\n            tabler=\"IconArrowBarToLeft\"\n            hugeicons=\"ArrowLeft03Icon\"\n            phosphor=\"ArrowLineLeftIcon\"\n            remixicon=\"RiContractLeftLine\"\n            className=\"size-3.5!\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"grow\">Pin to left</span>\n          {isPinned === \"left\" && (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"text-primary size-4 opacity-100!\"\n            />\n          )}\n        </DropdownMenuItem>,\n        <DropdownMenuItem\n          key=\"pin-right\"\n          onClick={() => column.pin(isPinned === \"right\" ? false : \"right\")}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowRightToLineIcon\"\n            tabler=\"IconArrowBarToRight\"\n            hugeicons=\"ArrowRight03Icon\"\n            phosphor=\"ArrowLineRightIcon\"\n            remixicon=\"RiContractRightLine\"\n            className=\"size-3.5!\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"grow\">Pin to right</span>\n          {isPinned === \"right\" && (\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n              className=\"text-primary size-4 opacity-100!\"\n            />\n          )}\n        </DropdownMenuItem>\n      )\n      hasPreviousSection = true\n    }\n\n    // Move section\n    if (props.tableLayout?.columnsMovable) {\n      if (hasPreviousSection) {\n        items.push(<DropdownMenuSeparator key=\"sep-move\" />)\n      }\n      items.push(\n        <DropdownMenuItem\n          key=\"move-left\"\n          onClick={() => {\n            if (columnIndex > 0) {\n              const newOrder = [...columnOrder]\n              const [movedColumn] = newOrder.splice(columnIndex, 1)\n              newOrder.splice(columnIndex - 1, 0, movedColumn)\n              table.setColumnOrder(newOrder)\n            }\n          }}\n          disabled={!canMoveLeft || isPinned !== false}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            className=\"size-3.5!\"\n            aria-hidden=\"true\"\n          />\n          <span>Move to Left</span>\n        </DropdownMenuItem>,\n        <DropdownMenuItem\n          key=\"move-right\"\n          onClick={() => {\n            if (columnIndex < columnOrder.length - 1) {\n              const newOrder = [...columnOrder]\n              const [movedColumn] = newOrder.splice(columnIndex, 1)\n              newOrder.splice(columnIndex + 1, 0, movedColumn)\n              table.setColumnOrder(newOrder)\n            }\n          }}\n          disabled={!canMoveRight || isPinned !== false}\n        >\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            className=\"size-3.5!\"\n            aria-hidden=\"true\"\n          />\n          <span>Move to Right</span>\n        </DropdownMenuItem>\n      )\n      hasPreviousSection = true\n    }\n\n    // Visibility section\n    if (props.tableLayout?.columnsVisibility && visibility) {\n      if (hasPreviousSection) {\n        items.push(<DropdownMenuSeparator key=\"sep-visibility\" />)\n      }\n      items.push(\n        <DropdownMenuSub key=\"visibility\">\n          <DropdownMenuSubTrigger>\n            <IconPlaceholder\n              lucide=\"Settings2Icon\"\n              tabler=\"IconAdjustmentsHorizontal\"\n              hugeicons=\"SlidersHorizontalIcon\"\n              phosphor=\"SlidersHorizontalIcon\"\n              remixicon=\"RiEqualizer2Line\"\n              className=\"size-3.5!\"\n            />\n            <span>Columns</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            {table\n              .getAllColumns()\n              .filter((col) => col.getCanHide())\n              .map((col) => (\n                <DropdownMenuCheckboxItem\n                  key={col.id}\n                  checked={col.getIsVisible()}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) => col.toggleVisibility(!!value)}\n                  className=\"capitalize\"\n                >\n                  {getColumnHeaderLabel(col)}\n                </DropdownMenuCheckboxItem>\n              ))}\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )\n    }\n\n    return items\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    filter,\n    canSort,\n    isSorted,\n    column,\n    props.tableLayout?.columnsPinnable,\n    props.tableLayout?.columnsMovable,\n    props.tableLayout?.columnsVisibility,\n    canPin,\n    isPinned,\n    canMoveLeft,\n    canMoveRight,\n    visibility,\n    table,\n    columnIndex,\n    columnOrder,\n    columnVisibilityKey, // Needed to update checkbox states when visibility changes\n  ])\n\n  if (hasControls) {\n    return (\n      <div className=\"-ms-2 flex h-full items-center justify-between gap-1.5\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              className={headerButtonClassName}\n              disabled={isLoading}\n            >\n              {icon && icon}\n              {resolvedTitle}\n              {sortIcon}\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-40\" align=\"start\">\n            {menuItems}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {props.tableLayout?.columnsPinnable && canPin && isPinned && (\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            className=\"rounded-full -me-1 size-7\"\n            onClick={() => column.pin(false)}\n            aria-label={`Unpin ${resolvedTitle} column`}\n            title={`Unpin ${resolvedTitle} column`}\n          >\n            <IconPlaceholder\n              lucide=\"PinOffIcon\"\n              tabler=\"IconPinnedOff\"\n              hugeicons=\"PinOffIcon\"\n              phosphor=\"PushPinSlashIcon\"\n              remixicon=\"RiUnpinLine\"\n              className=\"size-3.5! opacity-50!\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        )}\n      </div>\n    )\n  }\n\n  if (canSort || (props.tableLayout?.columnsResizable && canResize)) {\n    return (\n      <div className=\"-ms-2 flex h-full items-center\">\n        <Button\n          variant=\"ghost\"\n          className={headerButtonClassName}\n          disabled={isLoading}\n          onClick={handleSort}\n        >\n          {icon && icon}\n          {resolvedTitle}\n          {sortIcon}\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className={headerLabelClassName}>\n      {icon && icon}\n      {resolvedTitle}\n    </div>\n  )\n}\n\nconst DataGridColumnHeader = memo(\n  DataGridColumnHeaderInner\n) as typeof DataGridColumnHeaderInner\n\nexport { DataGridColumnHeader, type DataGridColumnHeaderProps }","target":"components/neui/data-grid/data-grid-column-header.tsx"}]}