How to reset column order from MoveColumns:true

Tags: #<Tag:0x00007fa993a077d0>
#1

So, here is my scenario. I have a app which has multiple tables. I have a side menu where users click to load the table.

For the table, I have the manualmoveColumn: true, which let’s them move columns around. When they do this, I update my back-end DB with correct order.

Now When the user clicks to load a new table ,and I load table data, and I update hottable settings, the column that was moved from previous table is refflected in the new table that is loaded. I don’t want this to happen, I want it to use the order that is returned from the data.

Is there a way for me to reset/clear any column positions headings when I reload a new set of table data?

UPDATE: Got a workaround for this. I use the BeforeColumnMove hook, do my own column updating in the DB and use return false so that the grid doesn’t perform the action itself. That keeps the DB as the single source of truth.

#2

Got a workaround for this.

Thank you for the quick update.

Here I would definitely ask if you use the persistentState.

#3

That was the first thing I tried. However what I’m finding is that, when I am dynamically loading different tables with different columns, the manualMoveColumn array cache does not get reset between them.

For example. I load table A. I move column 4 to column 3. It does persist and works.
Now, I click to load table B…however in this table Column 4 has been moved to Column 3 as well. Basically, any table I load thereafter has this column moved.

I have tried extensively to research the API and other ways I can “Reset” the column cache when I load a new table…but have not been able to.If there is a way, I would much prefer to use this PersistState method.

My work around is that I use the action/movement of the column change to get the column data, but then I update column order in my DB…and block the actual internal action of move column by return false on the beforeColumnMove hook.

This works…but again, if I’m missing something, let me know.

#4

That sounds like a bug.

I tried it here https://jsfiddle.net/17a8d24t/

  • Moved columns to get BAC
  • Moved columns of the second table to CAB

Result : They remained the same after reloading the page.

I guess that other settings/options might be messing with the indexes. However, your solution sounds well. As long as you do not change the source data of the library the solution should be correct.

#5

In your example, you are creating 2 actual table entities (hot and hot2). That’s why it probably works.

Try keeping one table “hot”, and then dynamically loading columns/data into it, and then moving the columns.

In my use-case, the number of tables is totally dynamic, hence why I need to use one instance, and then load columns/data dynamically.

#6

Some method erases the setting of persistent state - one of them is loadData. We had a very long discussion on that subject some time ago and decided to erase the settings as if you load new data it is a completely new dataset so the settings should not be altered by manualColumnMove.

#7

I’m not sure I follow. What I currently do is, if the user clicks to load a new table, I update the entire settings object, which also loads new data. I would think this would effectively clear out any settings…but it doesn’t.

You mention “some methods erases the settings of persistent state” and one is loadData. What are the others?

I could look at using loadData when reloading all the settings if that would solve the issue.

#8

Sorry, my bad, the loadData should work well. I’ve tested the following simple implementation https://jsfiddle.net/ke1qxwov/

I’ve also consulted our Full-Stack developer and he told me that the only way to remove a key is the https://handsontable.com/docs/7.4.2/PersistentState.html#resetValue or by the localStorage.removeItem('item). But then you reset the whole key (example column order).

#9