Pagination and Sort using Material Table

Question

I am using the Angular Material table component and I am trying to implement sort and pagination using TableDataSource. I went through some docs and demos but none have what I need. docs

irossimoline/angular4-material-table GitHub repository

StackBlitz

From the doc and example it is pretty simple to implement these two features, however, when using TableDataSource I get an error (see component.ts ngAfterViewInit() method)

Error TS2339 Propert 'paginator' does not exist on type 'TableDataSource'

Same error for the sort:

Error TS2339 Propert 'sort' does not exist on type 'TableDataSource'

HTML

<mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="ID">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
        <mat-cell *matCellDef="let row">          
            {{row.currentData.id}}
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Comment">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Commment </mat-header-cell>
        <mat-cell *matCellDef="let row">
            <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
                <input matInput [formControl]="row.validator.controls['Comment']" placeholder="Comment" [(ngModel)]="row.currentData.Comment">
            </mat-form-field>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="actionsColumn">
        <mat-header-cell *matHeaderCellDef>
            <button mat-icon-button color="accent" (click)="dataSource.createNew()"><i class="fa fa-plus mat-icon"></i></button>
        </mat-header-cell>
        <mat-cell *matCellDef="let row">
            <button *ngIf="!row.editing" mat-icon-button color="primary" focusable="false" (click)="row.startEdit()">
                <i class="fa fa-pencil mat-icon"></i>
            </button>
            <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">
                <i class="fa fa-check mat-icon"></i>
            </button>
            <button mat-icon-button color="primary" focusable="false" (click)="row.cancelOrDelete()">
                <i class="fa fa-times mat-icon"></i>
            </button>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

component.ts

class TodoItem {
    ID: number;
    Comment: string;
}
export class DashboardComponent implements OnInit {
    @Output() personListChange = new EventEmitter<TodoItem>();
    dataSource: TableDataSource<TodoItem>;
    @Output() personListChange = new EventEmitter<TodoItem>();
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    @Input() todoList = [];

    constructor(private _dashboardService:  private todoItemValidator: ValidatorService) {}

    ngOnInit(): void {
        this.GetToDoList(this.userID);
        this.dataSource = new TableDataSource<any>(this.todoList, TodoItem, this.todoItemValidator);
        this.dataSource.datasourceSubject.subscribe(todoList => this.personListChange.emit(todoList));
    }

    GetToDoList(ID: string) {

        ///some code
    }

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort; 
    }

erickyi2006 erickyi2006 · Accepted Answer · 2018-04-04T00:21:19

typo as your end. should be MatTableDataSource

Also should use interface instead of class for TodoItem

Pagination and Sort using Material Table

1 Answers