Я пытаюсь познакомиться с React и пакетом fixed-data-table-2, следуя руководству https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js.
Я сталкиваюсь с странной ошибкой в том, что когда я изменяю размер столбца так, что требуется горизонтальная полоса прокрутки, полоса прокрутки не изменяется пропорционально ширине таблицы. Скорее он позволяет пользователю прокручивать все заголовки столбцов.
Последовательность шагов для воссоздания ошибки:
Мне было интересно, не пропустил ли я конфигурацию компонента таблицы?
"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.info("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
Выполнение примера, который вы предоставили в этом песочница - кажется, что ваша таблица ведет себя так, как ожидалось (без ошибок).
Как только сумма ширины столбцов превысит ширину, установленную вами для таблицы (1000px
), таблица начнет переполняться по горизонтали и появится горизонтальная полоса прокрутки.
В случае, если сумма ширины столбцов меньше 1000px
(как в исходном состоянии) - появляется 5-й «остаток» столбца, чтобы «заполнить» таблицу до установленной вами ширины.
Я думаю, вы увидите это более четко, если попытаетесь поиграть с меньшей шириной таблицы (попробуйте изменить ее на 500
в песочнице, которой я поделился).
Если вас не интересует горизонтальная прокрутка, возможно, вам следует рассмотреть возможность установки опоры overflowX = "hidden"
на вашем столе.
Спасибо за предложения. Выяснилось, что моя проблема заключалась в объявлении атрибутов ширины и высоты таблицы, в которой я передавал строку вместо целого числа; и исправление заключалось в том, чтобы обернуть значение в parseInt ().