Dynamic Table Column Show/Hide

I’d like to provide my users with an available list of columns, and then have them select which columns they want to see. The select dropdown would need to dynamically show/hide the table columns. Is there any way to do this?

Hey @DakotaB! Interesting question, and yes this is definitely possible! You can dynamically hide and show table columns in column settings. Click on your table table component, head over to the right sidebar, and click on the column that you want to work with.

In terms of your dropdown, you can pull all of the available table columns with {{ table.columns }} - since your dropdown is going to need an array instead of an object, you can use {{ Object.values(table.columns) }}. Then based on what users choose in the dropdown, you can dynamically hide those columns.

Since I’m guessing you’d want to let users choose multiple columns, you can use a multiselect component and use something like {{ multiselect1.value.includes(your_column_name) }} in the “dynamically show column” field - it will evaluate to true if your user wants that column, and false if they don’t.

Let me know if this makes sense!

1 Like

@justin Perfect, that is exactly what I was looking for! Thanks for the detailed walkthrough and quick response. I moved this over to “How do I” instead of a feature request to keep things clean!

When I was looking at the column editor, I missed the hide when true field at the bottom for each individual column.

1 Like

You read my mind, glad I could help!