Refine•16mo ago

Filter question. How remove filter from url

Hello! I have question about refine table filtration.
When I select something and filter, I have filtration and updated URL, like here http://localhost:3002/app/customer-ratings-output?pageSize=10&current=1&filters[0][field]=customerName&filters[0][value]=Investmanagenent%20LLC.&filters[0][operator]=contains

but when I click on cross and want to remove filtration, It is not working. How It can be fixed?

dead-brownOP•9/11/24, 8:47 AM

import { DataGrid } from '@mui/x-data-grid';
import { IResourceComponentsProps } from '@refinedev/core';
import { apiUrls } from 'apiUrl';
import { List } from 'components/crud/list';
import { useCustomDataGrid } from 'hooks/useCustomDataGrid';
import { useCreateColumns } from './hooks/useCreateColumns';

export const CustomersList: React.FC<IResourceComponentsProps> = () => {
const { dataGridProps, loading } = useCustomDataGrid(() =>
apiUrls.unmatchedRatings.notMatchedRatings(),
);

const columns = useCreateColumns();

return (
<List customTitle="Customers" canCreate={false}>
<DataGrid
{...dataGridProps}
columns={columns}
autoHeight
disableVirtualization
disableRowSelectionOnClick={false}
loading={loading}
/>
</List>
);
};

dead-brownOP•9/11/24, 8:48 AM

@Onder check please.

exclusive-coral•9/11/24, 8:50 AM

can you please let me know the content of useCustomDataGrid

dead-brownOP•9/11/24, 8:51 AM

import { useDataGrid } from '@refinedev/mui';
import { getRowsData } from 'services/utils';
import { usePagination } from './usePagination';

export function useCustomDataGrid(urlFunc: (currentPage: number) => string) {
const { currentPage } = usePagination();
const { dataGridProps, setFilters, tableQueryResult } = useDataGrid({
resource: urlFunc(currentPage),
pagination: { pageSize: 10 },
filters: {
defaultBehavior: 'merge',
},
});

const { isLoading, isRefetching } = tableQueryResult;
const { rowCount, rows } = getRowsData(dataGridProps);

return {
setFilters,
dataGridProps: {
...{
...dataGridProps,
rowCount,
rows: rows isRefetching,
};
}

exclusive-coral•9/11/24, 8:52 AM

when you click on close or X button, you should setFilters([])

exclusive-coral•9/11/24, 8:52 AM

is this working?

exclusive-coral•9/11/24, 8:53 AM

is it have a state action called resetFilters ?

dead-brownOP•9/11/24, 8:53 AM

I suppose issue, that I have hardcoded

filters: {
defaultBehavior: 'merge',
},

if I remove this code, removing filtrations from url is working

but If I remve it, I can't use filtrations by 2-3... items

Eexclusive-coral when you click on close or X button, you should setFilters([])

dead-brownOP•9/11/24, 8:55 AM

I don't use it... because I don't have place for manual control...

exclusive-coral•9/11/24, 8:57 AM

i said it because i saw you exported setFilters in the custom hook i assume you use it somewhere

exclusive-coral•9/11/24, 8:57 AM

what is your use case of the filter?=

dead-brownOP•9/11/24, 8:57 AM

No, I don't use. it is old code... I don't se using in the project

exclusive-coral•9/11/24, 9:02 AM

did you tried to create a thread in ask-any-question and try to get help from @kapa.ai ?

exclusive-coral•9/11/24, 9:02 AM

@kapa.ai can you help here?

Eexclusive-coral i said it because i saw you exported setFilters in the custom hook i assume you ...

dead-brownOP•9/11/24, 9:02 AM

what do you mean how I use filters? I send it to BE and got back filtrated data

No, I didn't

dead-brownOP•9/11/24, 10:16 AM

I still can't find a solution... setFilters([]) in not working when I try clean by additional button click as well

dead-brownOP•9/11/24, 10:37 AM

@aliemir Could you help as well? I found same issue, but code is not working for me

import { DataGrid, GridLogicOperator, useGridApiRef } from '@mui/x-data-grid';
import { apiUrls } from 'apiUrl';
import { List } from 'components/crud/list';
import { useCustomDataGrid } from 'hooks/useCustomDataGrid';
import { AppRatingOutputTypes } from './types';
import { useCreateColumns } from './hooks/useCreateColumns';
import { useEffect } from 'react';

const { dataGridProps, loading, setFilters, filters } = useCustomDataGrid(
() => url,
);
const columns = useCreateColumns(type);
console.log('filters', filters);

const apiRef = useGridApiRef();

const clearFilters = () => {
console.log('Clear');
if (apiRef.current) {
apiRef.current.setFilterModel({
items: [],
logicOperator: GridLogicOperator.And,
}); // Очистите фильтры через API
}
};
console.log('apiRef.current', apiRef.current);
useEffect(() => {
if (apiRef.current) {
apiRef.current.setFilterModel({ items: [] });
}
}, [apiRef]);

return (
<List customTitle={${name} ratings output} canCreate={false}>
<button onClick={clearFilters}>X</button>
<DataGrid
apiRef={apiRef}
{...dataGridProps}
columns={columns}
autoHeight
disableVirtualization
disableRowSelectionOnClick={false}
loading={loading}
/>
</List>
);
};

efficient-indigo•9/11/24, 12:49 PM

Hey @Evgeny Kutovoy, when you set defaultBehaviordefaultBehavior to mergemerge, passing

[]

[]

to setFilterssetFilters will not update the filters. With mergemerge behavior, you need to set values of the filters to

undefined

undefined

, this will remove them from the filters array. Or you can use setFilters([], "replace")setFilters([], "replace") to override the hardcoded mergemerge behavior when clearing the filters. This will replace the filters array with the one you've provided.

dead-brownOP•9/11/24, 12:50 PM

I got it manually ! thanks! I really appriciate for confirmation