DataGrid filter reset?

[chrwei]

I'm using React Router to have multiple pages.  several pages have DataGrids with filters and different columns and datasets.  If I add a filter on page, then go to a different page, I see no data even though there is nothing in the filters, and if I add something to the filters an onFilterChange event shows my new filter and also shows the filter from the previous page's datagrid.

What do i need to do make sure the filter only applies on a specific datagrid instance?  I tried adding a unique value for the key prop but that had no effect.

this also affects multiple datagrids on the same page, type "a" into the first grid's col1 filter, then type "x" into the 2nd grid's col1 filter.  you get no results, and the console shows the "a1" filter.

Code:

import React from 'react';
import './App.css';
import { DataGrid, GridColumn } from 'rc-easyui';

function App() {
    const dataA = [
        { a1:"a", b2:"A" },
        { a1:"b", b2:"B" },
        { a1:"c", b2:"C" },
    ];
    const dataB = [
        { b1:"x", b2:"X" },
        { b1:"y", b2:"Y" },
        { b1:"z", b2:"Z" },
    ];

    return (
        <div className="App">
                <DataGrid
                    filterable 
                    data={dataA} 
                    onFilterChange={filter => console.log("filter A", filter)}
                >
                    <GridColumn field="a1" title="Col1" width={110} />
                    <GridColumn field="a2" title="Col2" width={110} />
                </DataGrid>

                <DataGrid
                    filterable 
                    data={dataB} 
                    onFilterChange={filter => console.log("filter B", filter)}
                >
                    <GridColumn field="b1" title="Col1" width={110} />
                    <GridColumn field="b2" title="Col2" width={110} />
                </DataGrid>
        </div>
    );
}

export default App;

[Shatki]

It seems to me that I have the same bug
My project was stoped, I am not found a solution
I have two dataGrid at different layers. First have filter. After apply filter, second dataGrid do not shows rows and data
I prepared test in my repository https://github.com/Shatki/dg-test

[jarry]

Please set the 'filterRules' property for each DataGrid component.

Code:

<div className="App">
        <DataGrid
            filterable 
            filterRules={[]}
            data={dataA} 
            onFilterChange={filter => console.log("filter A", filter)}
        >
            <GridColumn field="a1" title="Col1" width={110} />
            <GridColumn field="a2" title="Col2" width={110} />
        </DataGrid>

        <DataGrid
            filterable 
            filterRules={[]}
            data={dataB} 
            onFilterChange={filter => console.log("filter B", filter)}
        >
            <GridColumn field="b1" title="Col1" width={110} />
            <GridColumn field="b2" title="Col2" width={110} />
        </DataGrid>
</div>

[Shatki]

Yes!!!
Thanks.
This helped me perfectly!

[chrwei]

that works for me as well.  the documentation says this value is the default, so are the docs wrong?