diff --git a/examples/coffee-warehouse-nextjs/app/components/Grid.jsx b/examples/coffee-warehouse-nextjs/app/components/Grid.jsx
index fd87ee8c..7bd81f7c 100644
--- a/examples/coffee-warehouse-nextjs/app/components/Grid.jsx
+++ b/examples/coffee-warehouse-nextjs/app/components/Grid.jsx
@@ -12,10 +12,10 @@ import {
 import { Button } from "@progress/kendo-react-buttons";
 import { GridPDFExport } from "@progress/kendo-react-pdf";
 import { ExcelExport } from "@progress/kendo-react-excel-export";
-import { process } from "@progress/kendo-data-query";
 import { Input } from "@progress/kendo-react-inputs";
 import { useLocalization } from "@progress/kendo-react-intl";
 import { filePdfIcon, fileExcelIcon } from "@progress/kendo-svg-icons";
+import { filterBy } from '@progress/kendo-data-query';
 const noMessage = "message not defined";
 
 export const Column = GridColumn;
@@ -30,40 +30,17 @@ export const ColumnMenu = (props) => {
 };
 
 export const Grid = (props) => {
-  const { data, onDataChange, ...others } = props;
+  const { data, onDataChange, defaultFilter, ...others } = props;
 
   const excelExportRef = React.useRef(null);
   const pdfExportRef = React.useRef(null);
 
   const [isPdfExporting, setIsPdfExporting] = React.useState(false);
-  const [take, setTake] = React.useState(10);
-  const [skip, setSkip] = React.useState(0);
-  const [sort, setSort] = React.useState([]);
-  const [group, setGroup] = React.useState([]);
-  const [filter, setFilter] = React.useState(null);
-  const lastSelectedIndexRef = React.useRef(0);
-  const [allColumnFilter, setAllColumnFilter] = React.useState("");
+  const [filter, setFilter] = React.useState(defaultFilter);
+  const filteredData = filterBy(data, filter);
+  const [select, setSelect] = React.useState({});
   const localizationService = useLocalization();
 
-  const dataState = {
-    take,
-    skip,
-    sort,
-    group,
-    filter,
-  };
-
-  const onDataStateChange = React.useCallback(
-    (event) => {
-      setTake(event.dataState.take);
-      setSkip(event.dataState.skip);
-      setSort(event.dataState.sort);
-      setGroup(event.dataState.group);
-      setFilter(event.dataState.filter);
-    },
-    [setTake, setSkip, setSort, setGroup]
-  );
-
   const onExcelExport = React.useCallback(() => {
     if (excelExportRef.current) {
       excelExportRef.current.save();
@@ -74,116 +51,64 @@ export const Grid = (props) => {
     setIsPdfExporting(false);
   }, []);
 
-  const onAllColumnFilterChange = React.useCallback(
-    (event) => {
-      setAllColumnFilter(event.value);
-    },
-    [setAllColumnFilter]
-  );
-
-  const onSelectionChange = React.useCallback(
-    (event) => {
-      let last = lastSelectedIndexRef.current;
-      const updatedData = data.map((dataItem) => {
-        return { ...dataItem };
-      });
-      const current = data.findIndex((dataItem) => dataItem === event.dataItem);
-
-      if (!event.nativeEvent.shiftKey) {
-        lastSelectedIndexRef.current = last = current;
-      }
-
-      if (!event.nativeEvent.ctrlKey) {
-        updatedData.forEach((item) => (item.selected = false));
-      }
-      const select = !event.dataItem.selected;
-      for (let i = Math.min(last, current); i <= Math.max(last, current); i++) {
-        updatedData[i].selected = select;
-      }
-
-      onDataChange(updatedData);
-    },
-    [data, onDataChange]
-  );
+  const onPdfExport = React.useCallback(() => {
+    if (pdfExportRef.current) {
+      setIsPdfExporting(true);
+      pdfExportRef.current.save(data, onPdfExportDone);
+    }
+  }, [data, onPdfExportDone]);
 
-  const onHeaderSelectionChange = React.useCallback(
+  const handleFilterChange = React.useCallback(
     (event) => {
-      const checked = event.syntheticEvent.target.checked;
-      const updatedData = data.map((item) => {
-        return {
-          ...item,
-          selected: checked,
+        let filter = {
+            logic: 'or',
+            filters: [
+                { field: 'contactName', operator: 'contains', value: event.value },
+                { field: 'jobTitle', operator: 'contains', value: event.value },
+                { field: 'budget', operator: 'contains', value: event.value },
+                { field: 'phone', operator: 'contains', value: event.value },
+                { field: 'address', operator: 'contains', value: event.value }
+            ]
         };
-      });
-
-      onDataChange(updatedData);
+        setFilter(filter);
     },
-    [data, onDataChange]
+    [setFilter]
   );
 
-  const textColumns = props.children
-    .map((col) => {
-      if (col.props.children) {
-        return col.props.children.map((child) => {
-          if (!child.props.filter || child.props.filter === "text") {
-            return child.props.field;
-          }
-          return null;
-        });
-      } else if (col.props.field) {
-        if (!col.props.filter || col.props.filter === "text") {
-          return col.props.field;
-        }
-      }
-      return null;
-    })
-    .flat()
-    .filter((field) => field);
-
-  const allColumnsFilters = textColumns.map((column) => ({
-    field: column,
-    operator: "contains",
-    value: allColumnFilter,
-  }));
-
-  const allColumnFilteredData = allColumnFilter
-    ? process(data, { filter: { logic: "or", filters: allColumnsFilters } })
-        .data
-    : data;
-
-  const processedData = process(allColumnFilteredData, dataState);
-
-  React.useEffect(() => {
-    if (!processedData.data.length) {
-      setSkip(0);
-    }
-  }, [processedData]);
+  const onSelectionChange = React.useCallback((event) => {
+      setSelect(event.select);
+  }, []);
 
-  const onPdfExport = React.useCallback(() => {
-    if (pdfExportRef.current) {
-      setIsPdfExporting(true);
-      pdfExportRef.current.save(processedData.data, onPdfExportDone);
-    }
-  }, [processedData, onPdfExportDone]);
+  const onHeaderSelectionChange = React.useCallback((event) => {
+      setSelect(event.select);
+  }, []);
 
   const GridElement = (
     <KendoGrid
-      {...dataState}
       {...others}
       rowHeight={40}
       pageable={true}
+      defaultSkip={0}
+      defaultTake={10}
       sortable={true}
       groupable={true}
-      selectedField={"selected"}
-      data={processedData}
-      onDataStateChange={onDataStateChange}
+      filter={filter}
+      data={filteredData}
+      dataItemKey={'id'}
+      autoProcessData={true}
+      selectable={{
+        enabled: true,
+        drag: false,
+        cell: false,
+        mode: 'single'
+      }}
+      select={select}
       onSelectionChange={onSelectionChange}
       onHeaderSelectionChange={onHeaderSelectionChange}
     >
       <GridToolbar>
         <Input
-          value={allColumnFilter}
-          onChange={onAllColumnFilterChange}
+          onChange={handleFilterChange}
           placeholder={localizationService.toLanguageString(
             "custom.gridSearch",
             noMessage
@@ -203,14 +128,7 @@ export const Grid = (props) => {
           {localizationService.toLanguageString("custom.exportPdf", noMessage)}
         </Button>
       </GridToolbar>
-      <Column
-        field={"selected"}
-        width={50}
-        title={" "}
-        headerSelectionValue={
-          data.findIndex((dataItem) => dataItem.selected === false) === -1
-        }
-      />
+      <Column columnType="checkbox" />
       {props.children}
     </KendoGrid>
   );
diff --git a/examples/coffee-warehouse-nextjs/app/styles/_common.scss b/examples/coffee-warehouse-nextjs/app/styles/_common.scss
index b265958c..6368b7ce 100644
--- a/examples/coffee-warehouse-nextjs/app/styles/_common.scss
+++ b/examples/coffee-warehouse-nextjs/app/styles/_common.scss
@@ -93,7 +93,7 @@ a {
         }
 
         .card-ranges {
-            text-align: right;
+            justify-self: flex-end;
             grid-column: 2 / 3;
             grid-row: 1;
         }
@@ -122,7 +122,7 @@ a {
         }
 
         .card-ranges {
-            text-align: right;
+            justify-self: flex-end;
             grid-column: 3 / 4;
         }
 
diff --git a/examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx b/examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx
index 05b61fef..ff4e68b9 100644
--- a/examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx
+++ b/examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx
@@ -165,7 +165,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={230}
-                cell={FullNameCell}
+                cells={{ data: FullNameCell }}
               />
               <Column
                 field={"jobTitle"}
@@ -184,7 +184,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={100}
-                cell={FlagCell}
+                cells={{ data: FlagCell }}
               />
               <Column
                 field={"isOnline"}
@@ -194,7 +194,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={100}
-                cell={OnlineCell}
+                cells={{ data: OnlineCell }}
                 filter={"boolean"}
               />
             </Column>
@@ -213,7 +213,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={110}
-                cell={RatingCell}
+                cells={{ data: RatingCell }}
                 filter={"numeric"}
               />
               <Column
@@ -224,7 +224,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={200}
-                cell={EngagementCell}
+                cells={{ data: EngagementCell }}
                 filter={"numeric"}
               />
               <Column
@@ -235,7 +235,7 @@ export default function DashBoard(props) {
                 )}
                 columnMenu={ColumnMenu}
                 width={100}
-                cell={CurrencyCell}
+                cells={{ data: CurrencyCell }}
                 filter={"numeric"}
               />
             </Column>
diff --git a/examples/coffee-warehouse-nextjs/package.json b/examples/coffee-warehouse-nextjs/package.json
index f540eda2..505070be 100644
--- a/examples/coffee-warehouse-nextjs/package.json
+++ b/examples/coffee-warehouse-nextjs/package.json
@@ -12,30 +12,30 @@
     "follow-redirects": ">=1.15.4"
   },
   "dependencies": {
-    "@progress/kendo-data-query": "^1.7.0",
+    "@progress/kendo-data-query": "^1.7.1",
     "@progress/kendo-date-math": "^1.5.14",
     "@progress/kendo-drawing": "^1.21.2",
-    "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-buttons": "^10.0.0",
-    "@progress/kendo-react-charts": "^10.0.0",
-    "@progress/kendo-react-data-tools": "^10.0.0",
-    "@progress/kendo-react-dateinputs": "^10.0.0",
-    "@progress/kendo-react-dialogs": "^10.0.0",
-    "@progress/kendo-react-dropdowns": "^10.0.0",
-    "@progress/kendo-react-editor": "^10.0.0",
-    "@progress/kendo-react-excel-export": "^10.0.0",
-    "@progress/kendo-react-form": "^10.0.0",
-    "@progress/kendo-react-grid": "^10.0.0",
-    "@progress/kendo-react-indicators": "^10.0.0",
-    "@progress/kendo-react-inputs": "^10.0.0",
-    "@progress/kendo-react-intl": "^10.0.0",
-    "@progress/kendo-react-layout": "^10.0.0",
-    "@progress/kendo-react-pdf": "^10.0.0",
-    "@progress/kendo-react-progressbars": "^10.0.0",
-    "@progress/kendo-react-scheduler": "^10.0.0",
-    "@progress/kendo-react-treeview": "^10.0.0",
-    "@progress/kendo-react-upload": "^10.0.0",
-    "@progress/kendo-theme-default": "^10.3.1",
+    "@progress/kendo-licensing": "^1.6.0",
+    "@progress/kendo-react-buttons": "^11.0.0",
+    "@progress/kendo-react-charts": "^11.0.0",
+    "@progress/kendo-react-data-tools": "^11.0.0",
+    "@progress/kendo-react-dateinputs": "^11.0.0",
+    "@progress/kendo-react-dialogs": "^11.0.0",
+    "@progress/kendo-react-dropdowns": "^11.0.0",
+    "@progress/kendo-react-editor": "^11.0.0",
+    "@progress/kendo-react-excel-export": "^11.0.0",
+    "@progress/kendo-react-form": "^11.0.0",
+    "@progress/kendo-react-grid": "^11.0.0",
+    "@progress/kendo-react-indicators": "^11.0.0",
+    "@progress/kendo-react-inputs": "^11.0.0",
+    "@progress/kendo-react-intl": "^11.0.0",
+    "@progress/kendo-react-layout": "^11.0.0",
+    "@progress/kendo-react-pdf": "^11.0.0",
+    "@progress/kendo-react-progressbars": "^11.0.0",
+    "@progress/kendo-react-scheduler": "^11.0.0",
+    "@progress/kendo-react-treeview": "^11.0.0",
+    "@progress/kendo-react-upload": "^11.0.0",
+    "@progress/kendo-theme-default": "^11.0.2",
     "cldr-core": "44.0.1",
     "cldr-dates-full": "44.0.1",
     "cldr-numbers-full": "44.0.1",
diff --git a/examples/react-coffee-warehouse/src/components/Grid.jsx b/examples/react-coffee-warehouse/src/components/Grid.jsx
index e73a124f..e170df33 100644
--- a/examples/react-coffee-warehouse/src/components/Grid.jsx
+++ b/examples/react-coffee-warehouse/src/components/Grid.jsx
@@ -34,7 +34,6 @@ export const Grid = (props) => {
     const [select, setSelect] = React.useState({});
     const localizationService = useLocalization();
 
-
     const onExcelExport = React.useCallback(
         () => {
             if (excelExportRef.current) {