Static and dynamic columns combination

UI Components for React
Post Reply
mpanahandeh
Posts: 5
Joined: 08 Sep 2017, 15:46

12 Sep 2017, 17:02

How can I have an implementation of a datatable while my columns are partly static and partly dynamic? like this code..

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>
        );
and I get ...
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>
        );
Last edited by mpanahandeh on 12 Sep 2017, 17:35, edited 2 times in total.

mpanahandeh
Posts: 5
Joined: 08 Sep 2017, 15:46

13 Sep 2017, 18:23

This makes me feeling stupid when I answer my own question! you can close this question, please.

Code: Select all

initialize(){
        /*calculates the size of the dataTable*/
        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;            
        this.tableWidth = this.state.WindowWidth-20;
        this.frozenWidth = 210;
        ......
        this.columns =  columnArray.map((item, i) =>
             <Column field={item[1]} header={item[1]} style={{width:'auto'}} />         
        );
        this.columns.unshift(
            <Column field="name" header="Name" style={{width:'220px'}} frozen={true} />
        );
    }
    render() {       
        if(!this.state.Model){ return(<div></div>);}
        return (
            <div>
                <div className="content-section implementation">
                    <DataTable header="Time tracking" value={this.state.Model} scrollable={true} scrollHeight="580px" 
                    style={{marginTop:'30px', width: `${this.tableWidth}px`}} frozenWidth={`${this.frozenWidth}px`} unfrozenWidth={`${this.tableWidth-this.frozenWidth}px`}>
                        {this.columns}                  
                    </DataTable>
                </div>
            </div>
        );
    }

cagatay.civici
Prime
Posts: 18190
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Sep 2017, 12:19

Thank you for the update.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests