Persist Row Click Events

Usage#

info

You can persist onRowClick, or onRowDoubleClick events, if you need access to things like event.target

caution

You must be on version >=4.1.0 to use the persistEvents prop!

import MaterialTable, { MTableBodyRow } from '@material-table/core';

<MaterialTable
  // ...
  options={{
    selection: true,
  }}
  components={{
    Row: (props) => {
      return (
        <MTableBodyRow
          {...props}
          persistEvents
          onRowClick={handleClick}
          /* onRowDoubleClick={...} */
        />;
      );
    },
  }}
/>;

Live Demo#

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function PersistEventsOnRowClick() {
  const handleClick = (event, rowData) => {
    alert(`event.target.tagName = '${event.target.tagName}'`);
  };

  return (
    <MaterialTable
      title={"Click a Row"}
      data={SELECTION_DATA}
      columns={SELECTION_COLS}
      components={{
        Row: (props) => {
          return (
            <MTableBodyRow {...props} persistEvents onRowClick={handleClick} />
          );
        },
      }}
    />
  );
}

function PersistEventsOnRowClick() {
  const handleClick = (event, rowData) => {
    alert(`event.target.tagName = '${event.target.tagName}'`);
  };

  return (
    <MaterialTable
      title={"Click a Row"}
      data={SELECTION_DATA}
      columns={SELECTION_COLS}
      components={{
        Row: (props) => {
          return (
            <MTableBodyRow {...props} persistEvents onRowClick={handleClick} />
          );
        },
      }}
    />
  );
}

Result