TanStackIntermediate
Table Columns — Definitions
accessorKey, header, cell-formatting — status badge, price ও date — বাংলায়।
5টি অংশবাংলা ভাষায়
src/components/products/product-columns.tsxtsx
tsx
"use client";
import { Badge } from "@/components/ui/badge";
export const productColumns: ColumnDef<Product>[] = [
{
accessorKey: "name",
header: "নাম",
cell: ({ row }) => (
<div>
<p className="font-medium">{row.original.name}</p>
<p className="line-clamp-1 max-w-60 text-xs text-muted-foreground">
{row.original.description}
</p>
</div>
),
},
{
accessorKey: "category",
header: "Category",
},
{
accessorKey: "price",
header: "দাম",
cell: ({ getValue }) => {
const price = getValue<number>();
return <span className="font-medium">{price.toFixed(2)} টাকা</span>;
},
},
{
accessorKey: "stock",
header: "Stock",
cell: ({ getValue }) => <span>{getValue<number>()}</span>,
},
{
accessorKey: "status",
header: "Status",
cell: ({ getValue }) => {
const status = getValue<Product["status"]>();
return (
<Badge variant={status === "active" ? "success" : "secondary"}>
{status}
</Badge>
);
},
},
{
accessorKey: "createdAt",
header: "তৈরির তারিখ",
cell: ({ getValue }) =>
new Date(getValue<string>()).toLocaleDateString("bn-BD"),
},
];প্রতিটি অংশ বুঝি
| অংশ | কাজ |
|---|---|
accessorKey | row-এর কোন property পড়বে |
header | column title (string বা component) |
cell | প্রতিটি cell কীভাবে render হবে |
row.original | সেই row-এর সম্পূর্ণ Product object |
getValue<number>() | accessorKey-এর মান type-সহ |
Actions column আলাদা রেখেছি (শুধু client context দরকার) — ওটা পরের অধ্যায়ে।
Formatting কোথায়
দাম/তারিখ-এর মতো formatting cell-এ রাখা ভালো — data মডেল কাঁচা থাকে। কারণ sort অথবা export তখন raw value-র উপর নির্ভর করতে পারে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।