Component: p-table column order not restored

[chrissl33]

Describe the bug

Column order is not restored

After the table is saving it´s state the column order is saved under property "columnOrder", but it´s never restored again.
For example, after page refresh or navigation.

I already looked inside the code of the primeNG table and found following method, which takes care of restoring the table state:

restoreState() {
        const storage = this.getStorage();
        const stateString = storage.getItem(<string>this.stateKey);
        const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
        const reviver = function (key: any, value: any) {
            if (typeof value === 'string' && dateFormat.test(value)) {
                return new Date(value);
            }

            return value;
        };

        if (stateString) {
            let state: TableState = JSON.parse(stateString, reviver);

            if (this.paginator) {
                if (this.first !== undefined) {
                    this.first = state.first;
                    this.firstChange.emit(this.first);
                }

                if (this.rows !== undefined) {
                    this.rows = state.rows;
                    this.rowsChange.emit(this.rows);
                }
            }

            if (state.sortField) {
                this.restoringSort = true;
                this._sortField = state.sortField;
                this._sortOrder = <number>state.sortOrder;
            }

            if (state.multiSortMeta) {
                this.restoringSort = true;
                this._multiSortMeta = state.multiSortMeta;
            }

            if (state.filters) {
                this.restoringFilter = true;
                this.filters = state.filters;
            }

            if (this.resizableColumns) {
                this.columnWidthsState = state.columnWidths;
                this.tableWidthState = state.tableWidth;
            }

            if (state.expandedRowKeys) {
                this.expandedRowKeys = state.expandedRowKeys;
            }

            if (state.selection) {
                Promise.resolve(null).then(() => this.selectionChange.emit(state.selection));
            }

            this.stateRestored = true;

            this.onStateRestore.emit(state);
        }
    }

As you can see, the column order was not taken into account, therefore is not restored.

Environment

Angular 17
PrimeNG 17.7.0

Reproducer

No response

Angular version

17.0.1

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome (122.0.6261.69)

Steps to reproduce the behavior

1. Implement stateful prime table
2. Change column order of table -> state is saved inside local or session storage with correct column order
3. Refresh page or navigate -> column order is not restored

Expected behavior

Column order is restored after page refresh or navigation

[cetincakiroglu]

Hi,

Thanks for reporting the issue, we'll try to address this one in 17.11.0

[f2404]

@cetincakiroglu 17.11.0 doesn't fix this issue for me - columns order is still saved to the storage, but doesn't get applied on refresh.

@chrissl33 is the issue fixed for you?

[chrissl33]

Hi,
sorry for the late answer. I tested this morning and can confirm, that the issue is not fixed yet.
Column reorder functionality is not working either anymore after refresh -> please have an eye on that, too.

I´ll take a look at the primeng code again today and let you know if i find something.

Best regards,
Chris

[chrissl33]

Well...i only get it to work, when listening to the (onStateRestore) Output and sort my columns Input myself.
When reordering the columns after refresh (visually not working as mentioned above), the state is tracking correctly the column order and is visible after refreshing the page again (with my own sort function).

So i guess, i can also listen to the (onStateSave) Output...call my sort function and update the columns input myself...but this surely cannot be the solution intended to!?

@f2404
Maybe a temporarly workaround for you, till it´s fixed.

Best regards,
Chris

[cetincakiroglu]

Hi @f2404

Thanks a lot for the feedback I'm re-opening the issue and we'll re-visit this one with v17.12 or the next release.

[cetincakiroglu]

Hi,

Thanks to your reports, I've found that there is an extra call of restoreColumnOrder in restoreState method. It was also called within ngOnChanges which led to an override of state values. It's fixed now, could you please test it after the release?

[f2404]

Hi,

Thanks to your reports, I've found that there is an extra call of restoreColumnOrder in restoreState method. It was also called within ngOnChanges which led to an override of state values. It's fixed now, could you please test it after the release?

Thank you!
I will be happy to test it, are you planning on releasing 17.12.0 soon?

[cetincakiroglu]

Hi,
Thanks to your reports, I've found that there is an extra call of restoreColumnOrder in restoreState method. It was also called within ngOnChanges which led to an override of state values. It's fixed now, could you please test it after the release?

Thank you! I will be happy to test it, are you planning on releasing 17.12.0 soon?

We'll release it today.

[f2404]

Hi,
Thanks to your reports, I've found that there is an extra call of restoreColumnOrder in restoreState method. It was also called within ngOnChanges which led to an override of state values. It's fixed now, could you please test it after the release?

Thank you! I will be happy to test it, are you planning on releasing 17.12.0 soon?

We'll release it today.

Sorry, but 17.12.0 makes no difference to me :(
Sorting the table, or reloading data, or refreshing the page all undo column reorder.