Sorting — সাজানো

"use client";

import { useState } from "react";
import {
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  type SortingState,
} from "@tanstack/react-table";

export function DataTable({ data, columns }: DataTableProps) {
  const [sorting, setSorting] = useState<SortingState>([]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),

    state: { sorting },            // ← এই অবস্থা থেকেই সব হবে
    onSortingChange: setSorting,   // ← এখানেই state বদলাবে
  });

  // … rendering
}

type SortDirection = false | "asc" | "desc";
type SortingState = { id: string; desc: boolean }[];

// মানে কী
[]                                    // সাজানো নেই
[{ id: "price", desc: true }]          // মূল্য বড় থেকে ছোট
[{ id: "name", desc: false }]          // নাম অনুক্রমে

const [sorting, setSorting] = useState<SortingState>([
  { id: "price", desc: true },
]);

function SortableHeader({
  column,
  children,
}: {
  column: Column<Product>;
  children: React.ReactNode;
}) {
  const direction = column.getIsSorted();

  return (
    <Button
      variant="ghost"
      className="-ml-3 h-8"
      onClick={() => column.toggleSorting(direction === "asc")}
    >
      {children}
      {direction === "asc" && <ArrowUp className="ml-2 size-4" />}
      {direction === "desc" && <ArrowDown className="ml-2 size-4" />}
      {!direction && <ChevronsUpDown className="ml-2 size-4 opacity-50" />}
    </Button>
  );
}

// columns-এ ব্যবহার
{
  accessorKey: "price",
  header: ({ column }) => (
    <SortableHeader column={column}>মূল্য</SortableHeader>
  ),
}

const direction = column.getIsSorted();

// direction === false  → এখনো সাজানো হয়নি
// direction === "asc"  → ছোট থেকে বড়
// direction === "desc" → বড় থেকে ছোট

// বিকল্প — দুটো API
column.getSortDirection();       // "asc" | "desc" | false
column.getIsSorted();           // একই জিনিস

// isSorted বলে এখন এটাই active কিনা
column.getIsSorting();          // boolean

// তিন ধাপের cycle: none → asc → desc → none
onClick={() => column.toggleSorting(
  column.getIsSorted() === "asc",
)}

// শুধু asc/desc, কখনো none নয় — বার বার ক্লিক করলেও কাজ করে
onClick={() => column.toggleSorting(
  column.getIsSorted() === "asc",
  false,  // enableThirdState: false
)}

// enabled: true হলে shift-click দিয়ে একাধিক কলাম জোড়া হবে
const [sorting, setSorting] = useState<SortingState>([
  { id: "category", desc: false },
  { id: "price", desc: true },
]);

// ফলাফল: category অনুক্রমে, তার ভেতরে বড় মূল্য আগে

setSorting([
  { id: "category", desc: false }, // ১ম অগ্রাধিকার
  { id: "price", desc: true },     // ২য় অগ্রাধিকার
]);

// যে কলামে ক্লিক করলাম, সেটাই কী সাজানো হচ্ছে
const first = table.getState().sorting[0];
console.log(first?.id, first?.desc ? "desc" : "asc");

// নির্দিষ্ট কলামের অবস্থা
table.getColumn("price").getIsSorted();  // "desc"

// সব sorting মুছে ফেলা
table.resetSorting();
table.setSorting([]);

// ঐচ্ছিক কলাম বাদ দিয়ে সব ফেরত
table.toggleAllColumnsSorted(true);   // সব asc
table.toggleAllColumnsSorted(false);  // সব desc

{
  accessorKey: "name",
  header: "নাম",          // ← এখানে কোনো button নেই
  enableSorting: false,
}

{
  id: "actions",
  enableSorting: false,     // ← অ্যাকশন কলাম
}

{
  accessorKey: "createdAt",
  sortingFn: "datetime",     // নিজস্ব comparator
}

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

// রাশির কম্প্যারিশন — আগে/পরে না দেখে
const priceCompare: SortingFn<number> = (a, b, rowA, rowB) =>
  (a ?? 0) - (b ?? 0);

const columns: ColumnDef<Product>[] = [
  {
    accessorKey: "price",
    sortingFn: priceCompare,
  },

  // বাংলা ও ইংরেজি মিলিয়ে সাজানো
  {
    accessorKey: "name",
    sortingFn: (a, b, rowA) =>
      a.localeCompare(b, "bn-BD", { numeric: true, sensitivity: "base" }),
  },

  // stock: কম আগে? বেশি আগে?
  {
    accessorKey: "stock",
    sortingFn: (a, b) => (a ?? 0) - (b ?? 0),
  },
];

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

const dateCompare: SortingFn<string> = (a, b) =>
  new Date(a).getTime() - new Date(b).getTime();

// null/undefined সবসময় শেষে রাখতে (default)
useReactTable({ sortUndefined: "last" })

// সবসময় প্রথমে
useReactTable({ sortUndefined: "first" })

// অ্যাসাই-সহ ফাঁকা মান আলাদা করে
useReactTable({ sortUndefined: "last" })

"use client";

import { useSearchParams } from "next/navigation";
import { useState } from "react";

export function DataTable({ data, columns }: DataTableProps) {
  const searchParams = useSearchParams();
  const sortParam = searchParams.get("sort"); // "price:desc"

  const [sorting, setSorting] = useState<SortingState>(() =>
    sortParam
      ? [{
          id: sortParam.split(":")[0],
          desc: sortParam.split(":")[1] === "desc",
        }]
      : [],
  );

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: { sorting },
    onSortingChange: (updater) => {
      setSorting(updater);
      // এখানে URL update করুন
    },
  });
}