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
Related
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
I'm trying to implement table in react that satisfies below requirement:
Column is resizable
Table width is not fixed, just full fill the table's container
Column width can be in pixcel or percentage
If columns width is not set, they will occupy the rest of horizontal space of table
I see some suggestions to use react-table. Here is one example:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing
But this library seems to be:
Column width must be set for every column (requirement #2, #4 not satisfied)
Not supporting column width in percentage (requirement #3 not satisfied)
could anyone help suggest me how I can handle with react-table to adapt needed requirements?
If it's impossible with react-table, do you know any other library or any other approach I can try ?
Thankyou all!
I want to use a QTreeView (PyQt5) and set its height according to the number of first-level entries the model has.
This is because I don't know how many entries there will be to show, and I don't want to spend the default height of the widget when there is only one entry.
So what I need and didn't find yet is a way to
determine the height of the rows (they will be single-line strings so I can set it to uniform height if that helps)
set the exact height of the QTreeView in relation to a multiple of the row's height.
(I'll experiment with minimum and maximum numbers and padding if necessary)
According to documentation:
https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx
Never forget to call grid.startup(), since the column width
calculation and layout rendering need to access the geometry
information of grid DOM nodes.
If I have the grid with columns, that have no width specified, and autoWidth is set to false, startup() calculates the size of columns so, that they fill the whole viewport horizontally. However, if viewport is expanded, and extra empty space is inserted after the last column. If the viewport is narrowed, the last columns are not more visible (and no scroll is rendered).
So I think the best workaround is to launch the recalculation of columns sizes manually, after the viewport was resized. But I can't find an API method to do that.
How to call column width recalculation and layout rendering on existing grid?
What I've done for this situation is setup an event handler to watch for window resize events, then set the width to the current grid width. When creating the grid:
function _resizeToWindow(grid, gridId) {
grid.resize({w: dom.byId(gridId).offsetWidth, h: undefined});
}
on(window, "resize", function() {
_resizeToWindow(grid, gridId);
});
It looks a little odd to resize the grid to the current width of the grid, but calling that function will cause the grid to be rendered again with appropriate column widths for the new grid width.
Is it possible for a Flex List to adjust its height automatically for the number of rows it's displaying? The problem I'm having is that the List renders taller than the number rows. The number of rows is dynamic so I'd like the List to automatically adjust its height based on its content. I've tried setting height="100%" which doesn't help.
It appears that List defaults to fixed row height. Setting variableRowHeight to true fixed it.
variableRowHeight="true"
If your items all render at the same height, you could bind the height of your list to the number of rows * the item renderer height.
Alternatively, if you are using Flex 4, you can create new skin for your List based on the existing List skin, but remove the Scroller that wraps the DataGroup and make the height of the DataGroup 100%.
Hope that helps.