ng2 smart table check boxes not persistent across all pages

Question

I'm new to ng2-smart-tables. I'm trying modify the example below from the GitHub page so that the check boxes don't disappear when moving from page to page.

import { Component } from '@angular/core';

@Component({
  selector: 'basic-example-multi-select',
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `,
})
export class BasicExampleMultiSelectComponent {

  settings = {
    selectMode: 'multi',
    columns: {
      id: {
        title: 'ID',
      },
      name: {
        title: 'Full Name',
      },
      username: {
        title: 'User Name',
      },
      email: {
        title: 'Email',
      },
    },
  };

  data = [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: '[email protected]',
    },
    {
      id: 2,
      name: 'Ervin Howell',
      username: 'Antonette',
      email: '[email protected]',
    },
    {
      id: 3,
      name: 'Clementine Bauch',
      username: 'Samantha',
      email: '[email protected]',
    },
    {
      id: 4,
      name: 'Patricia Lebsack',
      username: 'Karianne',
      email: '[email protected]',
    },
    {
      id: 5,
      name: 'Chelsey Dietrich',
      username: 'Kamren',
      email: '[email protected]',
    },
    {
      id: 6,
      name: 'Mrs. Dennis Schulist',
      username: 'Leopoldo_Corkery',
      email: '[email protected]',
    },
    {
      id: 7,
      name: 'Kurtis Weissnat',
      username: 'Elwyn.Skiles',
      email: '[email protected]',
    },
    {
      id: 8,
      name: 'Nicholas Runolfsdottir V',
      username: 'Maxime_Nienow',
      email: '[email protected]',
    },
    {
      id: 9,
      name: 'Glenna Reichert',
      username: 'Delphine',
      email: '[email protected]',
    },
    {
      id: 10,
      name: 'Clementina DuBuque',
      username: 'Moriah.Stanton',
      email: '[email protected]',
    },
    {
      id: 11,
      name: 'Nicholas DuBuque',
      username: 'Nicholas.Stanton',
      email: '[email protected]',
    },
  ];
}

This uses the selectMode : 'multi'option to show a column with check boxes. The check boxes do show, but every time I use the pagination links to go to another page, the selection is cleared. I'm trying to solve this problem because I have a problem on my project which is analogous to this.

I tried to find documentation on how to persist the selection across pages, but was not successful as only a limited amount of documentation is available. This seems like a feature that's common enough that there should be more information on this out there, but doesn't seem to be the case. Any help on this issue would be greatly appreciated.

Answer 1

I haven't used multi-select with ng2-smart-tables myself, but the documentation mentions

doEmit: boolean - emit event (to refresh the table) or not, default = true

I'm not sure if this will work, but you could try to set this to false.

Create a DataSource from your data and then modify the paginator settings:

source: LocalDataSource;

constructor() {
    this.source = new LocalDataSource(this.data);
    this.source.setPaging({ doEmit: false });
}

If this doesn't work, you might try adding event-listeners that collect the checked rows on check and re-select them on refresh (or init). Add event callbacks to the table...

<ng2-smart-table [settings]="settings" [source]="source" (rowSelect)="onRowSelect($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

...log the events and see if you get any usable information from there.

onRowSelect(event) {
    console.log(event);
}

onUserRowSelect(event) {
    console.log(event);
}

If none of this helps, open a new issue on github and hope the developers know an easy way to fix this. :-) And if that fails too, do what I did and switch to angular/material2. Their documentation sucks, but overall I think it's better than most components out there.

Answer 2

import { LocalDataSource } from 'ng2-smart-table';

settings = {
  ...
}
data = [
  ...
]

source: LocalDataSource;

constructor() {
  this.source = new LocalDataSource(this.data);
  this.source.setPaging(1,10,false);
}