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

UI Components for React
Post Reply
tgcesar123
Posts: 2
Joined: 13 Jul 2018, 18:55

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?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

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;
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests