How to use the @sbb-esta/angular-business/table.SbbTableDataSource function in @sbb-esta/angular-business

})
export class TableShowcaseComponent {}

@Component({
  selector: 'sbb-table-showcase-1',
  templateUrl: './table-showcase-1.component.html'
})
export class TableShowcase1Component {
  displayedColumns: string[] = [
    'leftAligned',
    'groupedOne',
    'groupedTwo',
    'groupedThree',
    'centerAligned'
  ];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA_1, [
    ['groupedOne', 'groupedTwo', 'groupedThree']
  ]);

  deleteItem(element: any): void {
    const index = this.dataSource.data.indexOf(element);
    this.dataSource.data.splice(index, 1);
    this.dataSource._updateChangeSubscription();
  }
}

@Component({
  selector: 'sbb-table-showcase-2',
  templateUrl: './table-showcase-2.component.html'
})
export class TableShowcase2Component {
  displayedColumns: string[] = ['deviceName', 'orderDate', 'arrivalDate', 'lifecycleEnd', 'status'];

import { TABLE_SHOWCASE_DATA_GROUPED_COLS } from '../table-showcase-data';

@Component({
  selector: 'sbb-table-grouped-columns-showcase',
  templateUrl: './grouped-columns-table.component.html'
})
export class GroupedColumnsTableComponent {
  displayedColumns: string[] = [
    'leftAligned',
    'groupedOne',
    'groupedTwo',
    'groupedThree',
    'centerAligned'
  ];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA_GROUPED_COLS, [
    ['groupedOne', 'groupedTwo', 'groupedThree']
  ]);
}

]);

  deleteItem(element: any): void {
    const index = this.dataSource.data.indexOf(element);
    this.dataSource.data.splice(index, 1);
    this.dataSource._updateChangeSubscription();
  }
}

@Component({
  selector: 'sbb-table-showcase-2',
  templateUrl: './table-showcase-2.component.html'
})
export class TableShowcase2Component {
  displayedColumns: string[] = ['deviceName', 'orderDate', 'arrivalDate', 'lifecycleEnd', 'status'];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA_2, [
    ['orderDate', 'arrivalDate', 'lifecycleEnd']
  ]);

  isGroup(index, item): boolean {
    return item.isGroupBy;
  }
}

import { Component } from '@angular/core';
import { SbbTableDataSource } from '@sbb-esta/angular-business/table';

import { TABLE_SHOWCASE_DATA_GROUPED_ROWS } from '../table-showcase-data';

@Component({
  selector: 'sbb-table-grouped-rows-showcase',
  templateUrl: './table-grouped-rows-showcase.component.html'
})
export class TableGroupedRowsShowcaseComponent {
  displayedColumns: string[] = ['deviceName', 'orderDate', 'arrivalDate', 'lifecycleEnd', 'status'];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA_GROUPED_ROWS, [
    ['orderDate', 'arrivalDate', 'lifecycleEnd']
  ]);

  isGroup(index, item): boolean {
    return item.isGroupBy;
  }
}

import { Component } from '@angular/core';
import { SbbTableDataSource, Sort } from '@sbb-esta/angular-business/table';

import { TABLE_SHOWCASE_DATA } from '../table-showcase-data';

@Component({
  selector: 'sbb-table-sort-showcase',
  templateUrl: './table-sort-showcase.component.html'
})
export class TableSortShowcaseComponent {
  displayedColumns: string[] = ['letter', 'number', 'word', 'date'];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA.slice());

  sortData(sort: Sort) {
    const data = this.dataSource.data.slice();
    if (!sort.active || sort.direction === '') {
      this.dataSource.data = TABLE_SHOWCASE_DATA;
      return;
    }

    this.dataSource.data = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'letter':
          return this.compare(a.letter, b.letter, isAsc);
        case 'number':
          return this.compare(a.number, b.number, isAsc);
        case 'word':

import { TABLE_SHOWCASE_DATA_SIMPLE } from '../table-showcase-data';

@Component({
  selector: 'sbb-table-simple-showcase',
  templateUrl: './simple-table.component.html'
})
export class SimpleTableComponent {
  displayedColumns: string[] = [
    'columnOne',
    'columnTwo',
    'columnThree',
    'columnFour',
    'columnFive'
  ];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA_SIMPLE);
}

import { Component } from '@angular/core';
import { SbbTableDataSource } from '@sbb-esta/angular-business/table';

import { TABLE_SHOWCASE_DATA } from '../table-showcase-data';

@Component({
  selector: 'sbb-table-actions-showcase',
  templateUrl: './table-actions-showcase.component.html'
})
export class TableActionsShowcaseComponent {
  displayedColumns: string[] = ['letter', 'number', 'word', 'date'];
  dataSource: SbbTableDataSource = new SbbTableDataSource(TABLE_SHOWCASE_DATA.slice());

  deleteItem(element: any): void {
    const index = this.dataSource.data.indexOf(element);
    this.dataSource.data.splice(index, 1);
    this.dataSource._updateChangeSubscription();
  }
}