Expand row onRowClick

[aliaadil]

Expected Behavior

Would like to expand the row when anywhere on the row is clicked not just the arrow on the left that appears when using renderExpandableRow

Current Behavior

When using the renderExpandableRow option only the arrow appears in the left and have to click on it to expand the row

Your Environment

Tech	Version
Material-UI	3.9.2
MUI-datatables	2.0.0-beta.59
React	16.8.5
browser	Chrome

[georgezee]

I needed this as well. For now, I've added this feature by forking the repo and adding this commit: https://github.com/georgezee/mui-datatables/commit/7938d386e9a7bdb46fc759d1d91078b4be6ca503

This would be considered a breaking change if it became the default for everyone, so we could add a new boolean option called "expandRowOnClick", or text option "rowClickBehaviour".

@gregnb - if you think either of the above options would be a good idea, I could raise a PR with the change. You can see how we use this at codeschooldirectory.co.za.

[iamjoeker]

I think an option to enable this behavior would be great!

[gabrielliwerant]

I like the idea of an option, since it doesn't prescribe specific onClick behavior. Maybe boolean for now, pivoting to an enum if other options are added (I'm sensing another use case here for row selection).

If you submit a PR, I'll be happy to review it!

[georgezee]

PR: https://github.com/gregnb/mui-datatables/pull/607

You're welcome to change the option name if you'd prefer something else, there are several possibilities.

[rodriigovieira]

Is there a way to already implement this with some workaround? Or somehow a manual way to make the onRowClick trigger the toggleExpandRow?

I'd adore implementing this as quickly as possible on a project that I'll launch next week.

[georgezee]

@rodriigovieira - I couldn't see a way to trigger it just using the existing onRowClick. If you can't wait until the PR is reviewed and merged, you could point to the branch on my fork in the meantime, i.e. update the mui-datatables reference in your package.json to: "mui-datatables": "git+https://www.github.com:georgezee/mui-datatables.git#1621d52", though keep in mind that this doesn't have all the latest commits from the main repo.

If you do use this, you'll need to add the fullRowTrigger property to the table options, set to True.

[rodriigovieira]

I've put the line as you wrote it in my dependencies and got this error when executing yarn install:

error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads https://www.github.com/:georgezee/mui-datatables.git
Directory: /Users/rodrigovieira/Desktop/Storage/Interlaken/dashboard-project/frontend
Output:
fatal: unable to access 'https://www.github.com/:georgezee/mui-datatables.git/': The requested URL returned 
error: 400

I tried switching the ":" for a "/" and yarn install worked. Like this: "mui-datatables": "git+https://www.github.com/georgezee/mui-datatables.git#1621d52",

However, when I tried to start the app with yarn start, I got this error:

[1] ./src/components/UnitsTable.js
[1] Module not found: Can't resolve 'mui-datatables' in '/Users/rodrigovieira/Desktop/Storage/Interlaken/dashboard-project/frontend/src/components'
[1] Compiling...
[1] Failed to compile.
[1] 
[1] ./src/components/UnitsTable.js
[1] Module not found: Can't resolve 'mui-datatables' in '/Users/rodrigovieira/Desktop/Storage/Interlaken/dashboard-project/frontend/src/components'

Did I do something wrong?

[rodriigovieira]

I managed to make it work.

I downloaded locally this repository: https://github.com/georgezee/mui-datatables/tree/expandable-rows-click-anywhere

Installed all the dependencies, ran npm prepare and simply replaced the content of the actual "mui-datatables" folder with the output of npm prepare, the dist folder. It's probably a very ugly solution, but it worked.

As a suggestion, if you already didn't do it, I'd recommend some styling when hovering, like a cursor: pointer. I did the custom styling with the global overrides for the theme.

Thank you so much for your help and for contributing to this amazing library.

[gabrielliwerant]

Functionality should be available in 2.4.0.

[georgezee]

To be clear for anyone visiting this thread, this is now achieved by using the property: expandableRowsOnClick: true

See the docs/examples for more details.

(also @rodriigovieira - in case you missed this update)