[QUESTION] onRowClick custom action seems to override default action of selectableRowsOnClick

[sebarck]

When you use the option "onRowClick" to provide a custom action (or function), seems to override the default function of "selectableRowsOnClick" when its true.

Expected Behavior

When calling a custom function in the "onRowClick" option, it doesnt override, the default function of "selectableRowsOnClick" (when its true). It triggers the check of the checkbox, renders the select toolbar, and then, triggers the custom function.

Current Behavior

When i call a custom function, it doesnt triggers the default function of "selectableRowsOnClick" (check checkbox, renders select toolbar, etc.), it seems to override it, instead of "adding".

Steps to Reproduce

1. Set to true, the option "selectableRowsOnClick"
2. Set to single, the option "selectableRows"
3. Call a custom function, in the option "onRowClick".

Environment

Tech	Version
Material-UI	4.2.0 (core)
MUI-datatables	2.6.2
React	16.8.6
browser	Chrome 75.0.3770.100 (64bits)

[gabrielliwerant]

I wasn't able to verify this one.

Can you provide a broken example on codesandbox?

[sebarck]

I wasn't able to verify this one.

Can you provide a broken example on codesandbox?

Hi Gabriel!
Thank you for the reply. Here is the codesandbox: https://codesandbox.io/s/cm0gf
As you can see, if you click on a row, it will trigger the function (that changes the name below, with the name of the row), but it wont trigger the check of checkbox.

Could you share your example? It seems to work as i expected.

Thank you very much!

[gabrielliwerant]

Thank you for that example, I was able to confirm the bug, though the answer here might be a bit different than you were expecting.

So, the first problem is the onRowClick is not supposed to fire for selection events. It is disabled when you select via checkbox, but this was overlooked when row selection via click was added. The callback you want to use here is onRowsSelect, and that will be the only way to hook into the selection once the fix is in.

However, you will still have an issue with disappearing selections past this point if you are not careful. The issue arises when you are using these callbacks to set state. Changing the state will trigger a re-render that will then default back to your props. So what you'd need to do is track your selected rows like so:

  state = {
    rowsSelected: [],
    selectableRows: 'multiple'
  };

  ...

  const options = {
    selectableRows: this.state.selectableRows,
    selectableRowsOnClick: true,
    rowsSelected: this.state.rowsSelected,
    onRowsSelect: (rowsSelected, allRows) => {
      if (this.state.selectableRows === 'multiple') {
        this.setState({ rowsSelected: allRows.map(row => row.dataIndex) });
      }
    }
  };

  ...

  <MUIDataTable data={data} columns={columns} options={options} />

You'll map the selected rows differently if it's single selection only, but that's the idea.

[gabrielliwerant]

onRowClick no longer fires on selection via click as of 2.6.3.

[sebarck]

Hi Gabriel!
Thank you very much, now i managed to select the row on click, and fire the custom function with the trigger "onRowsSelect".

Here is the sandbox: https://codesandbox.io/s/smoosh-leaf-4rgmd

Thank you very much!!