Retreaving dataTable state from database problem with resizableColumns

[bojan]

Hi, I'm trying to save the table state to the database and on load to configure the table based on that state. Users might have multiple custom tables.
Users should be able to Sort, Resize Columns Re-order them, and Toggle some columns .

The issue is after I use customRestoreState everything works beside columnsWidth. All Column widths keep resetting to be exactly the same.

Please tell me if I'm doing something wrong

Based on some answers I found on the forum I used a mockup I found :

Code: Select all

const dt = useRef(null)
const onCustomSaveState = (state) =>
        window.sessionStorage.setItem('table1', JSON.stringify(state))

    let onCustomRestoreState = () =>
        JSON.parse(window.sessionStorage.getItem('table1'))

    const getState = () => {
        const customState = {
            sortField: 'field3',
            sortOrder: 1,
            columnWidths: '650,250,451,451',    //<----- This keeps reseting to columnWidths":"360,360,360,360,360",refuses to load table with widths from state
            columnOrder: [
                'field1',
                'field3',
                'field2',
                'field4',
                'field5',
            ],
        }
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                dt.current.restoreTableState(customState)
            }, 3000)
        })
    }

    onCustomRestoreState = async () => {
        const result = await getState()
        return result
    }


return (
<DataTable
                    ref={dt}
                    
                    className={classes.header}
                    header={header}
                    footer={footer}
                    value={data}
                    resizableColumns
                    columnResizeMode="fit"
                    reorderableColumns
                    rowClassName={rowClass}
                    onRowClick={resize}
                    stateStorage="custom"
                    customSaveState={onCustomSaveState}
                    customRestoreState={onCustomRestoreState}
                    stateKey="table1"
                    emptyMessage="No customers found."
                    restoreTableState={stateCheck}
                    onColReorder={stateCheck}
                >
                    {/* {cols.map((col) => (
                        <Column
                            ref={dt}
                            key={uuid()}
                            field={col.field}
                            header={col.header}
                            sortable
                        />
                    ))} */}

                    {columnComponents}
                </DataTable>
)