React mui-datatables自定义操作列如何获取当前行ID及完整行对象

你出现这个问题的原因是对customBodyRender回调的入参使用有误，该回调的第二个参数为表格元数据对象，包含了当前行的完整数据，修改方式如下：

步骤1：修改Actions列的customBodyRender逻辑 #

{
  name: "Actions",
  options: {
    filter: false,
    sort: false,
    empty: true,
    customBodyRender: (value, tableMeta) => {
      // 从元数据中获取当前行的ID，你定义的第一列为id字段，所以取rowData的第0位
      const currentRowId = tableMeta.rowData[0];
      // 若需要完整行对象，也可以直接通过行索引从原始shifts数组取值
      // const fullRowData = shifts[tableMeta.rowIndex];
      // const currentRowId = fullRowData.id;
      return (
        <>
          <IconButton aria-label="edit" onClick={() => {
            alert(`编辑操作，行ID：${currentRowId}`)
          }}>
            <EditIcon />
          </IconButton>
          <IconButton color="primary" aria-label="delete" style={{ marginLeft: "10px" }} onClick={() => {
            alert(`删除操作，行ID：${currentRowId}`)
          }}>
            <DeleteIcon />
          </IconButton>
        </>
      );
    }
  }
}

参数说明 #

customBodyRender回调实际接收3个入参：

• 第一个参数：当前列的单元格值，你当前的Actions列为自定义空列，所以该值为空
• 第二个参数：tableMeta元数据对象，核心属性包括：
  • rowData：当前行所有列的数值数组，顺序和你定义的columns顺序一致
  • rowIndex：当前行在表格中的索引值
  • columnIndex：当前列在表格中的索引值
• 第三个参数：单元格值更新方法，纯展示类的操作列不需要使用

注意：如果你的表格存在分页、排序、筛选等动态修改行顺序的功能，优先使用tableMeta.rowData取值，避免直接用索引取原始数组出现数据不匹配的问题。

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