deep-jade
deep-jade4mo 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?
11 Replies
like-gold
like-gold4mo 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.
stormy-gold
stormy-gold4mo ago
can you please let me know the content of useCustomDataGrid
like-gold
like-gold4mo 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, }; }
stormy-gold
stormy-gold4mo ago
when you click on close or X button, you should setFilters([]) is this working? is it have a state action called resetFilters ?
like-gold
like-gold4mo 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...
stormy-gold
stormy-gold4mo 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?=
like-gold
like-gold4mo ago
No, I don't use. it is old code... I don't se using in the project
stormy-gold
stormy-gold4mo 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?
like-gold
like-gold4mo 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> ); };
wise-white
wise-white4mo 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.
like-gold
like-gold4mo ago
I got it manually ! thanks! I really appriciate for confirmation