chore: update grid props in kendo react ecommerce astro app

Author: silviyaboteva

examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getter } from "@progress/kendo-react-common";
 import {
   Grid,
   GridColumn,
@@ -8,16 +7,14 @@ import {
   getSelectedState,
   GridKeyDownEvent,
   getSelectedStateFromKeyDown,
-  GridSortChangeEvent,
-  GridPageChangeEvent,
+  GridSortChangeEvent
 } from "@progress/kendo-react-grid";
 import {
   ChartWizard,
   ChartWizardDataRow,
   getWizardDataFromGridSelection,
 } from "@progress/kendo-react-chart-wizard";
 import { Button } from "@progress/kendo-react-buttons";
-import { orderBy } from "@progress/kendo-data-query";
 import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
 import { sampleData } from "../data/shared-gd-sampleChartData";
 import { useStore } from "@nanostores/react";
@@ -33,21 +30,14 @@ const translations = {
 };
 
 const DATA_ITEM_KEY = "ID";
-const SELECTED_FIELD = "selected";
-const idGetter = getter(DATA_ITEM_KEY);
 
 interface SelectedState {
   [id: string]: boolean | number[];
 }
 
-interface PageState {
-  skip: number;
-  take: number;
-}
-
 const AdminView: React.FC = () => {
-  const language = useStore(selectedLanguage); 
-  const t = translations[language]; 
+  const language = useStore(selectedLanguage);
+  const t = translations[language];
   const gridRef = React.useRef<GridHandle>(null);
   const [selectedState, setSelectedState] = React.useState<SelectedState>({});
   const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
@@ -57,21 +47,6 @@ const AdminView: React.FC = () => {
   const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
   const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
   const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
-  const [page, setPage] = React.useState<PageState>({ skip: 0, take: 4 });
-
-  const pageChange = (event: GridPageChangeEvent) => {
-    setPage({
-      skip: event.page.skip,
-      take: event.page.take,
-    });
-  };
-
-  const data = sampleData.map((item) => ({
-    ...item,
-    [SELECTED_FIELD]: selectedState[idGetter(item)],
-  }));
-
-  const pagedData = orderBy(data, sort).slice(page.skip, page.skip + page.take);
 
   const onSelectionChange = (event: GridSelectionChangeEvent) => {
     const newSelectedState = getSelectedState({
@@ -120,8 +95,7 @@ const AdminView: React.FC = () => {
     const sortedTop3Sales = selectedData
       .sort(
         (a, b) =>
-          b.find((field) => field.field === "Total Sales")?.value -
-          a.find((field) => field.field === "Total Sales")?.value
+          (b["Total Sales"]?.value || 0) - (a["Total Sales"]?.value || 0)
       )
       .slice(0, 3);
 
@@ -156,14 +130,13 @@ const AdminView: React.FC = () => {
       <Grid
         ref={gridRef}
         style={{ height: "500px" }}
-        data={pagedData}
+        data={sampleData}
         dataItemKey={DATA_ITEM_KEY}
-        selectedField={SELECTED_FIELD}
-        skip={page.skip}
-        take={page.take}
-        total={data.length}
+        autoProcessData={true}
+        defaultSkip={0}
+        defaultTake={4}
+        total={sampleData.length}
         pageable={true}
-        onPageChange={pageChange}
         selectable={{
           enabled: true,
           drag: true,
@@ -178,7 +151,7 @@ const AdminView: React.FC = () => {
           setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
         }}
       >
-        <GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
+        <GridColumn field="URL" title={t.grid.productTitle} cells={{ data: URLImageCell }} />
         <GridColumn field="Product" title={t.grid.nameTitle} />
         <GridColumn field="SKU" title={t.grid.skuTitle} />
         <GridColumn field="Category" title={t.grid.categoryTitle} />