Unable to show/hide columns with CustomRowRender

[progdogusmc]

Expected Behavior

I would like to be able to use customRowRender in tandem with show/hide columns functionality

Current Behavior

Currently no information on which columns to display is passed through to the customRowRender function, and it takes quite a bit of effort to set something up that replicates doing so.

Steps to Reproduce (for bugs)

1. Run the Custom Row Render example included with mui-datatables
2. Hide one of the columns
3. The column is still displayed in the row.

Your Environment

Tech	Version
Material-UI	4.9.7
MUI-datatables	2.14.0
React	16.9.26
browser	Chrome 81

[wdh2100]

Name	Type	Default	Description
display	string	'true'	Display column in table. enum('true', 'false', 'excluded')

It can be removed with the display option Is there any reason to use the customRowRender

[wdh2100]

https://codesandbox.io/s/muidatatables-custom-toolbar-7otny

using customRowRender

[progdogusmc]

I'm using customRowRender for a completely unrelated reason, I just need this functionality as well. In the CodeSandbox you linked, unchecking columns using the icon in the upper right hand corner no longer works correctly.

On Tue, Apr 14, 2020 at 6:00 AM Woo Dohyeong notifications@github.com wrote:

https://codesandbox.io/s/muidatatables-custom-toolbar-7otny

using customRowRender

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gregnb/mui-datatables/issues/1250#issuecomment-613428151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAW5BLNHGQBJOSD674CRFDTRMRM7RANCNFSM4MGSDJBQ .

[kev-landry]

Same here, i'm unable to make the visibility feature works if i use customRowRender

[trentschnee]

Same here.

Same here, i'm unable to make the visibility feature works if i use customRowRender

[patorjk]

When using customRowRender you control the rendering of the table cells. One solution would be to use the onViewColumnsChange callback to listen for when a user changes the visibility. You could put the columns object on your state and simply update the state in the onViewColumnsChange method.

[trentschnee]

When using customRowRender you control the rendering of the table cells. One solution would be to use the onViewColumnsChange callback to listen for when a user changes the visibility. You could put the columns object on your state and simply update the state in the onViewColumnsChange method.

I have tried this and I am successful with update the state, however, the

This is my code: onViewColumnsChange = (changedColumn, action) => { const boolVal = action === "add" ? true : false; let index = 0; switch (changedColumn) { case "a": index = 0; break; case "b": index = 1; break; case "c": index = 2; break; case "d": index = 3; break; case "e": index = 4; break; case "f": index = 5; break; } let obj = [...showView]; obj[index] = boolVal; return setShowView(obj); };

When I toggle a column, it wants to freeze up like this:

TLDR; When I click the column to toggle in the checkbox, it doesn't select it. But it does when I take the setShowView out.

[patorjk]

Here is a proof of concept example on how to do it:

https://codesandbox.io/s/muidatatables-custom-toolbar-pz34j?file=/index.js

You have to factor in the display logic into the customRowRender function.

[trentschnee]

Here is a proof of concept example on how to do it:

https://codesandbox.io/s/muidatatables-custom-toolbar-pz34j?file=/index.js

You have to factor in the display logic into the customRowRender function.

Thank you so much 🙏 I got it to work but it's a bit laggy with all the data I am passing through. I was wondering if there is any easy way to customize the viewColumns so I can add a button saying "toggle all columns"?

[patorjk]

What would "toggle all columns" do? Hide/show all? I'm not sure it would make sense to provide this as a general table option. However, this may be a good candidate for a custom component. The View Columns list this is this component:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableViewCol.js

Right now you can't use a custom component to replace it, but it would be easy enough to add. Then you would just copy that file, make your adjustments, and use it as a custom component.

[trentschnee]

What would "toggle all columns" do? Hide/show all? I'm not sure it would make sense to provide this as a general table option. However, this may be a good candidate for a custom component. The View Columns list this is this component:

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableViewCol.js

Right now you can't use a custom component to replace it, but it would be easy enough to add. Then you would just copy that file, make your adjustments, and use it as a custom component.

In my particular use-case it makes sense, but I think you're right for not adding it as a general option. However, I would definitely love to see that component available to customize! :)

Thanks for your time and keep up the great work.

EDIT: You're awesome!