fair-rose
fair-rose4w 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
dependent-tan
dependent-tan4w 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
rival-black4w ago
can you please let me know the content of useCustomDataGrid
dependent-tan
dependent-tan4w 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
rival-black4w 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
dependent-tan4w 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
rival-black4w 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
dependent-tan4w ago
No, I don't use. it is old code... I don't se using in the project
rival-black
rival-black4w 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
dependent-tan4w 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
correct-apricot4w 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
dependent-tan4w ago
I got it manually ! thanks! I really appriciate for confirmation