I'm using the example visualized here by Facebook: https://facebook.github.io/fixed-data-table/example-resize.html
The sourcecode(I'm using the "old" style, with React.createClass) is here: https://github.com/facebook/fixed-data-table/blob/master/examples/old/ResizeExample.js#L35
I have altered my code a bit. I can parse my array into the cells which is fine. However, the entire feature of being able to drag the columns isn't working: The mouse does correctly do the animation(as in the first example) of dragging the column line, but it never "sticks". What gives?
Here is some sample code. Perhaps I did something wrong in terms of the state handling?
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;
(This is a sample)
I have modified a few things to make it work in terms of gathering data from my backend, but it works and is displayed correctly. The only functionality which doesn't work is the dragging of columns(as the facebook resize example). What could the cause be?
