Tech TutorBangla Web Documentation
Portfolio
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • TanStack Documentation42টি অধ্যায়
প্রযুক্তি নির্বাচন
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • Project Overview
  • Architecture
  • Folder Structure
  • Setup Next.js
  • Axios Setup
  • API Client
  • API Types
  • Query Install
  • Query Provider
  • Query Keys
  • Data Fetching
  • States
  • Devtools
  • Create Mutation
  • Update Mutation
  • Delete Mutation
  • Cache Invalidation
  • Optimistic Update
  • Pagination
  • Search
  • Filtering
  • Sorting
  • TanStack Table
  • Table Explore
  • Table Columns
  • Table Actions
  • React Hook Form
  • Zod Validation
  • Create Form
  • Edit Form
  • Dialog Modal
  • Delete Confirmation
  • Complete CRUD Flow
  • Full Integration
  • Error Handling
  • Loading States
  • Reusable Components
  • Production
  • Complete Project
  • Common Mistakes
  • Best Practices
  • Interview Q&A
  1. Docs
  2. TanStack
  3. Table Columns — Definitions
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"),
  },
];

প্রতিটি অংশ বুঝি

অংশকাজ
accessorKeyrow-এর কোন property পড়বে
headercolumn 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 করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।
আগেরTanStack Table — গভীরে (Explore)পরেরTable Actions — Edit ও Delete row
এই পেজে
Tech Tutor

বাংলায় ওয়েব ডেভেলপমেন্ট ডকুমেন্টেশন শিখুন — ধাপে ধাপে।

Homeসব ডকুমেন্টেশনQuick Startআমার নোটস

© 2026 Tech Tutor. বাংলায় শিখুন, বাংলায় গড়ুন।

mdanamolhasan1998@gmail.com