[GH-DEV#299] Persistent state for manualColumnMove is not working

Tags: #<Tag:0x00007efc648bb958> #<Tag:0x00007efc648bb7f0>
#1

I have a handson table in my project and the persistentState is set to true.
manual column move also set as true.
When dragging and dropping the column in another position, the local storage has been created with the Id followed by manualColumnMove key.

The value in the local storage also correct and it is not cleared even after refreshing the page.

The issue is the column order is not correct as per the local storage.

Below is my code.

{!calcDisabled ? (
<HotTable
{…{
id: ‘admin-test-task-table’,
// colHeaders: true,
persistentState: true,
rowHeaders: true,
autoColumnSize: false,
autoRowSize: false,
colHeaders: tableColumns,
manualColumnFreeze: true,
contextMenu: true,
stretchH: ‘all’,
manualRowMove: true,
manualColumnMove: true,
manualColumnResize: true,
manualColumnHide: true,
hiddenColumns: {
columns: [0],
},
formulas: formulasEngineConfig,
ref: tableRef,
data: tableData,
licenseKey: ‘non-commercial-and-evaluation’,
// afterChange: updateNamedExpressions,
tableClassName: ‘table-template’,
className: ‘table-cell’,
beforeRemoveRow: handleBeforeRemoveRow,
afterChange: handleAfterChange,
afterRowMove: handleRowMove,
}}
/>
) : (


<HotTable
{…{
id: ‘admin-test-task-table’,
persistentState: true,
// colHeaders: true,
rowHeaders: true,
autoColumnSize: false,
autoRowSize: false,
colHeaders: tableColumns,
manualColumnFreeze: true,
contextMenu: true,
stretchH: ‘all’,
manualRowMove: true,
manualColumnMove: true,
manualColumnResize: true,
manualColumnHide: true,
hiddenColumns: true,
ref: tableRef,
data: tableData,
licenseKey: ‘non-commercial-and-evaluation’,
// afterChange: updateNamedExpressions,
tableClassName: ‘table-template’,
className: ‘table-cell’,
beforeRemoveRow: handleBeforeRemoveRow,
afterChange: handleAfterChange,
afterRowMove: handleRowMove,
}}
/>

)}

Kindly help me on this

#2

Hi @shabharishwarankathi

Do you use any of our wrappers for Angular, Vue, or React or are you working on the vanilla version?

#3

Hi @aleksandra_budnik,

No, I am not using any wrapper and this is React project.
Column width resizing and column rows are working well, column manual move has this issue

#4

At the moment, the Persistent State doesn’t have support for other versions than Vanilla, including React.

I will inform you when it changes.

Till that comes I can help with a workaround. We do not have an ETA for this task, so it may take some time.

In general, manualColumnMove triggers the afterColumnMove hook. This hook informs you what the user has done to move the columns and what is the index of the drop. This way, you have all the needed information to bring back the same settings once they log in on the next visit. To apply the information that we took from the afterColumnMove hook, we just need to call the manualColumnMove as an array of columns instead of a boolean value.