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

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