Реагировать на фиксированные данные-таблица-2 полоса прокрутки

Я пытаюсь познакомиться с React и пакетом fixed-data-table-2, следуя руководству https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js.

Я сталкиваюсь с странной ошибкой в ​​том, что когда я изменяю размер столбца так, что требуется горизонтальная полоса прокрутки, полоса прокрутки не изменяется пропорционально ширине таблицы. Скорее он позволяет пользователю прокручивать все заголовки столбцов.

Последовательность шагов для воссоздания ошибки:

  1. Перейти на страницу
  2. Измените размер столбца компании и просмотрите полосу прокрутки.
  3. Начать прокрутку
  4. Продолжайте прокручивать все мои столбцы

Мне было интересно, не пропустил ли я конфигурацию компонента таблицы?

"use strict";

import React from 'react';
import FixedDataTable from 'fixed-data-table-2';


const {Table, Column, Cell} = FixedDataTable;


class BackupTable extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        dataList: [],
        columnWidths: {
          firstName: 240,
          lastName: 150,
          sentence: 140,
          companyName: 60,
        },
      };

      this._onColumnResizeEndCallback = this._onColumnResizeEndCallback.bind(this);

    }

    _onColumnResizeEndCallback(newColumnWidth, columnKey) {
        console.log("SETTING NEW WIDTH (" + newColumnWidth+") of " + columnKey);
        this.setState(({columnWidths}) => ({
          columnWidths: {
            ...columnWidths,
            [columnKey]: newColumnWidth,
          }
        }));
      }


  render() {
      var {dataList, columnWidths} = this.state;
      return (
        <Table
          rowHeight={30}
          headerHeight={50}
          rowsCount={10}
          onColumnResizeEndCallback={this._onColumnResizeEndCallback}
          isColumnResizing={false}
          touchScrollEnabled={true}
          width={1000}
          height={500}
          {...this.props}>
          <Column
            columnKey="firstName"
            header={<Cell>First Name</Cell>}
            cell={<Cell>Basic content</Cell>}
            fixed={true}
            width={columnWidths.firstName}
            isResizable={true}
          />
          <Column
            columnKey="lastName"
            header={<Cell>Last Name (min/max constrained)</Cell>}
            cell={<Cell>Basic content 2</Cell>}
            width={columnWidths.lastName}
            isResizable={true}
            minWidth={70}
            maxWidth={170}
          />
          <Column
            columnKey="companyName"
            header={<Cell>Company</Cell>}
           cell={<Cell>Basic content 4</Cell>}
            width={columnWidths.companyName}
            isResizable={true}
          />
          <Column
            columnKey="sentence"
            header={<Cell>Sentence</Cell>}
            cell={<Cell>Basic content 3</Cell>}
            width={columnWidths.sentence}
            isResizable={true}
          />
        </Table>
      );
    }
}

module.exports = BackupTable;

Снимки экрана: INTIAL_TABLESTART_SCROLLING

1
0
1 921
1

Ответы 1

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

Как только сумма ширины столбцов превысит ширину, установленную вами для таблицы (1000px), таблица начнет переполняться по горизонтали и появится горизонтальная полоса прокрутки. В случае, если сумма ширины столбцов меньше 1000px (как в исходном состоянии) - появляется 5-й «остаток» столбца, чтобы «заполнить» таблицу до установленной вами ширины.

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

Если вас не интересует горизонтальная прокрутка, возможно, вам следует рассмотреть возможность установки опоры overflowX="hidden" на вашем столе.

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

Ad Astra 14.09.2018 16:43

Другие вопросы по теме