TanStackIntermediate

Table Actions — Edit ও Delete row

প্রতিটি row-এ action buttons — edit dialog খোলা, delete confirm — বাংলায়।

7টি অংশবাংলা ভাষায়

অ্যাকশন কলামে edit/delete button থাকে যার হুক upstream (dialog state) — তাই এর componentহীণ client-এ اتفق।

Actions cell (inside product-table.tsx)tsx

tsx

import { Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";

interface ProductTableProps {
  data: Product[];
  onEdit: (product: Product) => void;
  onDelete: (product: Product) => void;
}

actions ColumnDeftsx

tsx

{
  id: "actions",
  header: () => <span className="sr-only">Actions</span>,
  cell: ({ row }) => {
    const product = row.original;
    return (
      <div className="flex justify-end gap-1">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => onEdit(product)}
          aria-label={"Edit " + product.name}
        >
          <Pencil className="size-4" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => onDelete(product)}
          aria-label={"Delete " + product.name}
        >
          <Trash2 className="size-4 text-red-500" />
        </Button>
      </div>
    );
  },
}

কেন id:'actions'

এই column-এর কোনো accessorKey নেই — এটি pure UI. টান-টেবিলে এমন column-এর নাম id: "actions" দেওয়া convention।

Table একসাথে ব্যবহারtsx

tsx

<ProductTable
  data={data}
  columns={productColumns}
  onEdit={(p) => { setEditingProduct(p); setDialogOpen(true); }}
  onDelete={(p) => { setDeletingProduct(p); setDeleteOpen(true); }}
/>

Dialog state-মাত্র upward

এখানে onEdit/onDelete parent-এর state বদলায় — column ও dialog-কে আলাদা রাখা মানে table reusable থাকে (export/mobile view-এ একই column ব্যবহার করা যায়)।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।