react-bootstrap-table2 как обрабатывать большой дисплей в развернутой строке

У меня есть таблица с несколькими столбцами для отображения продукта и его цен. В моей основной таблице строка состоит из названия продукта, а также минимальных и максимальных цен в магазинах других компаний. Когда я нажимаю на строку, я расширяю ее, чтобы отобразить некоторые сведения о продукте. В моем случае другая таблица со столбцом для каждого магазина компании и цены в этом конкретном магазине.

Когда у меня есть большой список магазинов (например, 50), строка может расширяться и правильно отображать результаты, но ее размер превышает ширину экрана, и начальный размер таблицы также увеличивается. В результате мои минимальные / максимальные значения теряются в правой части экрана, и я могу только прокручивать всю страницу, чтобы увидеть данные.

Есть ли способ контролировать переполнение и иметь горизонтальную полосу прокрутки для второй таблицы (той, что в расширении), чтобы она не выходила из своего контейнера?

Я видел этот пост, но не смог заставить его работать: https: //github.com/react-bootstrap-table/react-bootstrap-table2/issues/291

Вот линия до и после расширения.

Расширенный код строки:

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