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?
Datatable bug: RowGrouping not working when columns have a fixed width
Please try like the below code;
and add this css
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>
Code: Select all
#table .ui-datatable-scrollable-body table {
width: auto;
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 12 guests