How to Add Horizontal Scrollbar in a React Bootstrap Table

How to Handle Scrollbar event in a Table in React

You need to add the event listener to window and not the element:

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true })
  }, []);

  function handleScroll(e) {
    if (e.currentTarget.className === 'react-bootstrap-table') {
       console.log("hello")
    }
  }

react-bootstrap-table2 how to handle large display in expanded row

Give a class to the container in which the whole data of the expanded row is coming.

Example:-

const expandRow = {
    renderer: row => {
        var columns = vm.generateColumns();
        var product_list = vm.state.products_by_ean[row.ean_code];
        var content = {};
        .........
        <div className="expanded-container">
            <BootstrapTable
                {...props.baseProps}
                noDataIndication={() => <NoDataIndication />}
            />
        </div>

CSS:-
.expanded-container{
    max-height: 10rem;
    overflow: scroll;
}

Enabling horizontal scrollbar for table wider than div, without specifying fixed width

You can do something like this, if I understand you correctly:

body {margin: 0}
#container {  width: 100%;  height: 50vh;  overflow: auto;}
#container > table {  width: 200%;  height: 100%;  background: Lavender;}

<div id="container">  <table>    <tr>      <td><td>    </tr>  </table></div>

Horizontal scroll in React Table

Just simply add style with a height of 400px, that will force it to be scroll able.

<ReactTable
      data={bookingPerson}
      columns={columns}
      className="-striped -highlight"
      defaultPageSize={7}
      loading={loading}
      style={{
        height: "400px"
      }}
 />

---

Related Topics