Making the Angular Material Data Table Rows Fit Content

Ole Ersoy
1 min readSep 3, 2019
Photo by Amanda Jones on Unsplash

Scenario

The total width of our header columns expands beyond the viewport size.

The mat-header-row , as currently designed, has its display property set to flex causing it to take on the width of the parent container.

Thus since the total column width expands beyond this width, our table CSS will have short comings.

Solution

Set the display property for mat-header-row and mat-row to inline-flex , because it will cause the container to expand to fit the content it contains.

.mat-footer-row,
.mat-header-row,
.mat-row {
display: inline-flex;
min-width: 100%;
}

Angular Feature Request

--

--