如何将函数作为Props传入Shadcn UI Table实现行操作

1. 定义状态管理待删除数据与模态框显示 #

在表格组件内，用useState存储要删除的行数据，以及控制删除确认模态框的显示状态：

import { useState } from 'react';
// 替换成你的行数据类型定义
import type { RowDataType } from './your-types-file';

const YourTable = () => {
  // 存储待删除的行数据
  const [targetRow, setTargetRow] = useState<RowDataType | null>(null);
  // 控制删除模态框的开闭
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);

  // ...表格数据、其他逻辑
};

2. 编写自定义删除处理函数 #

实现两个核心函数：一个用于触发删除流程（打开模态框并缓存行数据），另一个用于确认删除时调用API并更新表格：

// 触发删除流程：缓存行数据+打开模态框
const handleDeleteTrigger = (row: RowDataType) => {
  setTargetRow(row);
  setIsDeleteModalOpen(true);
};

// 确认删除：调用API并更新表格数据
const confirmDelete = async () => {
  if (!targetRow) return;
  
  try {
    // 调用后端删除API，替换成你的接口地址
    await fetch(`/api/resources/${targetRow.id}`, { method: 'DELETE' });
    // 更新表格数据（从数据源中移除已删除的行）
    setTableData(prevData => prevData.filter(item => item.id !== targetRow.id));
    // 关闭模态框并清空缓存
    setIsDeleteModalOpen(false);
    setTargetRow(null);
  } catch (error) {
    console.error('删除失败:', error);
    // 这里可添加错误提示逻辑
  }
};

3. 在操作列中绑定自定义函数 #

在Shadcn Data Table的操作列配置里，给下拉菜单的删除选项绑定handleDeleteTrigger，传入当前行数据：

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { TableCell } from '@/components/ui/table';

// 表格列配置
const columns = [
  // ...其他列定义
  {
    accessorKey: 'actions',
    header: '操作',
    cell: ({ row }) => {
      const rowData = row.original as RowDataType;
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm">操作</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {/* 你已实现的复制功能 */}
            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(rowData.id)}>
              复制ID
            </DropdownMenuItem>
            {/* 新增的删除选项，绑定自定义函数 */}
            <DropdownMenuItem onClick={() => handleDeleteTrigger(rowData)} className="text-red-600">
              删除
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];

4. 实现删除确认模态框 #

在组件渲染部分添加模态框，根据状态控制显示，确认后调用confirmDelete：

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';

// ...组件内部渲染逻辑
return (
  <>
    {/* 你的Shadcn Data Table组件 */}
    <DataTable columns={columns} data={tableData} />

    {/* 删除确认模态框 */}
    <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>确认删除</DialogTitle>
        </DialogHeader>
        <p>确定要删除「{targetRow?.title || targetRow?.id}」吗？此操作无法撤销。</p>
        <DialogFooter>
          <Button variant="ghost" onClick={() => setIsDeleteModalOpen(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={confirmDelete}>
            删除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </>
);

内容的提问来源于stack exchange，提问作者PaoloAgVa