Fixed Table Header React-Bootstrap-Table-Next

Question

I'm having issues making my table header fixed when scrolling.

My React Table:

<div className="Rules-Container">
  <BootstrapTable 
    striped
    hover
    bordered={false}
    classes="tableBody"
    wrapperClasses="table-responsive"
    headerClasses="tableHeader"
    {...props.baseProps}
  />
</div>

My CSS:

.Rules-Container {
  max-height: 400px;
  min-height: 400px;
  border-bottom: 2px solid #767676;
  max-width: 100vw;
  position: relative;
  overflow-y: scroll;
  margin: 1rem;
  .tableHeader {
    font-size: 12px;
    position: relative;
    background-color: #d8d8d8;
    color: #414141;
    width: 100% !important;
    .th {
      position: sticky;
      top: 0;
    }
  }
}

.th position of sticky and top of 0 does nothing. I'm currently utilizing React-Bootstrap-Table-Next.

Answer 1

If you have a React Bootstrap table simply do this:

Table thead{
    position: sticky;
    top: 0px;
    margin: 0 0 0 0;
}

to fix at the top the table header and wrap the whole table on a div for instance className="tableContainer" something like this:

.tableContainer{
    background-color: #1E1F25;
    border-radius: 20px;
    height: 244px;
    padding: 0 10px 10px 10px;
    overflow: scroll;
}

The key part is to give a fixed height to your div which is wrapping the table and sticky position top 0 to your table header tag.