Prime Community Forum

Posted: **15 Jul 2018, 09:27**

Lets say I have the columns with an specific width, all columns can have different widths
for example:

<Column field="Mes realizado" header="Mes realizado" filter={true} style={{ width: '100px', whiteSpace: "pre-line", fontSize: "x-small" }} />
<Column field="Dias para ejecucion" header="Dias para ejecucion" filter={true} style={{ width: '200px', whiteSpace: "pre-line", fontSize: "x-small" }} />
<Column field="Fecha programado" header="Fecha programado" filter={true} style={{ width: '300px', whiteSpace: "pre-line", fontSize: "x-small" }} />

when using Row grouping, after group field row is displayed , datatable displays all columns of equal size(width) when was specifified a diferent width
and don't match the columns, the headers and the rows.

check image

https://drive.google.com/file/d/11CEROZ ... sp=sharing

I identified the problem comes when using the scrollable feature (height and width) and row grouping, it not using scrollable everything works fine.
Example:
rowGroupMode="subheader"
groupField="subcategory"
sortField="subcategory"
sortOrder={1}

scrollable={true}
scrollHeight="450px"
style={{ width: '1810px' }}

When having this config, the columns after the group row doesn't display the same widths of the headers,
only display all columns the same size and not showing horizontal scroll

https://drive.google.com/file/d/1IC7JOe ... sp=sharing

looks like row grouping and scrollable features are not supported at the same time. any hints?

Posted: **01 Aug 2018, 10:46**

Please try like the below code;

Code: Select all

<DataTable header="SubHeader" id="table" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
                        rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate}

                               scrollable={true}
                               scrollHeight="450px">
                        <Column field="vin" header="Vin" style={{ width: '115px', whiteSpace: "pre-line", fontSize: "x-small" }}/>
                        <Column field="year" header="Year" style={{ width: '115px', whiteSpace: "pre-line", fontSize: "x-small" }}/>
                        <Column field="color" header="Color" style={{ width: '344px', whiteSpace: "pre-line", fontSize: "x-small" }}/>
                        <Column field="price" header="Price" style={{ width: '114px', whiteSpace: "pre-line", fontSize: "x-small" }}/>
                    </DataTable>

and add this css

Code: Select all

#table .ui-datatable-scrollable-body table {
    width: auto;
}

Prime Community Forum

Datatable bug: RowGrouping not working when columns have a fixed width

Datatable bug: RowGrouping not working when columns have a fixed width

Re: Datatable bug: RowGrouping not working when columns have a fixed width