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¤t=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?
11 Replies
genetic-orange•2mo ago
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>
);
};
@Onder check please.
frozen-sapphire•2mo ago
can you please let me know the content of useCustomDataGrid
genetic-orange•2mo ago
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 [],
},
},
hasRows: Boolean(rowCount),
loading: isLoading isRefetching,
};
}
frozen-sapphire•2mo ago
when you click on close or X button, you should setFilters([])
is this working?
is it have a state action called resetFilters ?
genetic-orange•2mo ago
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
I don't use it... because I don't have place for manual control...
frozen-sapphire•2mo ago
i said it because i saw you exported setFilters in the custom hook i assume you use it somewhere
what is your use case of the filter?=
genetic-orange•2mo ago
No, I don't use. it is old code... I don't se using in the project
frozen-sapphire•2mo ago
did you tried to create a thread in ask-any-question and try to get help from @kapa.ai ?
@kapa.ai can you help here?
genetic-orange•2mo ago
what do you mean how I use filters? I send it to BE and got back filtrated data
No, I didn't
I still can't find a solution... setFilters([]) in not working when I try clean by additional button click as well
@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>
);
};
optimistic-gold•2mo ago
Hey @Evgeny Kutovoy, when you set
defaultBehavior to merge, passing [] to setFilters will not update the filters. With merge behavior, you need to set values of the filters to undefined, this will remove them from the filters array. Or you can use setFilters([], "replace") to override the hardcoded merge behavior when clearing the filters. This will replace the filters array with the one you've provided.genetic-orange•2mo ago
I got it manually ! thanks! I really appriciate for confirmation