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

Posted 2023-02-21

【中文标题】固定数据表调整大小示例：无法调整列大小

【英文标题】：Fixed-data-table resize example: Cannot resize columns

【发布时间】：2017-06-27 12:01:38

【问题描述】：

我正在使用 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 调整大小示例）。原因可能是什么？

【参考方案1】：

您需要为每一列添加 dataKey 属性或将 _onColumnResizeEndCallback 函数中的 dataKey 更改为 col强>。