Hi

I am trying to implement the concept of advance filtering in my React App which is there in ignite-ui-web-components(https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/advanced-filtering) but I am not getting how it can be done as I am facing issues while implementing it and there is no such reference for how to use web components with react.

I am trying to implement the advance filtering in react like this but this format is not working:-

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, ModuleManager, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import React from 'react';


export default class DataGridBindingLocalData extends React.Component<any, any>{

    private grid: IgcGridComponent;
    private column1: IgcColumnComponent;
    private _bind: () => void;


    constructor(props: any) {
        super(props);
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.nwindData;
        }
        this._bind();

    }

    private _nwindData!: NwindData;
    public get nwindData(): NwindData {
        if (this._nwindData == null) {
            this._nwindData = new NwindData();
        }
        return this._nwindData;
    }


    private _componentRenderer!: ComponentRenderer;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public render(): JSX.Element {
        return (
            <>
            <igc-grid
        auto-generate="false"
        primary-key="ProductID"
        row-editable="true"
        allow-filtering="true"
        batch-editing="true"
        name="grid"
        id ="grid">
            <igc-action-strip
            name="actionStrip"
            id ="actionStrip">
                <igc-grid-pinning-actions
                >
                </igc-grid-pinning-actions>
                <igc-grid-editing-actions
                edit-row="true"
                delete-row="false">
                </igc-grid-editing-actions>
            </igc-action-strip>
            <igc-pinning-config
            rows="Top">
            </igc-pinning-config>
            <igc-column
            field="ProductName"
            header="Product Name"
            name="ProductName"
            id ="ProductName">
            </igc-column>
            <igc-column
            name="UnitPrice"
            id ="UnitPrice"
            field="UnitPrice"
            header="Unit Price">
            </igc-column>
            <igc-column
            name="UnitsOnOrder"
            id ="UnitsOnOrder"
            field="UnitsOnOrder"
            header="Units On Order">
            </igc-column>
            <igc-column
            name="UnitsInStock"
            id ="UnitsInStock"
            field="UnitsInStock"
            header="Units In Stock">
            </igc-column>
            <igc-column
            name="QuantityPerUnit"
            id ="QuantityPerUnit"
            field="QuantityPerUnit"
            header="Quantity Per Unit">
            </igc-column>
            <igc-column
            name="ReorderLevel"
            id ="ReorderLevel"
            field="ReorderLevel"
            header="Reorder Level">
            </igc-column>
            <igc-column
            name="Discontinued"
            id ="Discontinued"
            field="Discontinued"
            header="Discontinued">
            </igc-column>
        </igc-grid>
            </>
        );
    }

}

If someone can suggest the right way or the correct approach to use web components features with react then it would be great.

Hoping for a positive response.

Thanks!!!