efficient-indigoE
Refine•3y ago•
23 replies
efficient-indigo

DataGridPro filtering issue

Hello,

I'm using DataGridPro with server side pagination, sorting, and filtering,

          <DataGridPro
            {...dataGridProps}
            slotProps={{
              filterPanel: {
                logicOperators: [GridLogicOperator.And]
              }
            }}
            filterModel={undefined}
            pagination
            pageSizeOptions={[25, 50, 100]}
            columns={columns}
            autoHeight
          />


I haven't created my own data provider, I'm using the default, and I'm noticing peculiar behavior when I'm trying to use the DataGidPro filter. When I try to filter using the "equals" operator, the url looks like this:
http://localhost:3000/test?pageSize=25&current=1&filters[0][field]=transactionId&filters[0][value]=IJ8956&filters[0][operator]=eq

But in my backend REST server, my req.query looks like this

{ _end: '25', _start: '0', transactionId: 'IJ8956' }


If I use the "contains" operator, I get this in the URL:
http://localhost:3000/test?pageSize=25&current=1&filters[0][field]=transactionId&filters[0][value]=IJ8956&filters[0][operator]=contains


I get this in my req.query: 
{ _end: '25', _start: '0', transactionId_like: 'IJ8956' }


Also, if i try to use the "is empty" operator, my URL looks like this:
http://localhost:3000/test?pageSize=25&current=1

and my req.query:
{ _end: '25', _start: '0' }


here is what the column looks like for the specific example:
{
        field: "transactionId",
        headerName: "Invoice ID",
        headerAlign: "center",
        align: "center",
        minWidth: 80,
},

"@mui/x-data-grid-pro": "^6.6.0",
"@refinedev/cli": "^2.5.5",
 "@refinedev/core": "^4.20.0",
  "@refinedev/inferencer": "^4.1.2",
  "@refinedev/kbar": "^1.0.0",
    "@refinedev/mui": "^5.1.0",
    "@refinedev/react-hook-form": "^4.4.0",
    "@refinedev/react-router-v6": "^4.3.2",
    "@refinedev/simple-rest": "^4.5.0",

Thank you
Was this page helpful?