Frozen Columns support for Column Groups

[MPanahandeh]

Something goes wrong with the column Name in my data grid when I use Frozen specification with Column Grouping. I have the first column repeated, but If I disable frozen config in my table it will be fine.

Code:
https://github.com/MPanahandeh/time-tracker

[cagataycivici]

Please provide a test code that we can run.

[MPanahandeh]

I added just two rows of mock data to the github link I had provided.
https://github.com/MPanahandeh/time-tracker
$ npm install
$ npm start
If you comment out lines like what I did in data-grid.jsx, grid works normally but no more frozen column

 render() {
    this.initialColumns()
    const headerGroup = DateHeader(this.frozenWidth, this.props.dateArray)
    return (
      <DataTable
        sortable
        // header='Time tracking'
        value={this.props.model}
        scrollable
        scrollHeight='580px'
        style={{
          marginTop: '30px',
          width: `${this.tableWidth}px`,
          fontSize: '15px',
        }}
        // frozenWidth={`${this.frozenWidth}px`}
        // unfrozenWidth={`${this.tableWidth - this.frozenWidth}px`}
        // headerColumnGroup={DateHeader(this.props.dateArray)}
        headerColumnGroup={headerGroup}
      >
        {this.columns}
      </DataTable>
    )
  }

and

  this.columns.unshift(
      <Column
        sortable
        key={0}
        body={NameCell}
        field='name'
        header='Name'
        style={{ width: this.frozenWidth }}
        // frozen
      />,
    )

[cagataycivici]

We did this for PrimeNG lately and need to do some changes for PrimeReact as well, will do it for 1.0.2.

[cagataycivici]

Added headerColumnGroup and footerColumnGroup properties

[cagataycivici]

render() {
        let headerGroup = <ColumnGroup>
                            <Row>
                                <Column header="Sale Rate" colSpan={4} />
                            </Row>
                            <Row>
                                <Column header="Sales" colSpan={2} />
                                <Column header="Profits" colSpan={2} />
                            </Row>
                            <Row>
                                <Column header="Last Year" field="lastYearSale" sortable={true}/>
                                <Column header="This Year" />
                                <Column header="Last Year" />
                                <Column header="This Year" />
                            </Row>
                        </ColumnGroup>;

       let footerGroup = <ColumnGroup>
                            <Row>
                                <Column footer="Totals:" colSpan={3} />
                                <Column footer="$506,202" />
                                <Column footer="$531,020" />
                            </Row>
                         </ColumnGroup>;
                         
     let frozenHeaderColumnGroup = <ColumnGroup>
                         <Row>
                             <Column header="Brand" rowSpan={3} />
                         </Row>
                     </ColumnGroup>;
     
        return (
            <div>
                    <DataTable value={this.state.sales} headerColumnGroup={headerGroup} scrollable={true} frozenHeaderColumnGroup={frozenHeaderColumnGroup}
                                                        footerColumnGroup={footerGroup} 
                                                        scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px">                        
                        <Column field="brand" frozen={true} />
                        <Column field="lastYearSale" />
                        <Column field="thisYearSale" sortable={true}/>
                        <Column field="lastYearProfit" sortable={true}/>
                        <Column field="thisYearProfit" sortable={true}/>
                    </DataTable>
                </div>
            </div>
        );
    }

[claudv]

This seems to be broken on PrimeReact 6.

The above example produces

Any suggestion?

[mertsincan]

Hi @claudv,

Thanks a lot for your report. On 7.0, I'll reimplement scrollable DataTables like in primevue;
https://primefaces.org/primevue/showcase/#/datatable/scroll

If the problem persists after 7.0, please reopen this issue.

Best Regards,

[hernanbruno97]

Hi, it looks like still not working or got broken on newer versions
I'm using primereact 10.8.2 and react 18.2.0
Here is an example of what I am trying to do ( I set many columns to demonstrate the issue )
https://stackblitz.com/edit/bsrhdi-k1g8w3?file=src%2FApp.jsx

[MBR-0001]

Same as above, seems like this is the cause https://github.com/primefaces/primereact/blob/master/components/lib/datatable/HeaderCell.js#L127-L134

since there are two header rows it assumes that the second row is for filtering (but is actually a second <Row>) and tries to get the <td> cell right below the frozen one using index in top <tr> element, but due to colSpan there is no element at that index in the <tr> below