Goal: I am currently designing an application that would allow the users to upload a PDF of a Bill of Materials, and python in the backend identifies the BoM in the PDF and auto generates the table in excel format with segmented cells through ML models. I am currently working on a page where the user can manually make edits to the output excel file through a table.
However, after browsing the forum, I have not found any way to directly edit the column headers of the output excel file. is there any way to allow a user to dynamically edit column headers, or is this feature not implemented yet?
as you can see in the image below, I have found how to directly edit the column cell values, but does not allow for direct editing of the headers.
To enable dynamic editing of column headers in Retool, you can use creative workarounds or native features. Although Retool doesn’t natively support direct editing of table headers like cell values, the following approach can help:
Use a Modal for Dynamically Header Editing
Create a Modal
Add a modal component to your Retool app.
Inside the modal, use TextInput fields to represent each column header you want to edit.
Trigger the Modal
Add a button or action labeled "Edit Headers" to open the modal.
Use Retool's event handlers to control the modal’s visibility.
Update the Table Headers Dynamically
Bind the TextInput values in the modal to temporary state variables (e.g., temporaryHeaderNames).
On modal submission, use a Retool query or script to dynamically update the table column headers. You can modify the table.columns property or adjust column mapping using Retool variables.
This approach allows users to modify table headers interactively while maintaining flexibility.
Feel free to ask if you need further assistance or have additional questions. We're here to help!
To change the column headers for the table of a database, you will need to change the schema of that table.
For a SQL database, you would use syntax such as ALTER TABLE table_name RENAME COLUMN old_name to new_name; which could be run in a SQL query.
Where you should be able to interpolate in the new_name from a text input component with something like {{textInput1.data}}.
For excel, I do not believe we have a built in query action that accomplishes this. You would likely need to check their docs to see if they have an API where you can make a request to an endpoint with the information needed to find you account, table, column and pass along the new name
This can be done easily from Excel's GUI but doing it programmatically is a bit more tricky. I found these docs from Microsoft and ChatGPT might be helpful for understanding the docs and the query you would need.
Then you could use a REST API resource/query in Retool to hit the endpoint with the necessary info to accomplish the renaming.
@WidleStudioLLP's solution gets close to accomplishing a purely aesthetic renaming of the column names in a table component but these changes would not be saved to the database/excel sheet unfortunately.
I would say that renaming columns can be risky as it will change the database which could have spillover issues.
The best architecture for your use-case might be to generate a temp state using a JS variable in Retool that the user can make edits to, then once finalized you can lock this finalized DB schema in by creating a table with the given column names.
As opposed to creating a table then trying to do "database surgery" to tweak column names