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 ***@***.***> 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 <#1250 (comment)>, 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!