Javascript 固定数据表调整大小示例：无法调整列大小

我正在使用Facebook在这里可视化的示例：

源代码（我使用“旧”样式，带有React.createClass）如下所示：

我对代码做了一些修改。我可以将数组解析为单元格，这很好。但是，能够拖动列的全部功能都不起作用：鼠标确实可以正确地执行拖动列线的动画（如第一个示例中所示），但它从不“粘住”。有什么好处

下面是一些示例代码。也许我在国家处理方面做错了什么

var FixedDataTable = require('fixed-data-table');
var React = require('react');

var Column = FixedDataTable.Column;
var Table = FixedDataTable.Table;
var Cell = FixedDataTable.Cell;

var isColumnResizing;

var columnWidths = {
    firstName: 100,
    lastName: 100,
    address: 100,
};
const TextCell = ({rowIndex, data, col, ...props}) => (
    <Cell {...props}>
        {data[rowIndex][col] ? data[rowIndex][col] : " "}
    </Cell>
);


var peopleTable = React.createClass({
    getInitialState() {
        return {
            columnWidths: columnWidths
        }
    },

    _onColumnResizeEndCallback(newColumnWidth, dataKey) {
        var columnWidths = this.state.columnWidths;
        columnWidths[dataKey] = newColumnWidth;
        isColumnResizing = false;
        this.setState({
            columnWidths
        })
    },

    render() {
        if (!this.props.data || !this.props.data.peopleInfo) {
            return <div>No people found</div>;
        }

        var peopleMap = this.props.data.peopleInfo;

        var peopleMapArr = Object.values(peopleMap).map(function(people) {
            return people;
        });

       // Here, it will print the array just fine. So it isn't related to that. 


        return (
            <div>
                <Table
                    height={35 + ((peopleMapArr.length) * 80)}
                    width={750}
                    rowsCount={peopleMapArr.length}
                    rowHeight={80}
                    isColumnResizing={isColumnResizing}
                    onColumnResizeEndCallback={this._onColumnResizeEndCallback}
                    headerHeight={30}
                    {...this.props}>
                    <Column
                        header={<Cell>First Name</Cell>}
                        cell={<TextCell data={peopleMapArr} col="firstName" />}
                        fixed={true}
                        width={columnWidths['firstName']}
                        isResizable={true}
                        minWidth={100}
                        maxWidth={250}
                    />
                    <Column
                        header={<Cell>Last Name</Cell>}
                        cell={<TextCell data={peopleMapArr} col="lastName" />}
                        width={columnWidths['lastName']}
                        isResizable={true}
                        minWidth={100}
                        maxWidth={250}
                    />
                    <Column
                        header={<Cell>Address</Cell>}
                        cell={<TextCell data={peopleMapArr} col="address" />}
                        width={columnWidths['address']}
                        isResizable={true}
                        minWidth={100}
                        maxWidth={250}
                    />
                </Table>
            </div>
        );
    }
});

module.exports = peopleTable;

var FixedDataTable=require（'fixed-data-table'）；
var React=要求（'React'）；
var Column=FixedDataTable.Column；
var Table=FixedDataTable.Table；
var Cell=FixedDataTable.Cell；
var柱状化；
变量列宽度={
名字：100，
姓氏：100，
地址：100，
};
const TextCell=（{rowIndex，data，col，…props}）=>(
{data[rowIndex][col]？data[rowIndex][col]：“”
);
var peopleTable=React.createClass({
getInitialState（）{
返回{
columnWidths：columnWidths
}
},
_onColumnResizeEndCallback（newColumnWidth，dataKey）{
var columnWidths=this.state.columnWidths；
columnWidths[dataKey]=新建ColumnWidth；
isColumnResizing=false；
这是我的国家({
列宽
})
},
render（）{
如果（！this.props.data | |！this.props.data.peopleInfo）{
返回未找到人员；
}
var peopleMap=this.props.data.peopleInfo；
var peopleMapArr=Object.values（peopleMap）.map（function（people）{
还人,；
});
//在这里，它可以很好地打印数组，因此与此无关。
返回(
);
}
});
module.exports=peopleTable；

（这是一个样本）

---

在从后端收集数据方面，我做了一些修改，使其能够正常工作，但它可以正常工作并正确显示。唯一不起作用的功能是拖动列（如facebook调整大小示例）。原因可能是什么

您需要将数据键属性添加到每个列，或者将\u onColumnResizeEndCallback函数中的数据键更改为列