Document how to shrink header content in autosized columns

[thejoker101]

Description

Using the example on the components page for Grid Filtering - https://vaadin.com/docs/latest/components/grid#filtering. If you have the input box in the header the width of that input box seems to be taken into account when you have your columns set to autosize. For example, if you have a very thin column and you size it using .setAutoWidth(true).setFlexGrow(0) it will be wider than necessary due to the input box width.

Expected outcome

I would expect the column width to be determined by the content width of the cell content.

Minimal reproducible example

The example on https://vaadin.com/docs/latest/components/grid#filtering will work as a base, just make one have smaller cell content and set the columns to auto size.

Steps to reproduce

See above.

I was able to put together a hacky fix for it, but it doesn't seem like it should be necessary and seems like the wrong way to do it. Basically, this code sets the input box to 1px until after the column width gets recalculated. Then it sets the width of the input box back to 100%.

In a wrapper class around Grid:

@Override
	public GridDataView<T> setItems(DataProvider<T, Void> dataProvider) {
		adjustColumns(false);

		GridDataView<T> dv = super.setItems(dataProvider);

		resizeColumns();

		return dv;
	}

@ClientCallable
	private void adjustColumns(boolean fullWidth) {
		getHeaderRows().forEach(hr -> {
			hr.getCells().forEach(hc -> {
				if(hc.getComponent() instanceof VerticalLayout) {

					if(((VerticalLayout)hc.getComponent()).getComponentCount() > 1) {
						if(((VerticalLayout)hc.getComponent()).getComponentAt(1) instanceof TextField) {
							((TextField)((VerticalLayout)hc.getComponent()).getComponentAt(1)).setWidth(fullWidth ? "100%" : "1px");
						}
					}
				}
			});
		});
	}

private void resizeColumns() {
		recalculateColumnWidths();

		String jsCall = """
						const el = this; // closure to element
						setTimeout((el) => {
						el.$server.adjustColumns(true);
						}, 100, el);
					""";

		getElement().executeJs(jsCall);
	}

Environment

Vaadin version(s): Latest OS:

Browsers

Chrome

[yuriy-fix]

Dear @thejoker101, the current logic is working as intended. This issue is considered to be a documentation issue and the example could be added on how to shrink the header content.