如何在Backstage表格中添加下拉/嵌套菜单

Backstage的表格组件底层基于Material-UI（MUI）构建，因此可以借助MUI的Menu组件来实现每行的下拉菜单，以下是具体实现步骤：

1. 导入所需依赖 #

首先导入Backstage表格组件、MUI的菜单相关组件及状态管理Hook：

import { Table, TableColumn, TableProps } from '@backstage/core-components';
import { IconButton, Menu, MenuItem } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { useState } from 'react';

2. 定义表格列与行数据 #

假设你的行数据包含唯一标识（如id），先定义表格列，新增一列用于放置下拉按钮：

const columns: TableColumn<YourRowType>[] = [
  { key: 'name', title: '名称' },
  { key: 'status', title: '状态' },
  // 新增操作列
  { key: 'actions', title: '操作', width: 80 },
];

// 示例行数据，替换为你的实际数据
const rows: YourRowType[] = [
  { id: '1', name: '组件A', status: '正常' },
  { id: '2', name: '组件B', status: '待部署' },
];

3. 实现菜单状态管理与渲染 #

使用useState跟踪每行菜单的锚点元素（区分不同行的菜单状态），并在表格的renderCell中自定义操作列的内容：

const YourTableComponent = () => {
  // 存储每行菜单的锚点，key为行id，value为触发菜单的DOM元素
  const [anchorEls, setAnchorEls] = useState<Record<string, HTMLElement | null>>({});

  // 打开菜单
  const openMenu = (event: React.MouseEvent<HTMLElement>, rowId: string) => {
    setAnchorEls(prev => ({ ...prev, [rowId]: event.currentTarget }));
  };

  // 关闭菜单
  const closeMenu = (rowId: string) => {
    setAnchorEls(prev => ({ ...prev, [rowId]: null }));
  };

  // 定义菜单操作示例
  const handleEdit = (row: YourRowType) => {
    console.log('编辑行:', row);
    closeMenu(row.id);
  };

  const handleDelete = (row: YourRowType) => {
    console.log('删除行:', row);
    closeMenu(row.id);
  };

  const tableProps: TableProps<YourRowType> = {
    columns,
    rows,
    renderCell: ({ row, column }) => {
      if (column.key === 'actions') {
        return (
          <>
            <IconButton
              size="small"
              onClick={(e) => openMenu(e, row.id)}
            >
              <MoreVertIcon />
            </IconButton>
            <Menu
              anchorEl={anchorEls[row.id]}
              open={Boolean(anchorEls[row.id])}
              onClose={() => closeMenu(row.id)}
              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            >
              <MenuItem onClick={() => handleEdit(row)}>编辑</MenuItem>
              <MenuItem onClick={() => handleDelete(row)}>删除</MenuItem>
              {/* 可添加更多菜单项 */}
            </Menu>
          </>
        );
      }
      // 其他列默认渲染
      return row[column.key as keyof YourRowType];
    },
  };

  return <Table {...tableProps} />;
};

export default YourTableComponent;

关键说明 #

• 利用行数据的唯一id区分不同行的菜单状态，避免菜单互相干扰
• 通过MUI的Menu组件实现下拉菜单的弹出/关闭逻辑，搭配IconButton触发菜单
• 在renderCell中自定义操作列的渲染，将菜单与按钮绑定到对应行

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