Filtering — খোঁজা ও ছাঁকা

// ১. global filter — একটা সার্চ বক্স, সব কলামে মিলে
const [globalFilter, setGlobalFilter] = useState("");

// ২. column filter — প্রতিটি কলামে আলাদা শর্ত
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(), // ← এটা ছাড়া হবে না
  state: { globalFilter, columnFilters },
  onGlobalFilterChange: setGlobalFilter,
  onColumnFiltersChange: setColumnFilters,
});

export function GlobalFilter({
  table,
}: {
  table: Table<Product>;
}) {
  const value = table.getState().globalFilter ?? "";

  return (
    <div className="relative max-w-sm">
      <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        value={value}
        onChange={(e) => table.setGlobalFilter(e.target.value)}
        placeholder="পণ্য খুঁজুন…"
        className="pl-9"
      />
    </div>
  );
}

{
  accessorKey: "createdAt",
  enableGlobalFilter: false,   // ISO date সার্চে শুধু ধুলো মিলবে
},
{
  accessorKey: "isActive",
  enableGlobalFilter: false,   // boolean — অর্থহীন
},
{
  accessorKey: "name",
  enableGlobalFilter: true,    // ডিফল্ট
},
{
  id: "searchText",
  accessorFn: (row) =>
    `${row.name} ${row.category} ${row.id}`.toLowerCase(),
  enableGlobalFilter: true,
}

useReactTable({
  getFilteredRowModel: getFilteredRowModel(),
  globalFilterFn: "includesString",
  // বাংলা সম্পূর্ণ সংযুক্তাক্ষরে লেখা হয় — একটু সহজ করে দিই
  globalFilterFn: (row, columnId, filterValue) => {
    const cell = row.getValue(columnId);
    if (cell == null) return false;
    return String(cell)
      .normalize("NFC")
      .toLowerCase()
      .includes(String(filterValue).normalize("NFC").toLowerCase());
  },
})

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

// বর্তমান অবস্থা
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

// [
//   { id: "category", value: "books" },
//   { id: "stock", value: [10, 50] },     // range
//   { id: "name", value: "react" },
// ]

// কোনো কলামের filter বদলানো
table.getColumn("category")?.setFilterValue("books");

// সব filter মুছে ফেলা
table.resetColumnFilters();

// একটি column-এর মান পড়া
table.getColumn("category")?.getFilterValue();

{
  accessorKey: "category",
  filterFn: "equalsString",      // নির্দিষ্ট একটি মান
},
{
  accessorKey: "name",
  filterFn: "includesString",    // অংশ মিললেই হবে
},
{
  accessorKey: "price",
  filterFn: "inNumberRange",     // [min, max]
},
{
  accessorKey: "rating",
  filterFn: "inNumberRange",
},
{
  accessorKey: "isActive",
  filterFn: "equalsBoolean",
},
{
  id: "multi",
  filterFn: (row, columnId, filterValue: string[]) =>
    filterValue.includes(row.getValue(columnId)),
}

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

// বাংলায় খোঁজা
const searchBangla: FilterFn<any> = (row, columnId, filterValue) => {
  const value = String(filterValue ?? "").trim();
  if (!value) return true; // ফাঁকা হলে সব থাকবে

  const cell = String(row.getValue(columnId) ?? "")
    .normalize("NFC")
    .toLowerCase();
  const needle = value.normalize("NFC").toLowerCase();

  return cell.includes(needle);
};

// price: সবচেয়ে সস্তা আগে, বাকি বাদ
const priceAsc: FilterFn<number> = (row, columnId, filterValue: number) =>
  row.getValue<number>(columnId) === filterValue;

// ব্যবহার
{
  accessorKey: "name",
  filterFn: searchBangla,
}

export function CategoryFilter({
  table,
}: {
  table: Table<Product>;
}) {
  const column = table.getColumn("category");
  const value = column?.getFilterValue() as string | undefined;

  // faceted values — ডেটা থেকেই অপশন বের হবে
  const options = column?.getFacetedUniqueValues() ?? new Map();

  return (
    <Select
      value={value ?? "all"}
      onValueChange={(v) =>
        column?.setFilterValue(v === "all" ? undefined : v)
      }
    >
      <SelectTrigger className="w-40">
        <SelectValue placeholder="ক্যাটাগরি" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="all">সব</SelectItem>
        {[...options.keys()].map((option) => (
          <SelectItem key={option} value={String(option)}>
            {option} ({options.get(option)})
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export function PriceFilter({ table }: { table: Table<Product> }) {
  const column = table.getColumn("price");
  const range = (column?.getFilterValue() as [number, number]) ?? [0, 200000];

  return (
    <div className="flex items-center gap-2">
      <Input
        type="number"
        value={range[0]}
        onChange={(e) =>
          column?.setFilterValue([
            Number(e.target.value),
            range[1],
          ])
        }
        className="w-28"
      />
      <span className="text-muted-foreground">—</span>
      <Input
        type="number"
        value={range[1]}
        onChange={(e) =>
          column?.setFilterValue([
            range[0],
            Number(e.target.value),
          ])
        }
        className="w-28"
      />
    </div>
  );
}

const filteredCount = table.getFilteredRowModel().rows.length;
const totalCount = table.getCoreRowModel().rows.length;
const hasFilter = table.getState().globalFilter || table.getState().columnFilters.length > 0;

// UI
<footer className="border-t p-3 text-sm text-muted-foreground">
  {hasFilter ? (
    <div className="flex items-center gap-2">
      <span>
        {filteredCount}টির মধ্যে {filteredCount}টি পাওয়া গেছে
      </span>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => {
          table.setGlobalFilter("");
          table.resetColumnFilters();
        }}
      >
        filter মুছুন
      </Button>
    </div>
  ) : (
    <span>মোট {totalCount}টি পণ্য</span>
  )}
</footer>

import { useDeferredValue } from "react"; // React 19-এর সহজ সমাধান

export function DataTable({ data, columns }: DataTableProps) {
  const [input, setInput] = useState("");
  const deferredInput = useDeferredValue(input);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: { globalFilter: deferredInput },
    onGlobalFilterChange: setInput,
  });

  // input = তাৎক্ষণিক (টাইপ করলেই দেখাবে)
  // globalFilter = পিছনে (হিসাব ধীর, ফলাফল একটু পরে আসে)
}

// বাইরের লাইব্রেরি ব্যবহার করতে চাইলে
import { useDebounce } from "use-debounce";

const [input, setInput] = useState("");
const [debounced] = useDebounce(input, 300);

// globalFilter: debounced, onGlobalFilterChange: setInput

useReactTable({
  data: data?.items ?? [],
  getCoreRowModel: getCoreRowModel(),
  manualFiltering: true,   // filter API-তে যাচ্ছে
})