Skip to content

Commit 81e09c7

Browse files
author
Mariela Tihova
authored
Update samples for Grid lite with the react wrappers (#1051)
1 parent 7406180 commit 81e09c7

File tree

5 files changed

+117
-178
lines changed

5 files changed

+117
-178
lines changed

‎samples/grids/grid-lite/data-binding/src/index.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import React, { useCallback, useState } from "react";
1+
import { useCallback, useState, useEffect } from "react";
22
import ReactDOM from "react-dom/client";
33
import { GridLiteDataService } from "./GridLiteDataService";
44

5-
// Import the web component
6-
import { IgcGridLite } from "igniteui-grid-lite";
5+
import { IgrGridLite } from 'igniteui-react/grid-lite';
76
import { IgrButton } from "igniteui-react";
87
import "igniteui-webcomponents/themes/light/bootstrap.css";
98
import "./index.css";
109

11-
// Register components
12-
IgcGridLite.register();
1310

14-
export default function Sample() {
11+
export default function GridLiteDataBinding() {
1512
const [showingProducts, setShowingProducts] = useState(true);
1613
const [data, setData] = useState([]);
1714

18-
React.useEffect(() => {
15+
useEffect(() => {
1916
const dataService = new GridLiteDataService();
2017
setData(dataService.generateProducts(50));
2118

@@ -50,15 +47,15 @@ export default function Sample() {
5047
Switch Data
5148
</IgrButton>
5249
</div>
53-
<igc-grid-lite
54-
auto-generate="true"
50+
<IgrGridLite
51+
autoGenerate={true}
5552
id="grid-lite"
5653
data={data}
57-
></igc-grid-lite>
54+
></IgrGridLite>
5855
</div>
5956
);
6057
}
6158

6259
// rendering above component in the React DOM
6360
const root = ReactDOM.createRoot(document.getElementById("root"));
64-
root.render(<Sample />);
61+
root.render(<GridLiteDataBinding />);

‎samples/grids/grid-lite/filtering-config-events/src/index.tsx‎

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
import React from 'react';
1+
import { useState, useCallback, useRef, useEffect } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { GridLiteDataService, User } from './GridLiteDataService';
44

5-
// Import the web component
6-
import { IgcGridLite } from 'igniteui-grid-lite';
7-
5+
import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite';
86
import "igniteui-webcomponents/themes/light/bootstrap.css";
97
import "./index.css";
108

11-
// Register components
12-
IgcGridLite.register();
13-
149
const getTime = () => `[${new Date().toLocaleTimeString()}]`;
1510

16-
export default function Sample() {
17-
const gridRef = React.useRef<any>(null);
18-
const logRef = React.useRef<HTMLDivElement>(null);
19-
const [log, setLog] = React.useState<string[]>([]);
11+
export default function GridLiteFilteringConfigEvents() {
12+
const logRef = useRef<HTMLDivElement>(null);
13+
const [data, setData] = useState<User[]>([]);
14+
const [log, setLog] = useState<string[]>([]);
2015

21-
const updateLog = React.useCallback((message: string) => {
16+
const updateLog = useCallback((message: string) => {
2217
setLog(prevLog => {
2318
const newLog = [...prevLog];
2419
if (newLog.length > 10) {
@@ -29,59 +24,45 @@ export default function Sample() {
2924
});
3025
}, []);
3126

32-
React.useEffect(() => {
27+
useEffect(() => {
3328
if (logRef.current) {
3429
logRef.current.scrollTop = logRef.current.scrollHeight;
3530
}
3631
}, [log]);
3732

38-
React.useEffect(() => {
39-
if (gridRef.current) {
40-
const dataService = new GridLiteDataService();
41-
const data: User[] = dataService.generateUsers(50);
42-
gridRef.current.data = data;
43-
44-
// Listen to filter events
45-
const handleFiltering = (e: any) => {
46-
const { expressions, type } = e.detail;
47-
updateLog(`${getTime()} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
48-
};
49-
50-
const handleFiltered = (e: any) => {
51-
updateLog(`${getTime()} :: Event \`${e.type}\` for column '${e.detail.key}'`);
52-
};
53-
54-
gridRef.current.addEventListener('filtering', handleFiltering);
55-
gridRef.current.addEventListener('filtered', handleFiltered);
33+
const handleFiltering = useCallback((event: CustomEvent<any>) => {
34+
const { expressions, type } = event.detail;
35+
updateLog(`${getTime()} :: Event \`filtering\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
36+
}, [updateLog]);
5637

57-
return () => {
58-
if (gridRef.current) {
59-
gridRef.current.removeEventListener('filtering', handleFiltering);
60-
gridRef.current.removeEventListener('filtered', handleFiltered);
61-
}
62-
};
63-
}
38+
const handleFiltered = useCallback((event: CustomEvent<any>) => {
39+
updateLog(`${getTime()} :: Event \`filtered\` for column '${event.detail.key}'`);
6440
}, [updateLog]);
6541

66-
const logContent = log
67-
.map(entry => `<p><code>${entry}</code></p>`)
68-
.join('');
42+
useEffect(() => {
43+
const dataService = new GridLiteDataService();
44+
setData(dataService.generateUsers(50));
45+
}, []);
6946

7047
return (
7148
<div className="container sample ig-typography">
7249
<div className="grid-lite-wrapper">
73-
<igc-grid-lite ref={gridRef} id="grid-lite">
74-
<igc-grid-lite-column field="firstName" header="First name" filterable></igc-grid-lite-column>
75-
<igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
76-
<igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
77-
<igc-grid-lite-column field="email" header="Email" filterable></igc-grid-lite-column>
78-
</igc-grid-lite>
79-
<div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
50+
<IgrGridLite id="grid-lite" data={data} onFiltering={handleFiltering} onFiltered={handleFiltered}>
51+
<IgrGridLiteColumn field="firstName" header="First name" filterable={true}></IgrGridLiteColumn>
52+
<IgrGridLiteColumn field="lastName" header="Last name" filterable={true}></IgrGridLiteColumn>
53+
<IgrGridLiteColumn field="age" header="Age" filterable={true} dataType="number"></IgrGridLiteColumn>
54+
<IgrGridLiteColumn field="email" header="Email" filterable={true}></IgrGridLiteColumn>
55+
</IgrGridLite>
56+
<div ref={logRef} className="log" id="log">
57+
{log.map((entry, index) => (
58+
<p key={index}><code>{entry}</code></p>
59+
))}
60+
</div>
8061
</div>
8162
</div>
8263
);
8364
}
8465

8566
// rendering above component in the React DOM
8667
const root = ReactDOM.createRoot(document.getElementById('root'));
87-
root.render(<Sample/>);
68+
root.render(<GridLiteFilteringConfigEvents/>);

‎samples/grids/grid-lite/sort-config-events/src/index.tsx‎

Lines changed: 38 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,28 @@
1-
import React from 'react';
1+
import React, { useState, useCallback, useRef, useEffect } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
44

5-
// Import the web component
6-
import { IgcGridLite } from 'igniteui-grid-lite';
7-
import {
8-
defineComponents,
9-
IgcRatingComponent
10-
} from 'igniteui-webcomponents';
5+
import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite';
6+
import { IgrRating } from 'igniteui-react';
117
import "igniteui-webcomponents/themes/light/bootstrap.css";
128
import "./index.css";
139

14-
// Register components
15-
IgcGridLite.register();
16-
defineComponents(IgcRatingComponent);
17-
1810
const getTimeStamp = (): string => `[${new Date().toLocaleTimeString()}]`;
1911

2012
// Define cellTemplate function outside component
21-
const ratingCellTemplate = (params: any) => {
22-
const rating = document.createElement('igc-rating');
23-
rating.setAttribute('readonly', '');
24-
rating.setAttribute('step', '0.01');
25-
rating.setAttribute('value', params.value.toString());
26-
return rating;
13+
const ratingCellTemplate = (ctx: any) => {
14+
return (
15+
<IgrRating readonly={true} step={0.01} value={ctx.value}></IgrRating>
16+
);
2717
};
2818

29-
export default function Sample() {
30-
const gridRef = React.useRef<any>(null);
31-
const logRef = React.useRef<HTMLDivElement>(null);
32-
const [log, setLog] = React.useState<string[]>([]);
19+
export default function GridLiteSortConfigEvents() {
20+
const gridRef = useRef<IgrGridLite>(null);
21+
const logRef = useRef<HTMLDivElement>(null);
22+
const [data, setData] = useState<ProductInfo[]>([]);
23+
const [log, setLog] = useState<string[]>([]);
3324

34-
const updateLog = React.useCallback((message: string) => {
25+
const updateLog = useCallback((message: string) => {
3526
setLog(prevLog => {
3627
const newLog = [...prevLog];
3728
if (newLog.length > 10) {
@@ -42,74 +33,60 @@ export default function Sample() {
4233
});
4334
}, []);
4435

45-
React.useEffect(() => {
36+
useEffect(() => {
4637
if (logRef.current) {
4738
logRef.current.scrollTop = logRef.current.scrollHeight;
4839
}
4940
}, [log]);
5041

51-
const handleSorting = React.useCallback((event: any) => {
52-
const { detail, type } = event;
42+
const handleSorting = useCallback((event: CustomEvent<any>) => {
43+
const { detail } = event;
5344
const allowedColumns = ['price', 'total', 'sold'];
5445

5546
if (!allowedColumns.includes(detail.key)) {
5647
event.preventDefault();
5748
updateLog(
58-
`${getTimeStamp()} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'`
49+
`${getTimeStamp()} :: Event 'sorting' :: Sort operation was prevented for column '${detail.key}'`
5950
);
6051
} else {
6152
updateLog(
62-
`${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
53+
`${getTimeStamp()} :: Event 'sorting' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
6354
);
6455
}
6556
}, [updateLog]);
6657

67-
const handleSorted = React.useCallback((event: any) => {
68-
const { detail, type } = event;
58+
const handleSorted = useCallback((event: CustomEvent<any>) => {
59+
const { detail } = event;
6960
updateLog(
70-
`${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
61+
`${getTimeStamp()} :: Event 'sorted' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
7162
);
7263
}, [updateLog]);
7364

74-
React.useEffect(() => {
75-
if (gridRef.current) {
76-
const dataService = new GridLiteDataService();
77-
const data: ProductInfo[] = dataService.generateProducts(100);
78-
gridRef.current.data = data;
79-
80-
// Listen to sorting events
81-
gridRef.current.addEventListener('sorting', handleSorting);
82-
gridRef.current.addEventListener('sorted', handleSorted);
83-
84-
return () => {
85-
if (gridRef.current) {
86-
gridRef.current.removeEventListener('sorting', handleSorting);
87-
gridRef.current.removeEventListener('sorted', handleSorted);
88-
}
89-
};
90-
}
91-
}, [handleSorting, handleSorted]);
92-
93-
const logContent = log
94-
.map(entry => `<p><code>${entry}</code></p>`)
95-
.join('');
65+
useEffect(() => {
66+
const dataService = new GridLiteDataService();
67+
setData(dataService.generateProducts(100));
68+
}, []);
9669

9770
return (
9871
<div className="container sample ig-typography">
9972
<div className="grid-lite-wrapper">
100-
<igc-grid-lite ref={gridRef} id="grid-lite">
101-
<igc-grid-lite-column field="name" header="Name" sortable></igc-grid-lite-column>
102-
<igc-grid-lite-column field="price" data-type="number" header="Price" sortable></igc-grid-lite-column>
103-
<igc-grid-lite-column field="rating" data-type="number" header="Rating" sortable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
104-
<igc-grid-lite-column field="sold" data-type="number" header="Sold" sortable></igc-grid-lite-column>
105-
<igc-grid-lite-column field="total" data-type="number" header="Total" sortable></igc-grid-lite-column>
106-
</igc-grid-lite>
107-
<div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
73+
<IgrGridLite ref={gridRef} id="grid-lite" data={data} onSorting={handleSorting} onSorted={handleSorted}>
74+
<IgrGridLiteColumn field="name" header="Name" sortable={true}></IgrGridLiteColumn>
75+
<IgrGridLiteColumn field="price" dataType="number" header="Price" sortable={true}></IgrGridLiteColumn>
76+
<IgrGridLiteColumn field="rating" dataType="number" header="Rating" sortable={true} cellTemplate={ratingCellTemplate}></IgrGridLiteColumn>
77+
<IgrGridLiteColumn field="sold" dataType="number" header="Sold" sortable={true}></IgrGridLiteColumn>
78+
<IgrGridLiteColumn field="total" dataType="number" header="Total" sortable={true}></IgrGridLiteColumn>
79+
</IgrGridLite>
80+
<div ref={logRef} className="log" id="log">
81+
{log.map((entry, index) => (
82+
<p key={index}><code>{entry}</code></p>
83+
))}
84+
</div>
10885
</div>
10986
</div>
11087
);
11188
}
11289

11390
// rendering above component in the React DOM
11491
const root = ReactDOM.createRoot(document.getElementById('root'));
115-
root.render(<Sample/>);
92+
root.render(<GridLiteSortConfigEvents/>);

0 commit comments

Comments
 (0)