Hide toggle button when the row isRowExpandable resolves to false

[imballinst]

Expected Behavior

When isRowExpandable is false, the row should have no toggle button.

Current Behavior

It still have the toggle button -- and is clickable, but it doesn't expand (this is correct behavior).

Steps to Reproduce (for bugs)

https://codesandbox.io/s/aged-lake-mhiwn

1. Open the link
2. Click on the first row and second row (it works)
3. Click on the third row (it doesn't expand because we set only row 1 and 2 that should expand)
4. But the button is still there!

Your Environment

Tech	Version
Material-UI	4.5.1
MUI-datatables	2.12.3
React	16.8.6
browser	Firefox, Chrome

[gabrielliwerant]

Changing this behavior might break how other people want it to work, so I'm not comfortable with assuming so strongly what the desired UX should be. Instead, what I'd be glad to accept is an additional css class being added somewhere to rows that are not expandable so that devs can use this to change the experience however they wish.

[imballinst]

Ah, I see! Yeah, that makes more sense and should be safer. So perhaps, I'll leave the default to show the button, and it can be overridden with, say, MUIDataTableSelectCell-expandDisabled. What do you think?

[gabrielliwerant]

That sounds good to me! I assume you mean that you will add that class rather than replace any existing ones. If so, all good.

[imballinst]

Yeah, I'll do that and will ping you once I have re-patched the PR. Thanks for the guidance!

[endurance]

Anyone googling who wants to do this code, follow this example.

https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js

The CSS override in the Theme shows you how to hide the toggle button when the expansion is diabled on the row.

[dmythro]

Alright, works. Is there an option to override the row's styles for that case? I don't want cursor pointer on that, it is misleading.

[patorjk]

One way would be to use the setRowProps option:

  setRowProps: (row, dataIndex) => {
    if (dataIndex % 2 === 0) { // your check here
      return {
        style: {
          cursor: 'default'
        }
      };
    } else {
      return {};
    }
  },

However, it would be nice if the table did this by default. I'll put this on my list of things to look into.