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

Question

I have a table with some columns to display a Product and its prices. On my main table a line is composed of the product name and the min and max prices from the other company shops. When I click on a line I expand it to display some details about the product. In my case another table with a column for each shop of the company and the price in this specific shop.

When I have a large list of shops (50 for example), the row can expand and display the results correctly but its size exceeds the screen width and the initial table size grows also. As a result my min/max are lost on the right of the screen and I can only scroll the entire page to see the data.

Is there anyway to control the overflow and have a horizontal scroll bar for the second table (the one in the expand) so then it would not get out of its container?

I saw this post but couldn't make it work : https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/291

Here is the line before and after being expanded.

Expanded row code :

    const expandRow = {
          renderer: row => {
            var columns = vm.generateColumns();
            var product_list = vm.state.products_by_ean[row.ean_code];
            var content = {};

            product_list.forEach(product => {
              vm.props.selected_locations.forEach(shop_id => {
                if (product["shop"] == shop_id) {
                  content["shop_" + shop_id] =
                    product.price_without_taxes_normalized;
                } else {
                  if (!content.hasOwnProperty(shop_id)) {
                    content[shop_id] = {};
                  }
                }
              });
            });

            if (columns.length > 0) {
              return (
                <ToolkitProvider columns={columns} data={[content]} keyField="id">
                  {props => (
                    <div>
                      <BootstrapTable
                        {...props.baseProps}
                        noDataIndication={() => <NoDataIndication />}
                      />
                    </div>
                  )}
                </ToolkitProvider>
              );
            } else {
              return "";
            }
          },
          expanded: []
        };

  generateColumns() {
    let columns = [];
    let shop_list = this.getShopList();

    if (shop_list.length > 0) {
      shop_list.forEach(shop => {
        let col = {
          dataField: "shop_" + shop.id,
          formatter: priceFormatter,
          style: {
            whiteSpace: "normal"
          },
          text: shop.actor.label + " - " + shop.name
        };
        columns.push(col);
      });
    }

    return columns;
  }

Answer 1

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;
}