How do I set up a hide and show columns (table) component in Retool?

[R_S_I_F]

How do I set up a hide-and-show columns (table) component in Retool?

Something like this:

[WidleStudioLLP]

Hi @R_S_I_F , For make this type of table component, you need to create custom component for this and add dropdown for hide and show table contents labels, then in html you will put at every and its content in boolean like its hide or show.

[R_S_I_F]

ok, and how i control what column to show and what to hide with JS?

[WidleStudioLLP]

Yes, first get selected labels from dropdown then match in your custom component table code , show that column only which selected by you from dropdown

[MiguelOrtiz]

Hi there,

Well, you may have a workaround without necessarily having to create a custom component.

I have created a small example in this video here

In summary: you can use:

• Split Pane frame
• Icon button
• Checkbox group

Something like:

• When you click on the Icon button it shows the split pane frame
• Your Hidden setting in each table column is mapped to check if the respective checkbox is hidden or not.
• You can save selected preferences to local storage so that when user returns it remembers preferences.

[pyrrho]

@R_S_I_F Adding on here to say that @MiguelOrtiz's checkbox group and local storage is the right way to go. Some example formatting for the JS can be found here from a similar concept/use case:

Create a Menu "button" using dropdownbutton and checkboxgroup overlapping table?

You can achieve a similar result with a drawer panel and a mulit-select List Box. This is a crude example that hides selected columns (which can look a bit unintuitive): [image] A table button on the header can open the panel, which has settings to disable the overlay but can still be closed when clicking outside of the panel. The listbox data can be populated from the same query as the table data to have the source keys pulled out: [image] If you were using extra columns like in my examp…

[shawnhoffman]

Nice UI! Saved your loom for the great explanation.

We used a similar method but went with a modal:

If you can figure out how to make those columns a re-orderable list and keep the modified column ORDER in localstorage... that'd be a whole new trick!