If I have a table from a query running data from a google sheet and have most of the columns hidden, could I add a button to have people add or take away whatever columns they want visible on the table?
Sure. You can use the storeValue() method in the onClick event of a Button widget to save a variable to Appsmith store, then use that variable in the Visible property of the column to show/hide it programmatically.
Im not sure what I should at first store?
You would store a boolean value in the onClick event of the button:
{{storeValue(‘showColumn’, true)}}
In this case, if you click the button, the column will be shown.
How will it know which column to show?
Or maybe a multiselect tree that allows people to select the names of columns that then appear on the table?
There is probably a syntax error in the onClick event of the button.
Yes, you could use a Multiselect widget and show each column only if the name is within the selected options.
Ok, if I did use the button how would the button know which column to make visible? Is the button supposed to be in the same container but not in the table widget?
You go to the settings of the column you want to make visible (click on the gear icon in the table properties pane):
Then use the value from Appsmith store in its Visible property:
Okay it is not working I am not sure what I am doing wrong, there is no error, just nothing happens when I hit the button
You don’t need the quotes around the true value. In the onClick event of the button, enter {{true}} in the Value field to achieve this.
I fixed that and am still having the same issue, should I have the columns I want visible to be clicked on or off on the eye icon?
If you have turned the visibility off from the eye icon, they won’t be shown. You need to have the eye icon on. If you want to have them hidden by default and only shown when the user clicks the button, you can use:
I did that and it is having the same result
Please fork this sample app. Here the gender column is hidden by default and it is shown at the click of a button. There is also an additional button that clears the value to hide the column again.
Thank you very much that worked, but only works if the columns are visible on deploy, is there a way when they deploy they aren’t visible and it will still work?
Can you elaborate a bit on this use case and on what you mean by “columns aren’t visible on deploy”?
@Amelia the sample app appears to be broken. No data is displayed on the table, even though the query seems to be executing successfully.
@EricSGS Thanks for bringing that up! I’ve repaired the app and it should be working as intended now.