react-bootstrap-table2 如何处理扩展行中的大显示

Question

我有一个 table，其中包含一些用于显示产品及其价格的列。在我的主 table 上，一行由产品名称以及其他公司商店的最低和最高价格组成。当我单击某行时，我将其展开以显示有关该产品的一些详细信息。在我的例子中，另一个 table 包含公司每个商店的一列和该特定商店的价格。

当我有一个很大的商店列表（例如 50 个）时，该行可以展开并正确显示结果，但是它的大小超过了屏幕宽度并且初始 table 大小也会增加。结果我的 min/max 在屏幕右侧丢失了，我只能滚动整个页面才能看到数据。

有没有办法控制溢出并为第二个table（展开中的那个）设置一个水平滚动条，这样它就不会脱离容器？

我看到了这个 post 但无法让它工作：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;
  }

Answer 1

给扩展行全部数据所在的容器一个class

示例：-

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

Answer 2

谢谢你的帮助，我以为会有一个容器包装器，但我找不到任何相关信息。

使用自定义包装器效果很好：

.expanded-container{
    width: 97vw;
    overflow-x: scroll;
    white-space: nowrap;
}

react-bootstrap-table2 如何处理扩展行中的大显示

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

scroll

overflow

expand

react-bootstrap-table