@angular/material/table#MatTableDataSource TypeScript Examples

addAdGroupsToTable() {
    this._adGroupRows = this.createAdGroupRows();
    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(this._adGroupRows);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    this.applyFilterPredicate();
    // Adjust sorting criteria
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'adgroup-sel':
          return this.adgroup_sel.selected.includes(item);
        case 'headline-sel':
        case 'desc-sel':
          return (
            this.headline_sel.selected.includes(item) ||
            this.description_sel.selected.includes(item)
          );
        default:
          return item[property];
      }
    };
  }

sortAndFilter(institutions: any): void {
    let i = 0;
    institutions.forEach((institution) => {
      const len = institution.repo_names.length;
      institutions[i].repo_names = institution.repo_names
        .slice(0, this.reposToDisplay)
        .join(', ');
      if (len >= this.reposToDisplay) {
        institutions[i].repo_names += '...';
      }
      if (
        this.sectorFilters.some((value: any) => {
          return value.sector === institution.sector;
        })
      ) {
        this.sectorFilters[
          this.sectorFilters.findIndex((value: any) => {
            return value.sector === institution.sector;
          })
        ].count += 1;
      }

      i++;
    });

    this.dataSource = new MatTableDataSource(institutions);
    this.dataSource.sort = this.sort;

    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);
    this.dataSource.paginator = this.paginator;
    this.numInstitutions = this.dataSource.filteredData.length;
    timeout(() => {
      this.includeForksChange(false);
    }, 100);
  }

private handleDeals(deals: Deal[]) {
    this.dataLoading = false;
    this.dataSource = new MatTableDataSource(deals);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sortingDataAccessor = sortingDataAccessor;
    this.dataSource.sort = this.sort;
    this.setFilterData();
    this.dataSource.filterPredicate = this.createFilter();
  }

async ngOnInit() { 
    const id = this.route.snapshot.paramMap.get('id');

    const log = await this.botService.getSavedLog(id);
    this.changes = log.changes.reverse();
    
    this.dataSource = new MatTableDataSource(this.changes);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

constructor(
    public i18n: I18nService,
    private logger: LoggerService,
    private dialog: MatDialog,
    private http: HttpClient,
    private snackbar: MatSnackBar,
    private eventbus: EventbusService,
    private breakpointObserver: BreakpointObserver,
  ) {
    this.eventbus.room$.subscribe((event: IEventType) => {
      if ( event.type === EventType.room_created ) {
        this.roomList();
      }
    });
    this.dataSource = new MatTableDataSource<RoomElement>(this.rooms);
    this.isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');
    if (this.isSmallScreen) {
      this.displayedColumns = ['select', 'name', 'id', 'operation'];
    }
  }

public tableDataSource = new MatTableDataSource([]);

public ngOnInit(): void {
    this.dataSource = new MatTableDataSource<Employee>(this.employeeTableData);

    this.dataSource.paginator = this.paginator;
  }

public dataSource = new MatTableDataSource<TransactionInfo>();

dataSource = new MatTableDataSource();

public dataSource: MatTableDataSource<Employee>;

setTableDataSource(data: any) {
    this.tableDataSource = new MatTableDataSource<any>(data);
    this.tableDataSource.paginator = this.matPaginator;
    this.tableDataSource.sort = this.matSort;
  }

getDebugsList(): void {
        this.loading = true;
        this.debugService.getList().subscribe((response) => {
            this.loading = false;
            this.debugsList = new MatTableDataSource<IndexNode>(response);
            this.debugsList.sort = this.sort;
        });
    }

dataSource: any = new MatTableDataSource();

debugsList: MatTableDataSource<IndexNode>;

public showFilterInput(): void {
    this.isShowFilterInput = !this.isShowFilterInput;
    this.dataSource = new MatTableDataSource<Employee>(this.employeeTableData);
  }

dataSource = new MatTableDataSource(ELEMENT_DATA);

dataSource: MatTableDataSource<any>

ngOnInit(): void {
    this.dataService.loadRepoData().then((repoData) => {
      repoData = repoData.jsonData;
      this.item = Object.assign({}, this.data.institution);
      this.item.repos = this.item.repos.map((repoUUID) => {
        const t = repoData.find((repo) => {
          return repo.uuid == repoUUID;
        });
        console.log(repoUUID);
        return t;
      });
      this.includeForks = this.data.includeForks;
      if (this.item.repos) {
        this.item.repos.forEach((repo) => {
          repo.name = lowerCase(repo.name);
        });
      }
      if (this.item.repos.length > 0) {
        this.dataSource = new MatTableDataSource(this.item.repos);
      }
      this.sort.active = sortState.active;
      this.sort.direction = sortState.direction;
      this.sort.sortChange.emit(sortState);
      this.dataSource.filterPredicate = (data: any, filter: string) => {
        let datastring: string = '';
        let property: string;
        let filterNew = this.recordFilter;
        for (property in data) {
          datastring += data[property];
        }
        datastring = datastring.replace(/\s/g, '').toLowerCase();
        filterNew = filterNew.replace(/\s/g, '').toLowerCase();
        return (
          datastring.includes(filterNew) && (this.includeForks || !data.fork)
        );
      };
      this.triggerFilter();
      if (this.item.org_names.length == 1) {
        this.displayedColumns = this.displayedColumns.filter(
          (e) => e !== 'organization'
        );
      }
      if (this.includeForks) {
        this.includeForksChange(false);
      }
      console.log(this.item);
    });
  }

dataSource: MatTableDataSource<AdGroupRow>;

dataSource = new MatTableDataSource<StatisticsModel>([]);

dataSource = new MatTableDataSource();

private setupSubscriptions() {
        this.subscriptions.add(
            this.tableData$.pipe(filter((t) => !!t)).subscribe((data) => {
                setTimeout(() => {
                    this.dataSource = new MatTableDataSource<any>(data);
                    this.dataSource.sort = this.sort;

                    if (this.showPagination && this.paginator) {
                        this.dataSource.paginator = this.paginator;

                        const numOfPages = this.paginator.getNumberOfPages();

                        this.pageCountArray = this.getPageCountArray(numOfPages);

                        this.changeDetectorRef.detectChanges();
                    }
                });
            })
        );

        if (this.showPagination) {
            this.subscriptions.add(
                combineLatest([
                    this.staffWebTableService.currentPageIndex$,
                    this.staffWebTableService.currentPageSize$
                ]).subscribe(([pageIndex, pageSize]) => {
                    if (!this.skipToPageFormGroup) {
                        this.buildSkipToPageForm(pageIndex + 1);
                    }

                    setTimeout(() => {
                        this.paginator.pageIndex = pageIndex;
                        this.paginator.pageSize = pageSize;

                        this.paginator.page.emit({
                            pageSize: pageSize,
                            pageIndex: pageIndex,
                            length: this.paginator.getNumberOfPages()
                        });
                    });
                })
            );
        }

        if (this.skipToPageFormGroup) {
            this.subscriptions.add(
                this.skipToPageFormGroup.get('pageIndex').valueChanges.subscribe((value: number) => {
                    const index = value - 1;
                    const size = this.paginator.pageSize;
                    const length = this.paginator.getNumberOfPages();

                    this.staffWebTableService.setPageIndex(index);

                    this.updatePageIndex(index, size, length);
                })
            );
        }
    }

ngOnInit() {
    this.displayedColumns = this.tableService.getDataConf().map((c) => c.prop)
    this.dataSource = new MatTableDataSource(this.tableService.getAll());
  }

ngOnInit(): void {
    // Simulating a server call
    setTimeout(() => {
      this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }, 1000);
  }

// Grid config
  dataSource = new MatTableDataSource(<IncomingOffer[]>[])

users = new MatTableDataSource<User>();

dataSource: MatTableDataSource<PeriodicElement>;

dataSource = new MatTableDataSource<any>();

@Input() dataSource: MatTableDataSource<any>;