Code: Select all
return (
<div>
<div className="content-section implementation">
<DataTable header="Time tracking" value={this.state.Model} scrollable={true} scrollHeight="200px"
style={{marginTop:'30px', width: '1900px'}} frozenWidth="200px" unfrozenWidth="1700px">
<Column field="name" header="Name" style={{width:'250px'}} frozen={true} />
{
columns.map((item, i) =>
<Column field={(i+1).toString()} header={i} style={{width:'50px'}} frozen={false} />
)
}
</DataTable>
</div>
</div>
);
TypeError: Cannot read property 'frozen' of undefined
DataTable.getFrozenColumns
..../components/datatable/DataTable.js:565
562 | for (var _iterator = this.props.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
563 | var col = _step.value;
564 |
> 565 | if (col.props.frozen) {
566 | frozenColumns = frozenColumns || [];
567 | frozenColumns.push(col);
568 | }
View compiled
I was able to get rid of the error but I had to put some logics in my map function which makes a bad performance, I should be able to have static and dynamic columns !
Code: Select all
columns.unshift(["name","name"]);
let dynamicColumns = columns.map((item, i) =>
<Column field={item[1]} header={item[1]} style={i===0 ? {width:'220px'}: {width:'100px'}} frozen={i===0?true:false} />
);
return (
<div>
<div className="content-section implementation">
<DataTable header="Time tracking" value={this.state.Model} scrollable={true} scrollHeight="200px"
style={{marginTop:'30px', width: '820px'}} frozenWidth="220px" unfrozenWidth="600px">
{dynamicColumns}
</DataTable>
</div>
</div>
);