How to use the @pebula/ngrid.createDS function in @pebula/ngrid

@Example('pbl-column-width-example-component', { title: 'Column Width' })
export class ColumnWidthFeatureExample {

  columns = columnFactory()
    .table(
      { prop: 'id', width: '50px', pIndex: true },
      { prop: 'name', width: '25%' },
      { prop: 'email' },
      { prop: 'country', width: '35%' },
      { prop: 'language' },
      { prop: 'settings.timezone', label: 'TZ', width: '30px' },
      { prop: 'balance' },
      { prop: 'gender' },
    )
    .build();
  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  constructor(private datasource: DemoDataSource) { }
}

templateUrl: './column-width.component.html',
  styleUrls: ['./column-width.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ColumnWidthGridExampleComponent {

  columns1 = columnFactory()
    .table(
      { prop: 'name', width: '100px' },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date', width: '25%' },
      { prop: 'bio' },
    )
    .build();
  ds1 = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  columns2 = columnFactory()
    .table(
      { prop: 'name', minWidth: 500 },
      { prop: 'gender', minWidth: 500 },
      { prop: 'birthdate', type: 'date', minWidth: 500 },
      { prop: 'email', minWidth: 500 },
    )
    .build();
  ds2 = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  columns3 = columnFactory()
    .default({ resize: true })
    .table(
      { prop: 'name' },
      { prop: 'gender', maxWidth: 50 },

encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-resizing-with-the-api-example', { title: 'Resizing With The Api' })
export class ResizingWithTheApiExample {

  columns = columnFactory()
    .table(
      { prop: 'id', width: '40px' },
      { prop: 'name' },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' }
    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 500) ).create();

  constructor(private datasource: DemoDataSource) { }

  resize(table: PblNgridComponent): void {
    const id = table.columnApi.findColumn('id');
    table.columnApi.resizeColumn(id, '200px');
  }
}

)
    .headerGroup(
      {
        prop: 'name',
        span: 4,
        label: 'Personal Info',
      },
      {
        prop: 'settings.avatar',
        span: 3,
        label: 'User Settings',
      }
    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 90) ).create();

  constructor(private datasource: DemoDataSource) { }

  onEnterLeaveEvents(event: PblNgridRowEvent | PblNgridCellEvent, isEnter = false) {
    if (isCellEvent(event)) {
      if (isEnter) {
        event.cellTarget.classList.add('cell-hovered');
        event.rowTarget.classList.add('row-cell-hovered');
      } else {
        event.cellTarget.classList.remove('cell-hovered');
        event.rowTarget.classList.remove('row-cell-hovered');
      }
    } else {
      if (isEnter) {
        event.rowTarget.classList.add('row-hovered');
      } else {

private createDataSource(): void {
        this.dataSource = createDS()
            .onTrigger(() => this.directoryObservable)
            .create();

        this.dataSource.selection.changed.subscribe(selection => {
            this.selectedRows = selection.source.selected;
        });
    }

{ prop: 'gender', sort: true, width: '50px' },
    { prop: 'birthdate', type: 'date', sort: true }
  )
  .build();

@Component({
  selector: 'pbl-column-sort-example',
  templateUrl: './column-sort.component.html',
  styleUrls: ['./column-sort.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-column-sort-example', { title: 'Programmatic Sorting' })
export class ColumnSortExample {
  columns = COLUMNS;
  ds = createDS().onTrigger( () => this.datasource.getPeople(500) ).create();

  constructor(private datasource: DemoDataSource) { }

  clear(): void {
    this.ds.setSort();
  }

  toggleActive(columnId: string): void {
    const currentSort = this.ds.sort;
    let order: PblNgridSortOrder = 'asc';
    if (currentSort && currentSort.column && currentSort.column.id === columnId) {
      order = currentSort.sort && currentSort.sort.order as any;
      if (order === 'asc') {
        order = 'desc';
      } else if (order === 'desc') {
        this.clear();

changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-detail-row-example', { title: 'Detail Row' })
export class DetailRowExample {
  columns = columnFactory()
    .default({minWidth: 100})
    .table(
      { prop: 'detailRowHandle', label: ' ', type: 'detailRowHandle', minWidth: 48, maxWidth: 48 },
      { prop: 'id', sort: true, width: '40px' },
      { prop: 'name', sort: true },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' }
    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 4) ).create();

  lastToggleEvent: PblDetailsRowToggleEvent;

  constructor(private datasource: DemoDataSource) { }

  onToggleChange(event: PblDetailsRowToggleEvent): void {
    this.lastToggleEvent = event;
  }
}

@Example('pbl-context-menu-example', { title: 'Context Menu: Excel Style Header' })
export class ContextMenuExample {
  columns = columnFactory()
    .default({minWidth: 100})
    .table(
      { prop: 'id', sort: true, width: '40px' },
      { prop: 'name', sort: true },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' },
      { prop: 'bio' },
      { prop: 'email', minWidth: 250, width: '250px' },
      { prop: 'language', headerType: 'language' },
    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 100) ).create();

  constructor(private datasource: DemoDataSource) { }
}

{ id: 'header3', label: 'Header 3'},
    )
    .headerGroup(
      { prop: 'id', span: 2, label: 'ID, Name & Gender' },
      { prop: 'country', span: 1, label: 'Country & Language' },
    )
    .footer(
      { id: 'footer1', label: 'Footer 1', width: '25%'},
      { id: 'footer2', label: 'Footer 2'},
    )
    .footer(
      { id: 'footer3', label: 'Footer 3'},
    )
    .build();

  ds = createDS()
    .keepAlive()
    .onTrigger( () => this.datasource.getPeople(0, 500) )
    .create();

  explicitGridHeight = true;
  fallbackMinHeight = true;
  vScroll = true;

  settings: {
    explicitGridHeight: boolean;
    fallbackMinHeight: number;
    vScroll: boolean;
  }

  constructor(private datasource: DemoDataSource, private cdr: ChangeDetectorRef) {
    this.createSettings();

private getDatasource() {
    return createDS()
      .onTrigger( () => this.datasource.getCustomers(0, this.collectionSize) )
      .create();
  }
}