how to get data table row data/object using Splitbutton from primereact

I am pretty new to ReactJs & trying to make a project to learn. I am using PrimeReact UI Component Library. Everything is working fine but facing issue with accessing row data into functions.

Reference - https://www.primefaces.org/primereact/splitbutton/

If I click on action button then it is showing data

Please help me out in this. Thanks in Advance.

import { DataTable } from "primereact/datatable";
import { SplitButton } from "primereact/splitbutton";

/* split button items*/
const items = [
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
      /* I am getting {item:{label: 'Update',icon: 'pi pi-refresh',command: (e) },originalEvent:{...}} I have check originalEvent.target but no data is there */
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
    },
  },
];

/* data to show */
const griddata = [
  {
    name: "Tivaprasad Reddy",
    employeeId: "da9d1448-e1bd-4dad-9d57-dddf655c8ecf",
    mobile: "7099111460",
    Status: "SCREENING",
    addedBy: "anil kumar",
    addedOn: "2022-02-22T15:04:00.382+00:00",
  },
  {
    name: "Mukesh Bhutani",
    employeeId: "bcdefa7a-6c4d-4ac1-bd6d-025e88e08f62",
    mobile: "9582111515",
    Status: "SCREENING",
    addedBy: "anil kumar",
    addedOn: "2022-02-22T15:05:02.416+00:00",
  },
];
const splitBtn = (d) => {
  console.log(d); /* Getting data here*/
};
const buttonTemplate = (data) => (
  <>
    <SplitButton
      label="Action"
      className="p-button-sm"
      model={items}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);
return (
  <div>
    <div className="card">
      <DataTable
        value={griddata}
        scrollable
        scrollHeight="500px"
        responsiveLayout="scroll"
      >
        <Column field="name" header="Name"></Column>
        <Column field="Title" header="Title"></Column>
        <Column field="Status" header="Status"></Column>
        {/* <Column field="Action" header="Action" body={editTemplate}></Column> */}
        <Column field="Action" header="Action" body={buttonTemplate}></Column>
      </DataTable>
    </div>
  </div>
);

This confused me for a while too until I came to realize it was actually pretty simple :')

You just have to use the "rowData" parameter that comes in the callback function of the "body" property of the "Column" element.

Here <Column field="Action" header="Action" body={buttonTemplate}></Column> the "buttonTemplate" callback function is already carrying the row data and presenting it in the first parameter.

So convert the "items" variable into a function that passes over that "data" parameter to your items just like this

const items = (data) => ([
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(e, data);
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(e, data);
    },
  },
]);

const buttonTemplate = (data) => (
  <>
    <SplitButton
      label="Action"
      className="p-button-sm"
      model={items(data)}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);

I hope this has been helpful