How to pass table rowdata to another place in te webpage

Question

i need to pass the information of a row to another page, like a profile using the rowdata

this is the table

<DataTable
  value={mixMantenimiento}
  paginator
  responsiveLayout="scroll"
  stripedRows
  selectionMode="single"
  selection={selectedBus}
  onSelectionChange={(e) => setSelectedBus(e.value)}
  dataKey="id"
  header={header}
  globalFilter={globalFilter}
  paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink "
  currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords}"
  rows={15}
>
  <Column field="id" header="ID" sortable />
  <Column
    field="online"
    header="Online/Offline"
    headerStyle={{ width: '5rem' }}
    body={onlineDataBodyTemplate}
  />
  <Column field="bus_name" header="Bus" sortable />
  <Column
    field="soc"
    header="Estado Carga"
    sortable
    body={socBodyTemplate}
  />
  <Column field="odometer" header="Kilometraje" sortable />
  <Column
    field="isolation"
    header="Aislacion Bus"
    sortable
    body={isolationBodyTemplate}
  />
  <Column
    field="fusi_activo"
    header="Codigo Fusi"
    sortable
    body={codigoFusiBodyTemplate}
  />
  <Column
    field="actualizacion"
    header="Ultima Actualizacion"
    sortable
    style={{ color: 'ghostwhite' }}
  />
  <Column body={actionBodyTemplate} />
</DataTable>

and with this i can go to the profile page but i dont know how to rescue the row data

const actionBodyTemplate = (rowData) => {
  return (
    <Link to={`/PerfilLink/`}>
      <Button
        icon="pi pi-arrow-right"
        className="p-button-rounded p-button-info p-mr-2"
      ></Button>
    </Link>

    //<Button icon="pi pi-arrow-right" className="p-button-rounded p-button-info p-mr-2" ></Button>
  );
};

here in last column I have added this Link which will be responsible for redirection. Now how to pass along the data to that page.

so you want to send mixMantenimiento to profile page? – Milan Patel Mar 07 '23 at 19:41 — Milan Patel, Mar 07 '23 at 19:41
not really just the data of the row – Hugo Urbina Mar 07 '23 at 19:49 — Hugo Urbina, Mar 07 '23 at 19:49

score 1 · Accepted Answer · answered Mar 07 '23 at 20:02

Take a look at the docs for react router. I am assuming you are using react router v6. So if you need to pass any data to other page using router you can do it by passing it as state prop. Here is a revised example.

const actionBodyTemplate = (rowData) => {
  return (
    <Link to={`/PerfilLink/`} state={rowData}>
      <Button
        icon="pi pi-arrow-right"
        className="p-button-rounded p-button-info p-mr-2"
      ></Button>
    </Link>

    //<Button icon="pi pi-arrow-right" className="p-button-rounded p-button-info p-mr-2" ></Button>
  );
};

How to pass table rowdata to another place in te webpage

1 Answers1