Dynamic Table Column Setting

Feature Requests
1

I've got the table data from RestAPI. I want to display the table columns dynamically by tick/untick the columns. But it's only possible to set table columns hide/show in the table property panel and it's staic and it requires only mouse working. It doesn't support programmatic dynamic setting.

3

Hey there!
​

Thanks for reaching out with your question. I completely understand where you're coming from. Right now, Retool doesn't have a built-in feature to dynamically show/hide table columns programmatically. I absolutely agree that having this capability would be incredibly helpful!

I want to assure you that we're actively working on making Retool even more flexible and user-friendly, and your feedback plays a significant role in that process. While I can't provide an exact timeline for when this feature will be available, please rest assured that it's on our radar, and we're dedicated to enhancing your experience.

In the meantime, I'd like to offer you a workaround that can achieve a similar effect using Retool's existing features. You can utilize a checkbox component to selectively display the columns you want to see.

Here's a step-by-step guide:

  1. Add a new checkbox component to your user interface.
  2. Click on the checkbox component so you can see Options in the right panel.
  3. Update the option names so that they match your table column names.
  4. Click on your table component so you can see the column names in the right panel.
  5. Select a column name under Columns so you can see it's attributes.
  6. In the Appearance section, update the Hidden field with JavaScript to control whether the column is hidden or shown based on the checkbox selection.. For example, to show or hide the Name column, you can use the following expression: {{ !columns.value.includes("name") }}.

Repeat this process for each column you want to toggle visibility for, updating the JavaScript expression accordingly with the appropriate string for each column.

Note that for this example, I updated the name of the checkbox I used to "columns." In order to access the values in your check box, you will need to use the name of your checkbox.

I've attached the exported JSON for an application that demonstrates how to use a checkbox to dynamically hide and show columns. Additionally, you can find detailed information on importing an app from our documentation here.
Toggle Column Visibility with Checkbox.json