angular mat table scroll horizontal sticky header

Question

How do we add a horizontal scroll bar to a mat table with angular table sticky header ?

#css code

#table {
  width: 100%;
}
#table tr.mat-row{
  height: 40px;
}

#html code

Answer 1

Please take a look at this post : Mat Table with sticky header and Horizontal ,vertical scroll bar

You can set the width and height to the div container wrap around the mat-table. On stylesheet, you can apply something like this:

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow: auto;
}

Example with horizontal and vertical scroll: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh

To remove vertical scroll adjust the .example-container css class to be

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow-x: auto;
  overflow-y: hidden !important;
}

Example : https://stackblitz.com/edit/angular-hdg9xh-3xyt8z?file=src%2Fapp%2Ftable-sticky-columns-example.css

If you want to scroll through data just horizontally you would want the first column to act as the table header.

Example

<table>
  <tr>
    <th>Date</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>Event</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>Venue</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>