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
-
Does this answer your question? Floating horizontal scrollbar with mat-table in Angularrofrol– rofrol2023-04-25 10:05:29 +00:00Commented Apr 25, 2023 at 10:05
Add a comment
|
1 Answer
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>
21 Comments
Diya Agastya
How do we remove the vertical scroll ? I only need the horizontal scroll.
Steve020
I added to my answer on how you can just do the horizontal scroll. Your x axis is your horizontal and your y axis is vertical.
Diya Agastya
my goal Sir is to add a horizontal scroll if there are already multiple columns without the vertical inner scroll and the table header columns should be sticky without the vertical inner scroll and just by using the window scroll.
Diya Agastya
the problem with your ssecond example Sir @Steve is that the sticky is not working without the inner vertical scroll , it should work using the window scroll
Diya Agastya
how does the sticky work using the window Scroll ? ..that is my goal Sir
|