固定データ・テーブルの一例をリサイズ：列

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のサイズ変更の例として）列のドラッグです。何が原因だろうか？

Answer 1

あなたは、各列にdataKey属性を追加したり、COLに_onColumnResizeEndCallback機能にdataKeyを変更する必要があります。