ColumnDef — কলাম সংজ্ঞা

import type { ColumnDef } from "@tanstack/react-table";

const columns: ColumnDef<Product>[] = [
  // ১. accessorKey — ডেটার key-র নামই id
  { accessorKey: "name", header: "নাম" },

  // ২. accessorFn — হিসাব করে মান বানানো
  {
    id: "fullName",
    accessorFn: (row) => `${row.name} (${row.stock}টি)`,
    header: "বিবরণ",
  },

  // ৩. display column — ডেটা নেই, শুধু UI
  {
    id: "actions",
    header: "অ্যাকশন",
    cell: ({ row }) => <RowActions id={row.original.id} />,
  },
];

// সহজ: শুধু লেখা
{ accessorKey: "name", header: "পণ্যের নাম" }

// header-এ sorting button — সবচেয়ে common
{
  accessorKey: "price",
  header: ({ column }) => (
    <Button
      variant="ghost"
      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
    >
      মূল্য
      {column.getIsSorted() === "asc" && <ArrowUp className="ml-2 size-4" />}
      {column.getIsSorted() === "desc" && <ArrowDown className="ml-2 size-4" />}
    </Button>
  ),
}

// align করা
{
  accessorKey: "price",
  header: "মূল্য",
  meta: { align: "right" },
}

// meta পড়া — মূল রেন্ডারে
<TableHead className={cn(
  "px-4",
  header.column.columnDef.meta?.align === "right" && "text-right",
)}>

// accessorKey + cell একসাথে
{
  accessorKey: "price",
  header: "মূল্য",
  cell: ({ getValue }) => {
    const price = getValue<number>(); // ← টাইপ জানানো
    return (
      <span className="font-medium tabular-nums">
        {new Intl.NumberFormat("bn-BD", {
          style: "currency",
          currency: "BDT",
          maximumFractionDigits: 0,
        }).format(price)}
      </span>
    );
  },
}

// অন্য কলামের ডেটা দরকার হলে
{
  id: "status",
  accessorFn: (row) => (row.stock === 0 ? "out" : "in"),
  cell: ({ row, getValue }) => (
    <Badge variant={getValue() === "out" ? "destructive" : "default"}>
      {getValue() === "out" ? "স্টক শেষ" : row.original.name}
    </Badge>
  ),
}

// components/data-table/cell/price-cell.tsx
export function PriceCell({ value }: { value: number }) {
  const format = new Intl.NumberFormat("bn-BD", {
    style: "currency",
    currency: "BDT",
    maximumFractionDigits: 0,
  });

  return (
    <span className="font-medium tabular-nums">{format.format(value)}</span>
  );
}

// columns.tsx
{ accessorKey: "price", cell: ({ getValue }) => <PriceCell value={getValue<number>()} /> }

const columns: ColumnDef<Product>[] = [
  {
    accessorKey: "name",
    enableSorting: false,        // এ কলাম সাজানো যাবে না
    enableHiding: false,          // column visibility মেনুতে আসবে না
    enableGlobalFilter: false,   // global search-এ অংশ নেবে না
  },
  {
    id: "select",
    enableSorting: false,
    enableHiding: false,
    cell: ({ row }) => <Checkbox />,
  },
  {
    accessorKey: "createdAt",
    enableGlobalFilter: false,   // ISO date global search-এ noise দেয়
  },
];

import { createColumnHelper } from "@tanstack/react-table";

const helper = createColumnHelper<Product>();

export const columns = [
  helper.accessor("name", {
    header: "পণ্যের নাম",
  }),
  helper.accessor("price", {
    header: "মূল্য",
    cell: (info) => <PriceCell value={info.getValue()} />,
    //                         ↑ info.getValue(): number — টাইপ ইনফার
  }),
  helper.display({
    id: "actions",
    header: "অ্যাকশন",
    cell: ({ row }) => <RowActions id={row.original.id} />,
  }),
];

import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { ColumnDef } from "@tanstack/react-table";

import { PriceCell } from "./cell/price-cell";
import { RowActions } from "./cell/actions-cell";

const formatDate = new Intl.DateTimeFormat("bn-BD", {
  dateStyle: "medium",
});

export const columns: ColumnDef<Product>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        পণ্যের নাম
        {column.getIsSorted() === "asc" && <ArrowUp className="ml-2 size-4" />}
        {column.getIsSorted() === "desc" && <ArrowDown className="ml-2 size-4" />}
        {!column.getIsSorted() && <ChevronsUpDown className="ml-2 size-4 opacity-50" />}
      </Button>
    ),
    cell: ({ row }) => (
      <div className="flex flex-col">
        <span className="font-medium">{row.original.name}</span>
        <span className="text-xs text-muted-foreground">
          {row.original.id}
        </span>
      </div>
    ),
  },
  {
    accessorKey: "price",
    header: ({ column }) => (
      <Button
        variant="ghost"
        className="-ml-3"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        মূল্য
        {column.getIsSorted() === "asc" && <ArrowUp className="ml-2 size-4" />}
        {column.getIsSorted() === "desc" && <ArrowDown className="ml-2 size-4" />}
      </Button>
    ),
    cell: ({ getValue }) => <PriceCell value={getValue<number>()} />,
    meta: { align: "right" },
  },
  {
    accessorKey: "stock",
    header: "স্টক",
    cell: ({ getValue }) => {
      const stock = getValue<number>();
      return (
        <Badge variant={stock === 0 ? "destructive" : "secondary"}>
          {stock === 0 ? "শেষ" : `${stock}টি`}
        </Badge>
      );
    },
  },
  {
    accessorKey: "createdAt",
    header: "তারিখ",
    enableGlobalFilter: false,
    cell: ({ getValue }) => (
      <span className="text-muted-foreground">
        {formatDate.format(new Date(getValue<string>()))}
      </span>
    ),
  },
  {
    id: "actions",
    header: "অ্যাকশন",
    enableSorting: false,
    enableHiding: false,
    cell: ({ row }) => <RowActions id={row.original.id} />,
    meta: { align: "right" },
  },
];