chore: update grid props in homepage demo app

Author: silviyaboteva

examples/kendo-react-homepage-demo/src/components/Author.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const Author = (props) => {
+    return (
+        <td>
+            <p className="author-container">
+                <span>
+                    <img
+                        className="img-circle"
+                        alt="User Avatar"
+                        src={props.dataItem.node.author.avatarUrl} style={{ width: 30, height: 30 }}
+                    />
+                </span>
+                {props.dataItem.node.author.login}
+            </p>
+        </td>
+    )
+}

examples/kendo-react-homepage-demo/src/components/KendoGridContainer.jsx

@@ -1,31 +1,20 @@
 import React from "react";
 import { Query } from '@apollo/client/react/components';
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import { process } from '@progress/kendo-data-query';
 import { ColumnMenu } from './ColumnMenu';
 import { DetailComponent } from './DetailComponent';
 import { StateCell } from './StateCell';
-import { АssignedTo } from './АssignedTo';
+import { Author } from './Author';
 import { LoadingPanel } from './LoadingPanel';
 
 import { getQuery } from '../queries/github';
 import kendoReactIssues from '../data/fallBackData.json';
 import reactIssues from '../data/fallBackDataReact.json';
 
-
-
 export class KendoGridContainer extends React.Component {
-    state = {
-        skip: 0,
-        take: 10
-    }
     allLabels = [];
     uniqueLabels = [];
     initialLoad = true;
-    expandChange = (event) => {
-        event.dataItem.expanded = !event.dataItem.expanded;
-        this.forceUpdate();
-    }
 
     getOccurrence = (array, value) => {
         var count = 0;
@@ -106,20 +95,20 @@ export class KendoGridContainer extends React.Component {
                         return (
                             <React.Fragment>
                                 <Grid
-                                    data={process(gridData, this.state)}
+                                    data={gridData}
+                                    autoProcessData={true}
+                                    dataItemKey="node.number"
+                                    detail={(props) => <DetailComponent {...props} makeChartData={this.makeChartData} />}
                                     sortable
                                     pageable
-                                    {...this.state}
-                                    onDataStateChange={(e) => { this.setState(e.dataState); }}
-                                    expandField="expanded"
-                                    onExpandChange={this.expandChange}
+                                    defaultSkip={0}
+                                    defaultTake={20}
                                     style={{ height: '100%', overflow: 'auto', borderInline: 0 }}
-                                    detail={(props) => <DetailComponent {...props} makeChartData={this.makeChartData} />}
                                 >
                                     <GridColumn field="node.number" title="ID" width={100} />
-                                    <GridColumn field="node.state" title="State" cell={StateCell} width={100} />
+                                    <GridColumn field="node.state" title="State" cells={{ data: StateCell } } width={100} />
                                     <GridColumn field="node.title" title="Issue" columnMenu={ColumnMenu} />
-                                    <GridColumn field="node.assignees.node" title="Assigned to" width={200} cell={АssignedTo} sortable={false} />
+                                    <GridColumn field="node.author.login" title="Author" width={200} cells={{ data: Author }} sortable={false} />
                                     <GridColumn field="node.createdAt" title="Created on" width={200} format='{0:yyyy/MM/dd hh:mm a}' filter="date" columnMenu={ColumnMenu} />
                                 </Grid>
                                 {loading && <LoadingPanel />}