I`m working with Vaadin 14 and i have a problem with sizing cells in Grid.
I would like to set autowidth on all columns to reduce size of column with small content size, but for long i want to achive max size of column without horizontall scroll ( i want to see all columns at once) and when it would exceed size of the table then i would like to wrap conten inside this column.
When i'm setting autoWidth for all columns then my long conten is shown in one line and i must scrolling horizontally to see other columns.
When i`m setting
grid.addThemeVariants(GridVariant.LUMO_COMPACT,GridVariant.LUMO_WRAP_CELL_CONTENT);
then my long column has this same size but with multi-line content as other columns with short content. Other columns are too long for their content.
I can`t set width separately for each column couse i dont know how many columns will be in the Grid and which column will have long or short content.
Here’s what I would try:
Use the LUMO_WRAP_CELL_CONTENT variant
For all other columns than the one with long content, set autoWidth and flexGrow=0
For the column with long content, set width to what you want as max-width and set flexGrow=1
Related
I would like to make a table with resizable columns, where the columns start out automatically sized so that they are the width they need to be to contain the text that's in that column.
I have been able to achieve these separately, but not together.
It seems that the problem is that react-table requires you to use either FlexLayout, BlockLayout, or AbsoluteLayout to be able to resize the columns, but this causes table elements to be replaced with divs. When the divs are giving an "auto" width, each one individually fits to its contents, which creates a "brick wall" of stacked divs, and not a table where all the cells in a column are aligned.
Here is an example of the brick wall effect: https://codesandbox.io/s/nervous-goldstine-s12pve?file=/src/components/DataTable.js
Commenting out line 11, which sets the column widths to 'auto', will fix the alignment issues, but the columns will be wider than they need to be. If instead you comment out line 30, the column width issue will be resolved, but the columns will no longer be resizable.
Is it possible to have both of these features?
In HTML tables that are wider than the viewport, text is wrapped, so the table may fit after all. To force all fields on a single line (and possibly extend outside the viewing area) I use 'white-space: nowrap' for all TDs in the table.
This is just fine for most of my tables, but in one scenario this does not work very well. I have a table with 20 columns or so with terse column headings and content, except one, which is a description field of 256 characters maximum. Using 'nowrap' is quite right for all columns, but the description column is now a very wide column indeed.
Is there a (CSS) way to specify that fields should be as small as possible (no min-width), keep on one line (nowrap), except when longer than some maximum field width (max-with: 250px). It would be nice if it could be applied to all TDs, where a reduction of the maximum width would start other fields wrapping as well.
How can i resize the width of a column according to the length of the data it occupies.
The table has got about 15 columns and i want to show the column heading without resizing it manually. Is there any option for autoresize?
TableView.setColumnResizePolicy() is what you are looking for.
For Example:
tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
I have a long list of short items, such as below:
Apples
Oranges
Banana
USB stick
...
I would like this list to split into columns automatically to fill the width of the containing element, such that no item is broken onto two lines ("USB⏎stick" ), and the bullets line up nicely. Is this even possible? If so, how?
No. With css columns, you can set either the column width or the number of columns. There's no 'auto detect width' option.
I usually go for width in em and let the number of columns depend on the client's browser window width.
I have a DataGrid that has between 4-10 columns. I want the columns to be of width '50'. I have already set the width attribute in MXML. I am using "colName.hide = true" to hide various columns depending on whether I have data. I find that my columns expand when I have less columns. Is there a way to set the max width of a column or force it to keep the same width?
Why not just resize the width of the datagrid itself to 50 * amtOfCols when columns are hidden and shown?
You have to leave one column with undefined width - it will stretch when parent (grid) will be resized.
Or, you should recalculate and apply width of the greed dynamically