web-components icon indicating copy to clipboard operation
web-components copied to clipboard

[grid] Provide minWidth and maxWidth properties for Grid's column

Open glebfox opened this issue 2 years ago • 7 comments

Describe your motivation

Currently it is not possible to set the boundaries of column resizing. At least min width is very important if a column can be resized.

https://github.com/vaadin/web-components/blob/23b5fdf56547f534686a40b09ef0c27f42cfd719/packages/grid/src/vaadin-grid-column-resizing-mixin.js#L60

Describe the solution you'd like

Grid's column has minWidth/maxWidth properties that are set to corresponding header and body elements (similar to width, flexGrow, etc.) and taken into account by ColumnResizingMixin.

Describe alternatives you've considered

No response

Additional context

No response

glebfox avatar Oct 18 '23 11:10 glebfox

~Same as https://github.com/vaadin/web-components/issues/5940~

tomivirkki avatar Oct 25 '23 14:10 tomivirkki

Same as #5940

Hi, not exactly the same. I personally more interested in minWidth property that is taken into account by resizer. The linked issue refers to the maxWidth only.

glebfox avatar Oct 25 '23 14:10 glebfox

@glebfox can you describe a use case for the maxwidth part? In what situations would you want to limit how wide the end user can make a column?

rolfsmeds avatar Mar 21 '24 07:03 rolfsmeds

For me it's not about the user who enlarges the grid column, but the grid itself creating columns that have at least 50px, but it can grow up to 300px with wider content; content that is larger than that gets clipped / ellipsed.

knoobie avatar Mar 21 '24 08:03 knoobie

@rolfsmeds as I mentioned above, I personally more interested in minWidth property that is taken into account by resizer. I've created more generic issue because minWidth and maxWidth looks like related properties for me, so someone may be interested in maxWidth either. In terms of maxWidth, I agree with @knoobie that limiting the max width can be suitable in case of too looooong values so we prevent Grid from creating too wide columns.

glebfox avatar Mar 21 '24 11:03 glebfox

Right, I suppose if we had minWidth and maxWidth properties for columns, it would be logical for them to affect both user resizing and autoWidth and flexGrow.

(Of course for flexGrow the width itself already functions as a minWidth, so in that case only maxWidth would have any effect, but for autoWidth both would be useful.)

rolfsmeds avatar Mar 21 '24 21:03 rolfsmeds

Acceptance Criteria: https://github.com/vaadin/platform/issues/6553

rolfsmeds avatar Jun 28 '24 15:06 rolfsmeds

I've been waiting for this, but got impatient, so I made something myself in the meantime:

fun <T> Grid.Column<T>.minWidth(minWidth: String): Grid.Column<T> {
            val partName = "minWidth${this.hashCode()}"
            this.element.appendChild(Html("<style>vaadin-grid::part($partName) { min-width:  $minWidth }</style>").element)
            this.setFlexGrow(0).setAutoWidth(true).setPartNameGenerator { partName }
            return this
        }
grid.addColumn("prop.fullNameWithSeparatedLastName").minWidth("20rem").setHeader(getTranslation("userManagement.name"))
grid.addColumn("prop.email").minWidth("18rem").setHeader(getTranslation("userManagement.email"))

It is a very nice function when the first visible values in the grid have few letters. Eliminates clippin... A must to have :-)

sveinnetnordic avatar Feb 17 '25 13:02 sveinnetnordic