Check my custom DataGrid. Clear filters doesn't work
import { useDataGrid } from '@refinedev/mui';
import { getRowsData } from 'services/utils';
import { usePagination } from './usePagination';
import { useState, useEffect } from 'react';
export function useCustomDataGrid(
urlFunc: (currentPage: number) => string,
provider: string = 'fiala',
sorters?: any,
) {
const { currentPage } = usePagination();
const [fetchTrigger, setFetchTrigger] = useState(0);
const { dataGridProps, setFilters, tableQueryResult, filters } = useDataGrid({
resource: urlFunc(currentPage),
pagination: { pageSize: 10 },
sorters: {
initial: sorters,
mode: 'server',
},
filters: {
defaultBehavior: 'merge',
},
dataProviderName: provider,
});
const { isLoading, isRefetching, refetch } = tableQueryResult;
const { rowCount, rows } = getRowsData(dataGridProps);
const resetFilters = () => {
setFilters([], 'replace');
};
useEffect(() => {
refetch();
}, [fetchTrigger, refetch]);
const triggerRefetch = () => {
setFetchTrigger((prev) => prev + 1);
};
return {
setFilters,
resetFilters,
filters,
dataGridProps: {
...dataGridProps,
rowCount,
rows: rows isRefetching,
refetch: triggerRefetch,
};
}
and I use it
const { dataGridProps, loading, resetFilters, filters } = useCustomDataGrid(
() => apiUrls.customUrl(),
);
When I try so filter something it is working
http://localhost:3001/app/test?pageSize=10¤t=1&filters[0][field]=mock&filters[0][value]=1212121212&filters[0][operator]=eq
but clear filters is not working. please help
import { getRowsData } from 'services/utils';
import { usePagination } from './usePagination';
import { useState, useEffect } from 'react';
export function useCustomDataGrid(
urlFunc: (currentPage: number) => string,
provider: string = 'fiala',
sorters?: any,
) {
const { currentPage } = usePagination();
const [fetchTrigger, setFetchTrigger] = useState(0);
const { dataGridProps, setFilters, tableQueryResult, filters } = useDataGrid({
resource: urlFunc(currentPage),
pagination: { pageSize: 10 },
sorters: {
initial: sorters,
mode: 'server',
},
filters: {
defaultBehavior: 'merge',
},
dataProviderName: provider,
});
const { isLoading, isRefetching, refetch } = tableQueryResult;
const { rowCount, rows } = getRowsData(dataGridProps);
const resetFilters = () => {
setFilters([], 'replace');
};
useEffect(() => {
refetch();
}, [fetchTrigger, refetch]);
const triggerRefetch = () => {
setFetchTrigger((prev) => prev + 1);
};
return {
setFilters,
resetFilters,
filters,
dataGridProps: {
...dataGridProps,
rowCount,
rows: rows isRefetching,
refetch: triggerRefetch,
};
}
and I use it
const { dataGridProps, loading, resetFilters, filters } = useCustomDataGrid(
() => apiUrls.customUrl(),
);
When I try so filter something it is working
http://localhost:3001/app/test?pageSize=10¤t=1&filters[0][field]=mock&filters[0][value]=1212121212&filters[0][operator]=eq
but clear filters is not working. please help
