反应mui-dataTables获取行ID

Question

我有一个表可以呈现两个按钮，即删除和编辑行。 我两个都需要访问行ID。

i我尝试使用customBodyRender，但它不起作用，我只有DatainDex和RowIndex，但我需要的是实际行对象值。 code theCode

的问题

const columns = [
{
  name: "id",
  label: "Id",
  options: {
    display: false
  }
},
{
  name: "name",
  label: "Name",
},
{
  name: "Actions",
  options: {
    filter: false,
    sort: false,
    empty: true,
    customBodyRender: (dataIndex, rowIndex) => {
      return (
        <>
          <IconButton aria-label="edit" onClick={() => {
            alert(dataIndex + " - " + rowIndex)
          }}>
            <EditIcon />
          </IconButton>
          <IconButton color="primary" aria-label="delete" style={{ marginLeft: "10px" }} onClick={() => {
            alert(dataIndex)
          }}>
            <DeleteIcon />
          </IconButton>
        </>
      );
    }
  }
}];

这是如何使用Muidatatable的方式

<MUIDataTable
      title={"Lista de Turnos"}
      data={shifts}
      columns={columns}
      options={{
        selectableRowsHideCheckboxes: true,
        textLabels: {
          body: {
            noMatch: 'Não foram encontrados registros para serem mostrados',
          },
        },
      }}
    />

您可以使用

custombodyrenderlite

而不是自定义bodyrender

Answer 1

如果您想访问实际数据对象，则实际代码将是这样。

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import Button from '@material-ui/core/Button'

function App() {

  const data = [
    {id:1,name:'wahid'},
    {id:2,name:'jamil'},
    {id:3,name:'marin'},
  ];

  const columns = [
    {
      name: "id",
      label: "Id",
      options: {
        display: false
      }
    },
    {
      name: "name",
      label: "Name",
    },
    {
      name: "Actions",
      options: {
        filter: false,
        sort: false,
        customBodyRenderLite: (dataIndex, rowIndex) => {
          return (
              <Button aria-label="edit" onClick={() => {
                alert(data[dataIndex].name)
              }}>
                Button
              </Button>
              
          );
       }
    },
    
  }
  ];


  return (
    <React.Fragment>
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
          options={{
            selectableRowsHideCheckboxes: true,
            textLabels: {
              body: {
                noMatch: 'Não foram encontrados registros para serem mostrados',
              },
            },
          }}
      />
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));