ইনস্টলেশন ও প্রজেক্ট সেটআপ

pnpm add @tanstack/react-table

npx shadcn@latest add table checkbox dropdown-menu command input select popover

// components/ui/table.tsx — shadcn থেকে পাওয়া
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

// types/product.ts
export type Product = {
  id: string;
  name: string;
  category: "electronics" | "clothing" | "books";
  price: number;
  stock: number;
  rating: number;
  createdAt: string; // ISO string
  isActive: boolean;
};

// lib/mock-products.ts
export const mockProducts: Product[] = [
  {
    id: "p-01",
    name: "Lenovo ThinkPad X1",
    category: "electronics",
    price: 185000,
    stock: 12,
    rating: 4.8,
    createdAt: "2025-01-12T08:00:00.000Z",
    isActive: true,
  },
  {
    id: "p-02",
    name: "জামালপুর শাড়ি",
    category: "clothing",
    price: 2450,
    stock: 0,
    rating: 4.1,
    createdAt: "2025-02-03T10:30:00.000Z",
    isActive: false,
  },
  // … আরও ১০টা row
];

components/
  data-table/
    data-table.tsx          ← পুরো টেবিল (state + সব row model)
    data-table-toolbar.tsx  ← search, filter, column visibility
    columns.tsx             ← ColumnDef অ্যারে
    cell/                   ← নিজস্ব cell রেন্ডারার
      price-cell.tsx
      actions-cell.tsx
    row-selection.tsx       ← header checkbox
    pagination.tsx          ← পেজ কন্ট্রোল
lib/
  mock-products.ts
types/
  product.ts

"use client";

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  type ColumnDef,
} from "@tanstack/react-table";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import type { Product } from "@/types/product";
import { mockProducts } from "@/lib/mock-products";

export function DataTable() {
  const columns: ColumnDef<Product>[] = [
    { accessorKey: "name", header: "পণ্যের নাম" },
    { accessorKey: "price", header: "মূল্য" },
  ];

  const table = useReactTable({
    data: mockProducts,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <Table>
      <TableHeader>
        {table.getHeaderGroups().map((group) => (
          <TableRow key={group.id}>
            {group.headers.map((header) => (
              <TableHead key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext(),
                    )}
              </TableHead>
            ))}
          </TableRow>
        ))}
      </TableHeader>

      <TableBody>
        {table.getRowModel().rows.map((row) => (
          <TableRow key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <TableCell key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

import { DataTable } from "@/components/data-table/data-table";

export default function Page() {
  return (
    <main className="p-6">
      <h1 className="mb-4 text-2xl font-semibold">পণ্য</h1>
      <DataTable />
    </main>
  );
}