How to save column order?

[szabon]

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?

[JoeyKarczewski]

Hey @szabon

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

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

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!

[Kabirdas]

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

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 columnNames.data 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

[szabon]

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

[xhuliodo]

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.

[Kabirdas]

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!

[Clyde_MacLeod]

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

[shawnhoffman]

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.

[shawnhoffman]

Revisiting this -- still really need a way to save column order for each user, like a saved view or just maintaining the column order for them in local storage.

[Tess]

Sharing your feedback internally! Unfortunately, the request for persistent column orders hasn't been picked up by our team yet

[Tess]

Actually, as far as the workaround goes, you could get the columns using getDisplayedData

[szabon]

This workaround doesn't solve the problem. In the new tables, we need a way to programatically change the column order and if a column is showing or not. This just tells you what the columns are. This is the major reason why I cannot switch from the legacy tables.

[Tess]

Unfortunately, I don't have an update on this request yet, but I'll post here if it gets picked up by our team

[MiguelOrtiz]

Hi Tess,

Thank you for the update. Recently I saw the "columnOrdering" property for the table, but there isn't documentation on how this can be used. Could this be a first step towards adjusting and saving column order?

[pyrrho]

I see a couple of things, but like @MiguelOrtiz I am not sure exactly if they are feasible.

• localStorage seems to be able to hold the current columnOrdering array with no issue.
• the new table's event handlers has a "Reorder column" event that can trigger the write to localStorage
• the table component has a function called setColumnOrdering() which I assume is supposed to let us set the column ordering.

It seems like we should be able to use the localStorage value and trigger a query to set it on page load or after the query that populates the table is run. One issue is that the columnOrdering property doesn't really say much about the columns themselves other than their (seemingly persistent) 5 character id.