React-bootstrap-table2: Fixed Height for pagination table

[leon-cgn]

hey,
I was wondering how it's possible to implement a table with pagination where the pagination row at the bottom stays fixed and the data row is scrollable (depending on the data's height).
Please see Screenshot attached.

thanks in advance!

[Denis-String]

Good morning, I believe this helps you, but it will not bring the expected final result. But you can use it as a base to try to get what you need.

  .scrollTable{
      height: 450px;   
      overflow-y: auto;    /* Trigger vertical scroll    */
      overflow-x: auto;  /* Hide the horizontal scroll */
    }

md5-1625fb8367e2a89a0c3be57799096870

That way it works, but the page stays inside the scroll, (which is not the expected result) but if you can, please let me know, as it is very useful

[leon-cgn]

Thanks for your reply, I figured something similiar out:
in .css

.react-bootstrap-table {
  height: 500px;
  overflow: auto;
}

this way the pagination footer stays while the data view is scrollabe.

Now I am working on a fixed header, too

[Denis-String]

Perfect, I'm trying to leave the header fixed too, if you can, please let me know, it will be of great help

[jlemieux]

I am also trying to have fixed headers. But look here... #230:

Is there anyway to have a fixed header with a vertical scroll?

In legacy react-bootstrap-table we have, but in react-bootstrap-table2, I can't promise this due to there're too many unalign issues if people enable the vertical scroll bar. However, I will still working on this issue

[AllenFang]

HI all, I think fixed header feature will not be supported in near future. But I'm still thinking the the feasibility for it with a better solution. Please do let me know if you guys have any cool idea, thanks.

[harmeet27]

Hi @leon-jasper were you able to figure out fixed header ?

[leon-cgn]

hey @harmeet27 ,
no i did not work further on this.

[BlaineBradbury]

@harmeet27

This is not hard to bake in with pure CSS... here's my example for a react-bootstrap-table2 w/ 3 columns:
1st: checkbox col, 2nd: data col1, 3rd: data col2

/* Make tbody a block and give it the desired fixed height w/ vertical scroll.
   If I set overflow to auto, and the data set is short so no scrollbar appears...
   there will be a discrepancy between tbody and thead of 16px.  Modern browsers
   should allow the tbody to stretch, so this is not noticeable.  If something older
   won't stretch, you'll have to do some dynamic css using props and classes or
   something in your implementation... fyi.*/
.react-bootstrap-table tbody {
    display: block;
    max-height: 500px;
    /*overflow-y: scroll;*/
    overflow: auto;
}

/* Make tr's in both thead & tbody into tables w/ fixed width layout */
.react-bootstrap-table > .headerClass > thead > tr,
.react-bootstrap-table > .headerClass > tbody > tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/* This tr setup could be just...
.react-bootstrap-table thead > tr, tbody > tr {
...but I am running older react-bootstrap-table side-by-side and it stomps on those
tables unless I reference the {headerClass} in my -table2 Column Definition directly.*/

You will probably need to specify widths for each header and row column unless the table-layout: fixed look is good enough for your case. I specified these targeting the {headerClasses} & {classes} props in my Column Definition (available in the react-bootstrap-table2 library), but this could be done a number of ways to your liking.

/* This aligns the checkbox column widths in header & rows if you are using 'checkbox' mode */
.react-bootstrap-table tbody > tr > td:first-of-type,
.react-bootstrap-table thead > tr > th:first-of-type {
    padding: 0px 0px 0px 0px;
    text-align: center;
    vertical-align: middle;
    width: 30px;
}

/* I only need to specify the middle header column, because the width is 100% on the row,
so header col2 will come out right */
.react-bootstrap-table thead > tr > .headerClasses /*'header col1 name'*/ {
    width: 415px;
}

/* 'header col2 name' is not needed, but it comes out to 100px in this case
... see 'data col2 name'
This should match the width on 'header col1 name' */
.react-bootstrap-table tbody > tr > .classes /*'data col1 name'*/ {
    width: 415px;
}

I removed 16px from the intended 100px in my last column to accommodate the scrollbar. This will force 'header col2 name' to be 100px. If I needed all 100px, It would simply force the 'header col2 name' out to like 114-116px. 1.1 em or 16px is the average width of the scroll bar, so remove this width from last column.

.react-bootstrap-table tbody > tr > .classes /*'data col2 name'*/ {
    width: 84px;
}

And keep in mind, you can make this more targeted if you have more than one table on the page by using the classes prop on each BootstrapTable definition, and then targeting that class in the css like...

.react-bootstrap-table > .classes /*'name from table def'*/

[akash-more]

I have achieved this using CSS here's my code:
My Bootstrap table id is "mapping_table". You may need to change the width that is mentioned as 98.7% as per your table to get your headers aligned properly.

mapping_table tbody {

display:block;
height:200px;
overflow-y:scroll;
}

mapping_table thead{

display:table;
width:98.7%;
table-layout:fixed;
}

mapping_table tbody tr {

display:table;
width:100%;
table-layout:fixed;
}

[fulin426]

https://stackoverflow.com/questions/56040119/table-with-horizontal-and-vertical-scroll-with-fixed-header

It looks like using a sticky header to fix the header to the top worked for me.

th {
position: sticky:
top: 0;
}

Then add overflow to the parent div.

[HridayK97]

Thanks for your reply, I figured something similiar out:
in .css

.react-bootstrap-table {
  height: 500px;
  overflow: auto;
}

this way the pagination footer stays while the data view is scrollabe.

Now I am working on a fixed header, too

Hey @leon-cgn I need to do the same thing, how did you exactly apply this css to the component in React? Thanks!