v5 compat

Author: MBilalShafi

packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -77,8 +77,8 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           .toString();
 
       const getFilterItemValue = (item: GridFilterItem): string => {
-        const { getValueAsString } = lookup[item.field!].filterOperators!.find(
-          (operator) => operator.value === item.operator,
+        const { getValueAsString } = lookup[item.columnField!].filterOperators!.find(
+          (operator) => operator.value === item.operatorValue,
         )!;
 
         return getValueAsString ? getValueAsString(item.value) : item.value;

packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx

@@ -1192,7 +1192,7 @@ describe('<DataGrid /> - Filter', () => {
         <div style={{ width: '100%', height: '400px' }}>
           <DataGrid
             filterModel={{
-              items: [{ field: 'name', operator: 'contains', value: 'John' }],
+              items: [{ columnField: 'name', operatorValue: 'contains', value: 'John' }],
             }}
             rows={[
               {
@@ -1215,9 +1215,9 @@ describe('<DataGrid /> - Filter', () => {
                     getApplyFilterFn: (filterItem) => {
                       return (params) => {
                         if (
-                          !filterItem.field ||
+                          !filterItem.columnField ||
                           !filterItem.value ||
-                          !filterItem.operator ||
+                          !filterItem.operatorValue ||
                           !params.value
                         ) {
                           return null;