TypeError: table.renderRows is not a function


I'm using Angular material datatable with array as datasource. I would update my table every data change using renderRows() method as mentionned in the doc.

I have my <strong>ts file</strong>

import { Component, OnInit } from '@angular/core'; import { MatTableDataSource } from '@angular/material'; import { AjouttextService } from '../ajouttext.service'; import { DataSource } from "@angular/cdk/collections"; import { Observable } from "rxjs/Observable"; import { nomchamp } from '../model'; @Component({ selector: 'app-datatable', templateUrl: './datatable.component.html', styleUrls: ['./datatable.component.css'] }) export class DatatableComponent implements OnInit { constructor(private dataService: AjouttextService) { } data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }]; displayedColumns = ['text']; dataSource = new MatTableDataSource(this.data); //new UserDataSource(this.dataService); applyFilter(filterValue: string) { filterValue = filterValue.trim(); // Remove whitespace filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches } ngOnInit() { } ajoutText(newtext: string, table: any) { \\ADD TEXT let noew: nomchamp = { id: "44", text: newtext }; this.data.push(new); table.renderRows(); } }

There <strong>HTML file</strong> where I declare #table variable and pass it in ajoutText function

<form class="form"> <mat-form-field class="textinput"> <input #newtext matInput placeholder="Ajoutez votre texte" value=""> </mat-form-field> <button type="button" mat-raised-button color="primary" (click)="ajoutText(newtext.value,table)">Ajouter</button> </form>


<div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <!-- Position Column --> <ng-container matColumnDef="text"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.text}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>

When I add text in input and click the button I get this error

ERROR TypeError: table.renderRows is not a function


Seems like you need to update your <a href="https://www.npmjs.com/package/@angular/cdk" rel="nofollow">@angular-cdk</a> package to 5.2.

After checking the source code, renderRows was only added since that version:

<a href="https://github.com/angular/material2/blob/5.1.x/src/cdk/table/table.ts" rel="nofollow">5.1 version of CdkTable source code</a> -> does not contain a renderRows method.

<a href="https://github.com/angular/material2/blob/5.2.x/src/cdk/table/table.ts#L285" rel="nofollow">5.2 version of CdkTable source code</a> -> contains a renderRows method.

(Note that MatTable extends CdkTable.)


I used ViewChild to make it work.

First you have to import it:

import { ViewChild } from '@angular/core';

Then just after

export class DatatableComponent implements OnInit {

you declare:

@ViewChild(MatTable) table: MatTable<any>;

Now you can access it and it should have the renderRows method.


  • How to scan values from each words based on tables and then calculate it And Make The VSM (Vector Sp
  • Angular 2 - how to pass data to a child component without rendering the child component twice?
  • SharpSSH - SSHExec, run command, and wait 5 seconds for data!
  • Removing part of path in php
  • Value is only sliced every two times despite running every time
  • angular 2 Property 'push' does not exist on type 'Observable'
  • Unity Dependency Injection from usercontrol viewmodel to customUsercontrol Viewmodel
  • Http requests made from Ngxs state doesn't get detected by Angular (zone related issue)
  • Angular lightbox: Can't bind to 'data-lightbox' since it isn't a known property
  • How to use CSS mixins with Angular 2, Dart and Polymer
  • NgbModal.open not working in Angular 4
  • Angular2: json does not exist on type object
  • Share data between sibling components using non-singleton service
  • Angular - Override CSS of swimlane/ngx-datatable
  • Trouble passing and accessing data to stateless component in Angular
  • Access Angular 2 Inputs (properties) inside constructor
  • GWT question on RPC
  • Angular 4 - rxjs BehaviorSubject usage in Service
  • Applying overflow hidden to body [duplicate]
  • How to retrieve the Id of a single Firestore document?
  • Uncaught Reference Input is not defined- @Input() not working in Angular 2
  • Incorrect behaviour when selecting chips in Angular Material
  • Cannot invoke my method on the array type int[]
  • Regarding starting the threads on a condition
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • How can I set a binding to a Combox in a UserControl?
  • Create DicomImage from scratch using Dcmtk
  • How to access EntityManager inside Entity class in EJB3
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • Javascript + PHP Encryption with pidCrypt
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • Load html files in TinyMce
  • Angular 2 constructor injection vs direct access
  • Getting Messege Twice Using IMvxMessenger
  • How to stop GridView from loading again when I press back button?
  • JaxB to read class hierarchy
  • How can i traverse a binary tree from right to left in java?
  • java string with new operator and a literal
  • How can I use threading to 'tick' a timer to be accessed by other threads?