Column Management — visibility, order, pinning ও sizing

import { useState } from "react";
import type {
  ColumnOrderState,
  ColumnPinningState,
  ColumnSizingState,
  VisibilityState,
} from "@tanstack/react-table";

const [columnVisibility, setColumnVisibility] =
  useState<VisibilityState>({});
const [columnOrder, setColumnOrder] =
  useState<ColumnOrderState>([]);
const [columnPinning, setColumnPinning] =
  useState<ColumnPinningState>({ left: [], right: [] });
const [columnSizing, setColumnSizing] =
  useState<ColumnSizingState>({});

// নির্দিষ্ট কলাম লুকানো
table.getColumn("createdAt")?.toggleVisibility(false);
table.getColumn("createdAt")?.setVisibility(true);
table.getColumn("createdAt")?.getIsVisible();   // boolean

// সব ফিরিয়ে আনা
table.resetColumnVisibility();
table.getVisibleLeafColumns().length;
table.getAllLeafColumns().length;
table.getCenterVisibleLeafColumns().length;

import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ColumnVisibility({
  table,
}: {
  table: Table<Product>;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">
          <Settings2 className="mr-2 size-4" />
          কলাম
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        {table
          .getAllLeafColumns()
          .filter((column) => column.getCanHide())
          .map((column) => (
            <DropdownMenuCheckboxItem
              key={column.id}
              checked={column.getIsVisible()}
              onCheckedChange={(checked) =>
                column.toggleVisibility(checked === true)
              }
            >
              {columnLabel(column.id)}
            </DropdownMenuCheckboxItem>
          ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

// ম্যানুয়ালি সাজানো
table.setColumnOrder(["select", "name", "price", "actions"]);
table.getState().columnOrder;

// একটি কলাম সরানো
const order = table.getState().columnOrder;
const next = order.filter((id) => id !== "price");
next.splice(2, 0, "price");
table.setColumnOrder(next);

// ডিফল্ট ক্রমে ফেরা
table.resetColumnOrder();

// বাঁয়ে / ডানে আটকানো
table.getColumn("actions")?.pin("right");
table.getColumn("name")?.pin("left");

table.getColumn("actions")?.pin();     // unpin (কোনো দিকেও নয়)
table.getColumn("actions")?.getIsPinned();          // false | "left" | "right"
table.getColumn("actions")?.getIsLastColumn();
table.getColumn("actions")?.getIsFirstColumn();

// state দেখা
table.getState().columnPinning;
// { left: ["select", "name"], right: ["actions"] }

// রেন্ডারে পাশের কলামে sticky class
<TableHead
  className={cn(
    "bg-background",
    header.column.getIsLastColumn() && "sticky right-0 z-20",
    header.column.getIsPinned() && "shadow-[inset_-1px_0_0_0_currentColor]",
  )}
>

// body cell-এও একই কাজ
<TableCell
  className={cn(
    "bg-background",
    cell.column.getIsLastColumn() && "sticky right-0 z-10",
  )}
>
  …
</TableCell>

<DropdownMenuSub>
  <DropdownMenuSubTrigger>
    {cell.column.getIsPinned() ? "আটকানো আছে" : "আটকানো নেই"}
  </DropdownMenuSubTrigger>
  <DropdownMenuPortal>
    <DropdownMenuSubContent>
      <DropdownMenuItem onClick={() => cell.column.pin("left")}>
        <PinIcon className="mr-2 size-4" />
        বাঁয়ে আটকান
      </DropdownMenuItem>
      <DropdownMenuItem onClick={() => cell.column.pin("right")}>
        <PinIcon className="mr-2 size-4 rotate-180" />
        ডানে আটকান
      </DropdownMenuItem>
      {cell.column.getIsPinned() && (
        <DropdownMenuItem onClick={() => cell.column.pin(false)}>
          <PinOffIcon className="mr-2 size-4" />
          আটকানো সরান
        </DropdownMenuItem>
      )}
    </DropdownMenuSubContent>
  </DropdownMenuPortal>
</DropdownMenuSub>

// ডিফল্ট প্রস্থ (row model অনুযায়ী)
columnSizing: {
  minSize: 20,     // সর্বনিম্ন ২০px
  maxSize: 1000,   // সর্বোচ্চ ১০০০px
}

// প্রতি কলামে ডিফল্ট
{ accessorKey: "name", size: 280, minSize: 150, maxSize: 600 }

// resize mode
columnResizeMode: "onChange", // টানা গ্লাইস মুভ হচ্ছে (default)
columnResizeMode: "onEnd",   // ছাড়লে হিসাব হয় — বেশি smooth

// state
column.getSize()          // বর্তমান px
column.setSize(220)
column.getIsResizing()
table.setColumnSizing({ price: 220 })
table.resetColumnSizing();

// শুধু ঐ কলামের পাশে একটা পাতলা handle
export function ResizeHandle({
  header,
}: {
  header: Header<unknown, unknown>;
}) {
  const { column } = header;
  const isResizing = column.getIsResizing();

  return (
    <div
      onMouseDown={header.getResizeHandler()}
      onTouchStart={header.getResizeHandler()}
      role="separator"
      aria-orientation="vertical"
      aria-label={`${column.id} প্রস্থ বদলান`}
      className={cn(
        "absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none select-none",
        "after:absolute after:right-0 after:h-full after:w-1",
        isResizing ? "after:bg-primary" : "after:bg-transparent",
        "hover:after:bg-primary/50",
      )}
      style={{
        left: isPinning(column.id) ? `${column.getSize()}px` : undefined,
        right: isPinnedRight(column.id) ? `-${column.getSize()}px` : undefined,
      }}
    />
  );
}

// TableHead-এর মধ্যে
export function TableHead({ children, column }: HeaderCellProps) {
  return (
    <div className="relative">
      {children}
      {column.getCanResize() && <ResizeHandle column={column} />}
    </div>
  );
}

// localStorage-এ সংরক্ষণ
const STORAGE_KEY = "products-table-layout";

function loadLayout() {
  if (typeof window === "undefined") return {};
  try {
    return JSON.parse(
      localStorage.getItem(STORAGE_KEY) ?? "{}",
    ) as TableLayout;
  } catch {
    return {};
  }
}

type TableLayout = {
  columnVisibility?: VisibilityState;
  columnOrder?: ColumnOrderState;
  columnPinning?: ColumnPinningState;
  columnSizing?: ColumnSizingState;
};

// component-এ
const [layout, setLayout] = useState<TableLayout>(loadLayout);

// বদলালে সংরক্ষণ
useEffect(() => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
}, [layout]);

// একসাথে save ও load
const table = useReactTable({
  // …
  onColumnVisibilityChange: setLayout1,
  onColumnOrderChange: setLayout2,
  onColumnPinningChange: setLayout3,
  onColumnSizingChange: setLayout4,

  state: {
    columnVisibility: layout.columnVisibility,
    columnOrder: layout.columnOrder,
    columnPinning: layout.columnPinning,
    columnSizing: layout.columnSizing,
  },
});

function resetLayout(table: Table<Product>) {
  table.resetColumnVisibility();
  table.resetColumnOrder();
  table.resetColumnPinning();
  table.resetColumnSizing();
}

// ডিফল্ট কিন্তু পরিবর্তিত কোনো কিছু আছে কিনা
const isDirty =
  Object.keys(table.getState().columnVisibility).length > 0 ||
  table.getState().columnOrder.length > 0 ||
  table.getState().columnPinning.left.length > 0 ||
  table.getState().columnPinning.right.length > 0 ||
  Object.keys(table.getState().columnSizing).length > 0;

// ১. default visibility অনুযায়ী শুধু ২-৩টি কলাম রাখুন
const [columnVisibility, setColumnVisibility] = useState({
  select: true,
  name: true,
  price: true,
  stock: false,
  createdAt: false,
});

// বড় স্ক্রিনে
useEffect(() => {
  if (window.innerWidth >= 768) setColumnVisibility({});
}, []);

// ২. মোবাইলে পাশ থেকে স্লাইড করে কলাম দেখান
<Sheet>
  <SheetTrigger asChild>
    <Button size="sm" variant="outline">কলাম দেখুন</Button>
  </SheetTrigger>
  <SheetContent side="right" className="w-72">
    {/* একই ColumnVisibility মেনু */}
  </SheetContent>
</Sheet>