Page 1 of 1

Populate filters in data table

Posted: 16 Aug 2022, 13:36
by Sakshi.Gupta6
I'm migrating my application to latest version of prime react, during migration I noticed broken changes in data table filters. So now I'm working on data table fix according to latest version of it.

Having some trouble in populating default filter, I saw in documentation for populating filter something given like this

const filters = {
'name': {operator: FilterOperator.AND, constraints: [
{value: 'Prime', matchMode: FilterMatchMode.STARTS_WITH},
{value: 'React', matchMode: FilterMatchMode.CONTAINS}
]}
}

But when I'm trying with this facing issues, Is there any running demo available for this ?

Just for info: Adding details here
    Using filterDisplay="row"
      Global filter
        Run time field filter change, Filter types in use "in", "custom", "startswith" etc.


        Thanks!

        Re: Populate filters in data table

        Posted: 16 Aug 2022, 13:44
        by Melloware
        Here is how I define mine...

        Code: Select all

                filters: {
                    'vin': { value: '', matchMode: 'contains' },
                    'make': { value: '', matchMode: 'contains' },
                    'model': { value: '', matchMode: 'contains' },
                    'color': { value: '', matchMode: 'contains' },
                    'year': { value: '', matchMode: 'gte' }
                }
        

        Re: Populate filters in data table

        Posted: 16 Aug 2022, 15:03
        by Sakshi.Gupta6
        I tried this but when I apply filters with this format in my table, after applying this when I tried to select a filter application throws JS error like this

        TypeError: filters[field] is undefined
        filterCallback
        node_modules/primereact/datatable/datatable.esm.js:3088

        I have added only those fields in filters in which I want to add default filters and setting it after rendering of application.

        Re: Populate filters in data table

        Posted: 16 Aug 2022, 15:10
        by Melloware
        See my code sandbox reproducer: https://codesandbox.io/s/primereact-tes ... entList.js

        You can mess with it yourself.