How to use the @angular/material.MatTableDataSource function in @angular/material

To help you get started, we’ve selected a few @angular/material examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github marklogic / marklogic-data-hub / web / src / main / ui / app / components / jobs-new / ui / manage-jobs-ui.component.ts View on Github external
ngOnInit() {
    this.setJobsTargetDatabase();
    this.dataSource = new MatTableDataSource(this.jobs);
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'name':
          return item['flowName'];
        case 'duration':
          return differenceInSeconds(item['startTime'], item['endTime']);
        case 'committed':
          return item['successfulEvents'];
        case 'errors':
          return item['failedEvents'];
        default: return item[property];
      }
    };
    // Check all filters across data source
    this.dataSource.filterPredicate = (data: any, filterValues: string) => {
      filterValues = JSON.parse(filterValues);
github Texera / texera / core / new-gui / src / app / workspace / component / result-panel / result-panel.component.ts View on Github external
// When there is a result data from the backend,
    //  1. Get all the column names except '_id', using the first instance of
    //      result data.
    //  2. Use those names to generate a list of display columns, which would
    //      be used for displaying on angular mateiral table.
    //  3. Pass the result data as array to generate a new angular material
    //      data table.
    //  4. Set the newly created data table to our own paginator.


    // generate columnDef from first row, column definition is in order
    this.currentDisplayColumns = Object.keys(resultData[0]).filter(x => x !== '_id');
    this.currentColumns = ResultPanelComponent.generateColumns(this.currentDisplayColumns);

    // create a new DataSource object based on the new result data
    this.currentDataSource = new MatTableDataSource(resultData);

    // set the paginator to be the new DataSource's paginator
    this.currentDataSource.paginator = this.paginator;
  }
github thomaschampagne / elevate / plugin / app / src / app / year-progress / year-progress-table / year-progress-table.component.ts View on Github external
this.yearProgressStyleModel.yearsColorsMap));

		// Find progressions for moment watched on selected years
		const progressAtDayModels: ProgressAtDayModel[] = this.yearProgressService.findProgressionsAtDay(this.yearProgressions,
			this.momentWatched,
			this.selectedProgressType.type,
			this.selectedYears,
			this.yearProgressStyleModel.yearsColorsMap);

		// If target progression given, seek for target model of watched day.
		// It includes the value that athlete should reach at that day to respect target
		const targetProgressModel = (this.targetProgressModels) ? _.find(this.targetProgressModels, {
			dayOfYear: this.momentWatched.dayOfYear()
		}) : null;

		this.dataSource = new MatTableDataSource(); // Force table to refresh with new instantiation.
		this.dataSource.data = this.rows(progressAtDayModels, targetProgressModel);
	}
github Robinyo / serendipity / projects / sales / src / lib / components / accounts / accounts.component.ts View on Github external
(response: any) => {

        this.logger.info('ContactsComponent: subscribe() success handler');

        this.count = response.body.meta.count;
        this.items = response.body.data.map((item => this.entityAdapter.adapt(item)));

        // this.logger.info('count: ' + response.body.meta.count);
        // this.logger.info('items: ' + JSON.stringify(this.items, null, 2));

        this.dataSource = new MatTableDataSource(this.items);
        this.dataSource.data = this.items;
        this.dataSource.sortingDataAccessor = pathDataAccessor;
        this.dataSource.sort = this.sort;

      },
      (error) => {
github marklogic / marklogic-data-hub / web / src / main / ui / app / components / flows-new / edit-flow / mastering / merging / ui / merge-collections-ui.component.ts View on Github external
ngOnInit() {
    console.log('ngOnInit this.mergeCollections', this.mergeCollections);
    this.dataSource = new MatTableDataSource(this.mergeCollections.collections);
  }
github Ride-The-Lightning / RTL / src / app / lnd / switch / forwarding-history.component.ts View on Github external
loadForwardingEventsTable(forwardingEvents: ForwardingEvent[]) {
    this.forwardingHistoryEvents = new MatTableDataSource([...forwardingEvents]);
    this.forwardingHistoryEvents.sort = this.sort;
    this.forwardingHistoryEvents.data.forEach(event => {
      event.timestamp_str = (event.timestamp_str === '') ? '' : formatDate(event.timestamp_str, 'MMM/dd/yy HH:mm:ss', 'en-US');
    });

    this.logger.info(this.forwardingHistoryEvents);
  }
github thomaschampagne / elevate / plugin / app / src / app / activities / activities.component.ts View on Github external
public dataSourceSetup(): void {

		this.dataSource = new MatTableDataSource();
		this.dataSource.paginator = this.matPaginator;

		const pageSizePreference = parseInt(localStorage.getItem(ActivitiesComponent.LS_PAGE_SIZE_PREFERENCE), 10);
		if (!_.isNaN(pageSizePreference)) {
			this.dataSource.paginator.pageSize = pageSizePreference;
		}

		this.dataSource.sort = this.matSort;

		this.dataSource.sortingDataAccessor = (activity: SyncedActivityModel, sortHeaderId: string) => {

			const column = _.find(ActivityColumns.Definition.ALL, {id: sortHeaderId});

			if (column && column.id) {

				const valueAtPath = _.at(activity as any, column.id)[0];
github Ride-The-Lightning / RTL / src / app / clightning / invoices / invoices.component.ts View on Github external
loadInvoicesTable(invoices) {
    this.invoices = new MatTableDataSource([...invoices]);
    this.invoices.sort = this.sort;
    this.invoices.data.forEach(invoice => {
      if (undefined !== invoice.paid_at_str) {
        invoice.paid_at_str = (invoice.paid_at_str === '') ? '' : formatDate(invoice.paid_at_str, 'MMM/dd/yy HH:mm:ss', 'en-US');
      }
      if (undefined !== invoice.expires_at_str) {
        invoice.expires_at_str = (invoice.expires_at_str === '') ? '' : formatDate(invoice.expires_at_str, 'MMM/dd/yy HH:mm:ss', 'en-US');
      }
    });
    setTimeout(() => { this.flgAnimate = false; }, 5000);
    this.logger.info(this.invoices);
  }
github apereo / cas-management / webapp-mgmt / cas-management-webapp / src / app / history / history.component.ts View on Github external
.subscribe((data: { resp: History[]}) => {
        this.dataSource = new MatTableDataSource(data.resp);
        this.dataSource.paginator = this.paginator.paginator;
      });
    this.route.params.subscribe((params) => this.fileName = params['fileName']);