Hiding Angular Material Data Table Columns

Ole Ersoy
2 min readSep 5, 2019


Photo by Dawid Zawiła on Unsplash

Updated Version

There’s an updated version of this article here:


We have a material data table with the colums id and Decription . We want to have two mat-checkbox fields, one for id and one for description that when clicked hide the corresponding column in the data table.


We’ll use a columnsDefinitions object to store which column definitions are hidden:

columnDefinitions = [
{ def: 'id', hide: this.cb1.value},
{ def: 'description', hide: this.cb2.value}

The RxJS merge operator is used to observe the mat-checkbox fields and update the columnDefinitions :

Finally we’ll filter the columnDefinitions to get the columns we want to display:

getDisplayedColumns():string[] {
return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);

And we’ll use getDisplayedColumns in our template like this:

<mat-header-row *matHeaderRowDef="getDisplayedColumns()">
<mat-row *matRowDef="let row; columns: getDisplayedColumns()"></mat-row>


Simpler Demo

This demo is shorter. It uses a displayedColumns$:Observable<string[]> to display the columns. This should be better from a performance point of view, since the getDisplayedColumns() function will not be called on all state changes.

Related Concepts

Brought to You By



Ole Ersoy

Founder of Firefly Semantics Corporation