2

Want some help over here, I am new for react js hence needed a quick push to get my query resolved. I am displaying API response in the form of table on UI, here I am using react-bootstrap-table-next which gives lot of readily available features, but I am stuck at this point where I want to make my column headers sticky.

Means as we scroll down the column header should not go up. which will be very useful for users to see the data.

If there is way that via css we can achieve this that is also cool. Please let me know any resolution over this

It will be appreciated for the initiative. Thanks in advance!!!

UtkarshaG
  • 389
  • 1
  • 5
  • 19
  • Duplicate of https://stackoverflow.com/questions/64274496/how-to-fix-table-headers-at-the-top-using-css ? – arielhad Oct 11 '20 at 17:28

2 Answers2

0

Please refer to this link -

https://github.com/AllenFang/react-bootstrap-table/issues/723

It has a hacky solution but works:

for fixing the columns you can use position:sticky and for keeping the alignment of the columns you can use overflow: overlay for the scrolling:
e.g.

/* style for the stick, fixed column*/
.react-bs-container-body > table > tbody > tr > td:nth-child(1),
.react-bs-container-header > table > thead > tr:nth-child(1) > th:nth-child(1) {
 background-color: $background-color;
 position: sticky;
 position: -webkit-sticky;
 left: 0;
 z-index: 2;
}

/*keeping columns aligned during scrolling*/
.react-bs-container-body {
 max-width: 100%;
 overflow: overlay !important;
}
Soman Dubey
  • 3,798
  • 4
  • 22
  • 32
-1

It seems react-bootstrap-table-next still can't handle fixed header / fixed column for now. https://github.com/AllenFang/react-bootstrap-table/issues/723.

ouflak
  • 2,458
  • 10
  • 44
  • 49
Febriyoga Bagus Satria
  • 1