TableState for Table

[gatapia]

It would be good to be able to remember the state of the table to be able to give the user continuity as they use an application. This state would include:

• sorts
• filters
• column widths (if resizeable)
• page number
• expanded state?
• toggled columns?

A nice clean API to get and set this would be great:

# template
<p-datatable (stateChanged)="onStateChanged($event)" 
    [initialState]="loadInitialState()"...

# component
onStateChanged(event: any) {
  localStorage.set('table-state', event.data);
}

loadInitialState() {
  return localStorage.get('table-state');
}

Or perhaps even a totally automatic API, like:

<p-datatable persistState="true"...

[nandeshnair]

Thank you so much for implementing this. :-) Kind Regards,

Nandesh

On Wed, 14 Nov 2018 at 08:37, Cagatay Civici notifications@github.com wrote:

Closed #304 https://github.com/primefaces/primeng/issues/304.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/primefaces/primeng/issues/304#event-1965107156, or mute the thread https://github.com/notifications/unsubscribe-auth/ALEgmjdquTErL8xLLRFgJ-jez13NPgsYks5uu8g7gaJpZM4IWkG6 .

[nsksaisaravana]

Thanks, guys for all your hard work.

[AizeLeOuf]

This feature doesn't work for me =>

<p-table #dt id="jobs-table" class="table-style" [columns]="cols" [value]="jobs" stateStorage="local" stateKey="p-table-jobs-{{ this.user.usernameCanonical }}" [loading]="loading" sortField="startTime" [lazy]="true" (onLazyLoad)="loadLazy($event)" [rows]="25" [totalRecords]="totalFiltered" [responsive]="true" [scrollable]="true" [scrollHeight]="this.style.height" selectionMode="multiple" [(selection)]="selectedJobs" [metaKeySelection]="true" virtualScroll="virtualScroll" [virtualRowHeight]="32" [(contextMenuSelection)]="selectedJobs" [contextMenu]="cm" contextMenuSelectionMode="joint" [resizableColumns]="true" [reorderableColumns]="true"> In my local storage

{"sortField":"startTime","sortOrder":1,"filters":{"username":{"value":["Paul"],"matchMode":"in"},"program":{"value":["NextGenApp"],"matchMode":"in"}},"columnWidths":"157,158,158,158,158,157,157,157","columnOrder":["jobid","username","jobname","program","startTime","duration","accelerability","accelerators"]}

new feature are correctly take into account in p-table but in the page, filters are always empty Oo Have you plan to load SaveState in another PR ? Release ? or planned to work right now ?

[AlejandroFlorin]

State retention of filter entry controls does not work. State retention of the currently selected Page DOES work. I haven't tested sorting.

I'm using the recently released 7.0.0 production version

Not sure if it makes a difference but the headings and columns on my table are manually defined (not dynamically built) and the filter controls are bound using model driven form (formcontrolname = ...)

[umdstu]

I haven't had a chance to test this yet, but based on comments above, it looks like this doesn't support visibility of columns? aka. you'd have to track them outside of this state management functionality, then merge in as necessary. Kinda lame :( Is this something on the todo list @cagataycivici ?

[wombll]

State retention of filter entry controls does not work. State retention of the currently selected Page DOES work. I haven't tested sorting.

I'm using the recently released 7.0.0 production version

Not sure if it makes a difference but the headings and columns on my table are manually defined (not dynamically built) and the filter controls are bound using model driven form (formcontrolname = ...)

I had this issue at first but if you check the code snippet in the manual it has col.filterMatchMode and [value]="tt.filters[col.field]?.value" which holds the state of the filters.

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field"><p-sortIcon [field]="col.field"></p-sortIcon>{{col.header}}</th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field"><input pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)" [value]="tt.filters[col.field]?.value"></th>
        </tr>
    </ng-template>

[AlejandroFlorin]

@wombll. Thank but I'm using paging, lazyloading and model driven controls and it isn't clear how to use the State feature with those. I can see the state information being stored in sessionStorage for the table's defined session key but the onlazyload event is not using it consistently. I'm going to post a question on the forums to see if I can get a working sample with lazyloading and model driven controls using the new state feature.

[ghost]

@AlejandroFlorin I'm also using the same PrimeNG approach with Table onLazyLoad nad $event value doesn't take stored values consistently as you've mentioned.

If anyone of you have an example of TableState connected with lazyload, will be very grateful.

[AlejandroFlorin]

After I posted on the primeng forums, I realized that I was expecting a bit too much from the new functionality. It basically just provides a built in session object with automatic storage during the onDeactivate event. Though that makes sense after thinking about it. I wound up using the same technique as I had before for lazy loaded pages and model driven controls but just using the built in session object. Here is my post with my code in case it helps anyone:

https://forum.primefaces.org/viewtopic.php?f=35&t=57640&p=172030#p172030

[nkm96]

Is there any way we use state for saving toggle columns too?

[umdstu]

See my comment above. It can be done but you have to roll it yourself, not what's built into primeng

[nkm96]

thanks, I handle it by saving columns in local storage.

[xylplm]

我希望自动保存TableState可以选择保存项。就像我一样，我只需要保存rows，而不需要保存其他。我们可以写一个数组作为可选功能，如['rows']。这样我就只保存rows配置。

[h1ghland3r]

thanks, I handle it by saving columns in local storage.

Do you mind to share your solution?

[ryann3588]

It would be nice to choose which properties of the table to include in the state save/restore. We are having an issue with the selection state. It is possible to have enough items in the table to where it exceeds the storage capacity of browsers. If the select all toggle is used it causes an error.