Select On Row Click

Usage

import MaterialTable from "@material-table/core";

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

Live Demo

note

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

Live Editor

function SelectionOnRowClick() {
  const [data, setData] = useState(SELECTION_DATA);

  return (
    <MaterialTable
      data={data}
      columns={SELECTION_COLS}
      options={{
        selection: true,
      }}
      onRowClick={(event, rowData) => {
        // Copy row data and set checked state
        const rowDataCopy = { ...rowData };
        rowDataCopy.tableData.checked = !rowDataCopy.tableData.checked;
        // Copy data so we can modify it
        const dataCopy = [...data];
        // Find the row we clicked and update it with `checked` prop
        dataCopy[rowDataCopy.tableData.id] = rowDataCopy;
        setData(dataCopy);
      }}
    />
  );
}

Result

Loading...