Hi, does anyone has an idea how to implement a responsive Grid?
If i have 10 columns and go on a smaller screen, i need to scroll the grid horizontally. Maybe there is a way how the columns which not fit the screen gets wrapped and shown with a accordion or so?
Example image below. The black arrows should be collapsable and show the values which doesnt fit into the view with its header bevor the value
I suppose you could implement something like that with a Details Row in the Grid quite easily. Then you just need to use something like MediaQuery - Vaadin Add-on Directory to trigger the display mode.
You can also check this: How do I make a responsive Grid that has a different set of columns depending on the browser width. - Vaadin Cookbook
Grid | Components | Vaadin Docs
Maybe this would also be an option?
If the view is so small i could hide columns and make more details visible and vice versa or?
Yes, that was my suggestion above. In order to toggle the Details visibility, you could use the mentioned add-on.
Got it like this to hide columns
private void adjustVisibleGridColumns(Grid<OrderRecord> grid, int width) {
boolean[] visibleCols;
// Change which columns are visible depending on browser width
int breakpointPx = 1000;
if (width > breakpointPx) {
visibleCols = new boolean[]{true, true, true, true, true, true, true, true, true};
grid.recalculateColumnWidths();
} else {
visibleCols = new boolean[]{true, true, true, false, false, false, false, false, false};
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
}
for (int c = 0; c < visibleCols.length; c++) {
grid.getColumns().get(c).setVisible(visibleCols[c]);
if (grid.getColumns().get(c).getKey() != null && grid.getColumns().get(c).getKey().equals("name")) {
grid.getColumns().get(c).setWidth("7rem").setFlexGrow(0);
}
}
}
But when i resize the browser, the column with name does not wrap, only when i reload the page, the column get smaller and resizes. Anyone has an idea?
Edit: Looks like .setAutowidth(true) was the issue on this column, now it resizes.