React mui-datatables get row id

Question

I have a table that renders two buttons, delete and edit row.

On both of them I need to access the row Id.

I tried to use customBodyRender but it did not work, i have only the dataIndex and the rowIndex, but what I need is the actual row object value.

Updated question with the code

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>
        </>
      );
    }
  }
}];

This is how MUIDataTable is being used

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

can you add your code in the question ?

Shyam
– Shyam

2021-08-28 14:59:24 +00:00
Commented Aug 28, 2021 at 14:59 — Shyam
– Shyam, Commented Aug 28, 2021 at 14:59
Yes, of course, added

Leonardo Dalcegio
– Leonardo Dalcegio

2021-08-28 16:18:03 +00:00
Commented Aug 28, 2021 at 16:18 — Leonardo Dalcegio
– Leonardo Dalcegio, Commented Aug 28, 2021 at 16:18

Wahiduzzaman Hridoy · Accepted Answer · 2021-08-31 06:07:45Z

You can use customBodyRenderLite instead of customBodyRender

The actual code would be like this if you want to access the actual data object.

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"));

Collectives™ on Stack Overflow

React mui-datatables get row id

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related