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
dependent-tan•4w 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.
rival-black•4w ago
can you please let me know the content of useCustomDataGrid
dependent-tan•4w 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,
};
}
rival-black•4w ago
when you click on close or X button, you should setFilters([])
is this working?
is it have a state action called resetFilters ?
dependent-tan•4w 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...
rival-black•4w 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?=
dependent-tan•4w ago
No, I don't use. it is old code... I don't se using in the project
rival-black•4w 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?
dependent-tan•4w 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>
);
};
correct-apricot•4w 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.dependent-tan•4w ago
I got it manually ! thanks! I really appriciate for confirmation