Using e.g. EnumHeaderFilter in Grid component

From what I can tell, using GridFilterColumn will create a Text box to enter filter criteria, and then that value is available to me in my dataProvider. If I would like to implement a different type of filter, similiar to how AutoGrid works, is it possible to make use of same implementations like EnumHeaderFilter in the Grid component?

I’ve also tried just using a component inside the GridFilter:

<GridColumn path="sourceId" header={<VerticalLayout>Source<GridFilter path="sourceId"><Select items={sourceIds} theme="small"></Select></GridFilter></VerticalLayout>} />

That does not trigger a refresh, or populate GridDataProviderParams however.

Can I get some guidance on an appropriate path for this?

Thanks!

Hi @donlyon,
I think using GridFilter is the right way here, because GridFilterColumn has no support for a custom header renderer (see: react-components/packages/react-components/src/GridFilterColumn.tsx at main · vaadin/react-components · GitHub).
I think you should add the value property to GridFilter and use the selected value of the Select component as its value:

// ...
const sourceIdFilter = useSignal<string>()
// ...
<GridColumn path="sourceId" header={<VerticalLayout>Source<GridFilter value={sourceIdFilter.value} path="sourceId"><Select items={sourceIds} theme="small" onValueChanged={({ detail }) => {sourceIdFilter.value = detail.value}}></Select></GridFilter></VerticalLayout>} />
1 Like

Thanks! That does the trick