response-bootstrap-table2 как работать с большим дисплеем в расширенном ряду - PullRequest
Новая
       42

response-bootstrap-table2 как работать с большим дисплеем в расширенном ряду

0 голосов
/ 23 октября 2018

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

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

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

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

Вот строкадо и после расширения.enter image description here enter image description here

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

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

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Спасибо за вашу помощь, я думал, что будет контейнерная оболочка, но я не смог найти никакой информации об этом.

Использование пользовательской оболочки отлично работает: 

.expanded-container{
    width: 97vw;
    overflow-x: scroll;
    white-space: nowrap;
}
0 голосов
/ 22 ноября 2018

Присвойте класс контейнеру, в который поступают все данные расширенной строки.

Пример: - 

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