CODEWITHSUNDEEP
angularangular-material
Evanst
Evanst

Reputation: 247

Angular Material table Sizing/Scroll

I have an Angular Material table with many columns. It is wider than the screen. When I scroll, the table rows extend past the edge of the table container.

See this StackBlitz project. https://stackblitz.com/edit/angular-r6xdgk Use the scrollbar at the bottom and you will see the strange formatting.

Thanks in advance for any help!

Upvotes: 22

Views: 98877

Answers (5)

rofrol
rofrol

Reputation: 15276

In Angular 15

.table-responsive {
  overflow-x: auto;
}
.table-responsive table {
  white-space: nowrap;
}

From Horizontal scroll on overflow of table

This also worked, but columns were squashed together:

.mat-mdc-table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

Taken from https://stackblitz.com/edit/angular-mat-table-scroll

Upvotes: 2

carraua
carraua

Reputation: 1528

I hope this can also help others dealing with the width of the mat-table rows.

In this example: https://material.angular.io/components/table/examples#table-sticky-complex-flex a min-width with a fixed value in px is set for mat-rows.

To avoid having to do that you can use:

.mat-row {
  min-width: max-content;
}

This will calculate the content width of the row without having to sum each column width. This will keep as well the style for the mat-row in the whole scrolling area.

Upvotes: 3

Simon_Weaver
Simon_Weaver

Reputation: 146188

If you know the widths of your cells then add them all together and set that as the width of the table.

And if that sounds obvious, did you think about using calc if they're in mixed units :

enter image description here

Worked for me.

Note: I set min-width so if the table is less than the width of the page it should still work with other flex settings.

Upvotes: 0

Muhammad Sohail
Muhammad Sohail

Reputation: 878

I hope this will be help full for others to add Horizontal Scrolling to mat-table and column width according to cell content.

.mat-table {
  overflow-x: scroll;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

Upvotes: 22

Anthony DiTomasso
Anthony DiTomasso

Reputation: 556

Add 

.example-container {
  overflow-x: scroll;
}

To the app.component.css to fix the top bar. The bottom will need a similar styling. You can't use width:100% because it is technically outside the table. So it can not pick up the width automatically.

Upvotes: 12

Related Questions