javascript - 固定データ テーブルのサイズ変更の例: 列のサイズを変更できません

Question

ここで Facebook によって視覚化された例を使用しています: https://facebook.github.io/fixed-data-table/example-resize.html

ソースコード (私は React.createClass で「古い」スタイルを使用しています) はこちら: https://github.com/facebook/fixed-data-table/blob/master/examples/old/ResizeExample.js#L35

コードを少し変更しました。配列をセルに解析できますが、問題ありません。ただし、列をドラッグできるという機能全体が機能していません。マウスは、列の線をドラッグするアニメーション (最初の例のように) を正しく実行しますが、「くっつく」ことはありません。何を与える？

ここにいくつかのサンプルコードがあります。おそらく、状態の処理に関して何か間違ったことをしたのでしょうか?

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;

（これはサンプルです）

バックエンドからデータを収集するという点で機能するようにいくつかの変更を加えましたが、機能し、正しく表示されます。機能しない唯一の機能は、列のドラッグです (Facebook のサイズ変更の例のように)。原因は何ですか？