Filter in DataGrid column headers

[knstvk]

Like in this example: https://vaadin.com/docs/latest/components/grid/#filtering

[KremnevDmitry]

How to:

To enable filtering in headers, you need to add the attribute filterable = true to the <column/> tag.

E.g.

Only for email:

            <columns>
                <column property="username"/>
                <column property="firstName"/>
                <column property="lastName"/>
                <column property="email" filterable="true"/>
                <column property="timeZoneId"/>
                <column property="active"/>
            </columns>

[knstvk]

Filter indicator must always be visible regardless of the column width, the same as sorting indicator.

<columns filterable="true">
    <column property="username"/>
    <column property="firstName"/>
    <column property="lastName"/>
    <column property="email"/>
    <column property="timeZoneId" filterable="false"/>
    <column property="active"/>
    <column property="onboardingStatus"/>
    <column property="department"/>
    <column property="joiningDate"/>
</columns>

[knstvk]

Define filterable="true" for a reference attribute. The filter will show entityPicker. Try to select an entity in the picker.

java.lang.IllegalStateException: A component 'EntityPicker' is not attached to a view
	at io.jmix.flowui.component.UiComponentUtils.getView(UiComponentUtils.java:268)
	at io.jmix.flowui.DialogWindows.lookup(DialogWindows.java:205)
	at io.jmix.flowui.action.entitypicker.EntityLookupAction.execute(EntityLookupAction.java:167)
	at io.jmix.flowui.action.valuepicker.PickerAction.actionPerform(PickerAction.java:75)
	at io.jmix.flowui.kit.component.valuepicker.ValuePickerButtonActionSupport.lambda$setAction$c6c19f47$1(ValuePickerButtonActionSupport.java:55)
	at com.vaadin.flow.component.ComponentEventBus.fireEventForListener(ComponentEventBus.java:233)
	at com.vaadin.flow.component.ComponentEventBus.handleDomEvent(ComponentEventBus.java:475)
	at com.vaadin.flow.component.ComponentEventBus.lambda$addDomTrigger$dd1b7957$1(ComponentEventBus.java:292)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.lambda$fireEvent$2(ElementListenerMap.java:447)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.fireEvent(ElementListenerMap.java:447)
	at com.vaadin.flow.server.communication.rpc.EventRpcHandler.handleNode(EventRpcHandler.java:62)
	at ...

[KremnevDmitry]

Filter indicator must always be visible regardless of the column width, the same as sorting indicator.

<columns filterable="true">
    <column property="username"/>
    <column property="firstName"/>
    <column property="lastName"/>
    <column property="email"/>
    <column property="timeZoneId" filterable="false"/>
    <column property="active"/>
    <column property="onboardingStatus"/>
    <column property="department"/>
    <column property="joiningDate"/>
</columns>

It's impossible to style a column header this way.
Vaadin doesn't have such an API, and styling is impossible, since the required elements are closed in Shadow DOM.
We only have the ability to style the content inside the header.

[KremnevDmitry]

Define filterable="true" for a reference attribute. The filter will show entityPicker. Try to select an entity in the picker.

java.lang.IllegalStateException: A component 'EntityPicker' is not attached to a view
	at io.jmix.flowui.component.UiComponentUtils.getView(UiComponentUtils.java:268)
	at io.jmix.flowui.DialogWindows.lookup(DialogWindows.java:205)
	at io.jmix.flowui.action.entitypicker.EntityLookupAction.execute(EntityLookupAction.java:167)
	at io.jmix.flowui.action.valuepicker.PickerAction.actionPerform(PickerAction.java:75)
	at io.jmix.flowui.kit.component.valuepicker.ValuePickerButtonActionSupport.lambda$setAction$c6c19f47$1(ValuePickerButtonActionSupport.java:55)
	at com.vaadin.flow.component.ComponentEventBus.fireEventForListener(ComponentEventBus.java:233)
	at com.vaadin.flow.component.ComponentEventBus.handleDomEvent(ComponentEventBus.java:475)
	at com.vaadin.flow.component.ComponentEventBus.lambda$addDomTrigger$dd1b7957$1(ComponentEventBus.java:292)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.lambda$fireEvent$2(ElementListenerMap.java:447)
	at java.base/java.util.ArrayList.forEach(ArrayList.java:1511)
	at com.vaadin.flow.internal.nodefeature.ElementListenerMap.fireEvent(ElementListenerMap.java:447)
	at com.vaadin.flow.server.communication.rpc.EventRpcHandler.handleNode(EventRpcHandler.java:62)
	at ...

Extracted to the separate issue: #2369

[KremnevDmitry]

After a meeting with the GG and KK, it was decided to assign experimental status to this feature.
In order for the filter icon to be displayed correctly in the DataGrid header, additional adjustment of the header (column) sizes is required. You need to set the width and resizable = false so that the filter button is not hidden.

Any improvements will be implemented later.