How to save column order?

The user can change the order of columns in a table by dragging and dropping, but if they refresh, the table snaps back to the original order.

I know I can change the order of table columns in the editor, but I would like each user to be able to change the order of their tables and save that order somewhere. I could do this by saving an array in localstorage, but I can't find a way to change the order of the columns via array? No matter what I do, it seems to always default to the original order.

Any ideas?

Hey @szabon

Not sure if there is a way to do this naturally in Retool :thinking:

I tried solving this problem by decoupling the column order through a reorderable list that changed the order of keys for the table, but this still doesn't change anything :confused:

It seems like once a table has been created and the data field has been entered once, the column order can then only be defined in edit mode

Let me know if you figure anything out @szabon!

1 Like

Hi @szabon - this one was tricky, got a chance to play around with it and come up with a workaround that adds quite a bit of complexity so I don't know whether or not it'll be worth it for you. Nonetheless, it was a fun exercise and so I thought I'd post it here :smiley:

A table's column order is saved in its columns property which can be modified in view mode but won't be saved to the app - as with other properties. Jumping off of @JoeyKarczewski's idea of decoupling the column order - we can pass data to the table in columns that are fixed to arbitrary keys (in this case, indices in an array) and then populate the data in those columns, as well as their headers, differently depending on an array in localStorage.

On page load we check for the starting order of the columns - either the default order from the query or the one saved last session (this example assumes the query data is an object of arrays).

Now we use this to transform the data from our query so that the column keys are the arbitrary ones we chose

This transformed data gets passed to our table, and, so that the column headers display correctly, we set the title of each column as a reference to columnNames

This way the saved order in the columns property is completely decoupled from the data/header for each column.

Now all that's left is to be able to save the order of the columns between sessions. Remember the columns property is still changed when a user reorders the columns in view mode, it just isn't saved, so we can still reference it to get the changed order. Our arbitrary column names will show up there in the order the user has set them to. We have the association between the arbitrary names and the actual column names stored in so we can use both to save the new order of the columns as follows:

The filter on Object.values(table1.columns) is because every column that is passed through the table since it was created gets an entry in table1.columns so we want to filter for the ones we're actually dealing with - in this example case !isNaN sufficed but you may want to create your own filter for whatever arbitrary column names you choose.

And with that, we're done :sweat_smile:


This is AWESOME! Hell of a workaround, but in the end actually pretty simple so it won't take forever. Thank you!!!!!

Is there a workaround for the new table component as well?
Because from reading up on the documentation the columns property does not seem to be available anymore.

Hey @xhuliodo. Unfortunately, I'm not seeing a workaround for the new table at the moment. If the feature gets built in for the new table I can report back here about it though!

1 Like

This is really moronic design limitation -- come on guys!!

Definitely would like this as well. We're migrating from a completely react environment to Retool and these limitations can be frustrating. We need users to be able to easily select which columns to show/hide form a list or dropdown, re-order however they want, and save.

It's a shame when the new components strip away functionality.

Same happened with the button group - have to use the legacy button group to achieve a simple on/off type selection.