From d46cd4cc206253fd4288148e8a51556fa82e5d70 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 26 Feb 2026 20:25:19 +0200 Subject: [PATCH 1/6] feat(grid-lite): use react wrappers in data-binding sample --- .../grids/grid-lite/data-binding/src/index.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/samples/grids/grid-lite/data-binding/src/index.tsx b/samples/grids/grid-lite/data-binding/src/index.tsx index 00e7d7c616..f1e8752674 100644 --- a/samples/grids/grid-lite/data-binding/src/index.tsx +++ b/samples/grids/grid-lite/data-binding/src/index.tsx @@ -2,16 +2,13 @@ import React, { useCallback, useState } from "react"; import ReactDOM from "react-dom/client"; import { GridLiteDataService } from "./GridLiteDataService"; -// Import the web component -import { IgcGridLite } from "igniteui-grid-lite"; +import { IgrGridLite } from 'igniteui-react/grid-lite'; import { IgrButton } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; -// Register components -IgcGridLite.register(); -export default function Sample() { +export default function GridLiteDataBinding() { const [showingProducts, setShowingProducts] = useState(true); const [data, setData] = useState([]); @@ -50,15 +47,15 @@ export default function Sample() { Switch Data - + > ); } // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); From 1649fb3fa48dacff68455441a054bc5a9443d7ce Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 26 Feb 2026 20:33:05 +0200 Subject: [PATCH 2/6] refactor(grid-lite): migrate sort-config-sample to React components --- .../sort-config-sample/src/index.tsx | 34 +++++++------------ 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/samples/grids/grid-lite/sort-config-sample/src/index.tsx b/samples/grids/grid-lite/sort-config-sample/src/index.tsx index 0b2faa3d6e..ced2d3184f 100644 --- a/samples/grids/grid-lite/sort-config-sample/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-sample/src/index.tsx @@ -1,36 +1,28 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import { GridLiteDataService, User } from './GridLiteDataService'; -// Import the web component -import { IgcGridLite } from 'igniteui-grid-lite'; - +import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite'; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; -// Register components -IgcGridLite.register(); - -export default function Sample() { - const gridRef = React.useRef(null); +export default function GridLiteSortConfig() { + const [data, setData] = useState([]); React.useEffect(() => { - if (gridRef.current) { - const dataService = new GridLiteDataService(); - const data: User[] = dataService.generateUsers(50); - gridRef.current.data = data; - } + const dataService = new GridLiteDataService(); + setData(dataService.generateUsers(50)); }, []); return (
- - - - - - + + + + + +
); @@ -38,4 +30,4 @@ export default function Sample() { // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); From afeefe83cc64d6dd3c1e963443de76e2640226c2 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 26 Feb 2026 21:41:16 +0200 Subject: [PATCH 3/6] refactor(grid-lite): convert sort-config-events to React components --- .../sort-config-events/src/index.tsx | 99 +++++++------------ 1 file changed, 38 insertions(+), 61 deletions(-) diff --git a/samples/grids/grid-lite/sort-config-events/src/index.tsx b/samples/grids/grid-lite/sort-config-events/src/index.tsx index 0de195ae7a..45392a43b7 100644 --- a/samples/grids/grid-lite/sort-config-events/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-events/src/index.tsx @@ -1,37 +1,28 @@ -import React from 'react'; +import React, { useState, useCallback, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { GridLiteDataService, ProductInfo } from './GridLiteDataService'; -// Import the web component -import { IgcGridLite } from 'igniteui-grid-lite'; -import { - defineComponents, - IgcRatingComponent -} from 'igniteui-webcomponents'; +import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite'; +import { IgrRating } from 'igniteui-react'; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; -// Register components -IgcGridLite.register(); -defineComponents(IgcRatingComponent); - const getTimeStamp = (): string => `[${new Date().toLocaleTimeString()}]`; // Define cellTemplate function outside component -const ratingCellTemplate = (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('step', '0.01'); - rating.setAttribute('value', params.value.toString()); - return rating; +const ratingCellTemplate = (ctx: any) => { + return ( + + ); }; -export default function Sample() { - const gridRef = React.useRef(null); - const logRef = React.useRef(null); - const [log, setLog] = React.useState([]); +export default function GridLiteSortConfigEvents() { + const gridRef = useRef(null); + const logRef = useRef(null); + const [data, setData] = useState([]); + const [log, setLog] = useState([]); - const updateLog = React.useCallback((message: string) => { + const updateLog = useCallback((message: string) => { setLog(prevLog => { const newLog = [...prevLog]; if (newLog.length > 10) { @@ -42,69 +33,55 @@ export default function Sample() { }); }, []); - React.useEffect(() => { + useEffect(() => { if (logRef.current) { logRef.current.scrollTop = logRef.current.scrollHeight; } }, [log]); - const handleSorting = React.useCallback((event: any) => { - const { detail, type } = event; + const handleSorting = useCallback((event: CustomEvent) => { + const { detail } = event; const allowedColumns = ['price', 'total', 'sold']; if (!allowedColumns.includes(detail.key)) { event.preventDefault(); updateLog( - `${getTimeStamp()} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'` + `${getTimeStamp()} :: Event 'sorting' :: Sort operation was prevented for column '${detail.key}'` ); } else { updateLog( - `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}` + `${getTimeStamp()} :: Event 'sorting' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}` ); } }, [updateLog]); - const handleSorted = React.useCallback((event: any) => { - const { detail, type } = event; + const handleSorted = useCallback((event: CustomEvent) => { + const { detail } = event; updateLog( - `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}` + `${getTimeStamp()} :: Event 'sorted' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}` ); }, [updateLog]); - React.useEffect(() => { - if (gridRef.current) { - const dataService = new GridLiteDataService(); - const data: ProductInfo[] = dataService.generateProducts(100); - gridRef.current.data = data; - - // Listen to sorting events - gridRef.current.addEventListener('sorting', handleSorting); - gridRef.current.addEventListener('sorted', handleSorted); - - return () => { - if (gridRef.current) { - gridRef.current.removeEventListener('sorting', handleSorting); - gridRef.current.removeEventListener('sorted', handleSorted); - } - }; - } - }, [handleSorting, handleSorted]); - - const logContent = log - .map(entry => `

${entry}

`) - .join(''); + useEffect(() => { + const dataService = new GridLiteDataService(); + setData(dataService.generateProducts(100)); + }, []); return (
- - - - - - - -
+ + + + + + + +
+ {log.map((entry, index) => ( +

{entry}

+ ))} +
); @@ -112,4 +89,4 @@ export default function Sample() { // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); From 33efbb8f03c6a8abefc28c180b123d70e4044e0e Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 26 Feb 2026 21:42:29 +0200 Subject: [PATCH 4/6] refactor(grid-lite): use useEffect hook directly in data-binding --- samples/grids/grid-lite/data-binding/src/index.tsx | 4 ++-- samples/grids/grid-lite/sort-config-sample/src/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/samples/grids/grid-lite/data-binding/src/index.tsx b/samples/grids/grid-lite/data-binding/src/index.tsx index f1e8752674..43373c0437 100644 --- a/samples/grids/grid-lite/data-binding/src/index.tsx +++ b/samples/grids/grid-lite/data-binding/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from "react"; +import { useCallback, useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; import { GridLiteDataService } from "./GridLiteDataService"; @@ -12,7 +12,7 @@ export default function GridLiteDataBinding() { const [showingProducts, setShowingProducts] = useState(true); const [data, setData] = useState([]); - React.useEffect(() => { + useEffect(() => { const dataService = new GridLiteDataService(); setData(dataService.generateProducts(50)); diff --git a/samples/grids/grid-lite/sort-config-sample/src/index.tsx b/samples/grids/grid-lite/sort-config-sample/src/index.tsx index ced2d3184f..90000326ab 100644 --- a/samples/grids/grid-lite/sort-config-sample/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-sample/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { GridLiteDataService, User } from './GridLiteDataService'; @@ -9,7 +9,7 @@ import "./index.css"; export default function GridLiteSortConfig() { const [data, setData] = useState([]); - React.useEffect(() => { + useEffect(() => { const dataService = new GridLiteDataService(); setData(dataService.generateUsers(50)); }, []); From 0a8b161a188ae7a3894048679642a7360c8713de Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Sun, 1 Mar 2026 12:58:02 +0200 Subject: [PATCH 5/6] refactor(grid-lite): use React wrappers in sort-config-pipeline --- .../sort-config-pipeline/src/index.tsx | 62 ++++++++----------- 1 file changed, 27 insertions(+), 35 deletions(-) diff --git a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx index e81ec57dc7..5cd62608f5 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx @@ -1,28 +1,17 @@ -import React from 'react'; +import { useState, useEffect, useMemo, useRef } from 'react'; import ReactDOM from 'react-dom/client'; import { GridLiteDataService, ProductInfo } from './GridLiteDataService'; -// Import the web component -import { IgcGridLite } from 'igniteui-grid-lite'; -import { - defineComponents, - IgcRatingComponent, - IgcCircularProgressComponent -} from 'igniteui-webcomponents'; +import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite'; +import { IgrRating } from 'igniteui-react'; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; -// Register components -IgcGridLite.register(); -defineComponents(IgcRatingComponent, IgcCircularProgressComponent); - // Define cellTemplate function outside component -const ratingCellTemplate = (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('step', '0.01'); - rating.setAttribute('value', params.value.toString()); - return rating; +const ratingCellTemplate = (ctx: any) => { + return ( + + ); }; const buildUri = (state: any[]): string => { @@ -40,12 +29,13 @@ const buildUri = (state: any[]): string => { return `GET: /data?sort_by=${uri.join(',')}`; }; -export default function Sample() { - const gridRef = React.useRef(null); - const progressRef = React.useRef(null); - const [queryString, setQueryString] = React.useState(''); +export default function GridLiteSortConfigPipeline() { + const gridRef = useRef(null); + const progressRef = useRef(null); + const [data, setData] = useState([]); + const [queryString, setQueryString] = useState(''); - const dataPipelineConfiguration = React.useMemo(() => ({ + const dataPipelineConfiguration = useMemo(() => ({ sort: async ({ data, grid }: any) => { if (progressRef.current) { progressRef.current.classList.add('in-operation'); @@ -63,11 +53,13 @@ export default function Sample() { } }), []); - React.useEffect(() => { + useEffect(() => { + const dataService = new GridLiteDataService(); + setData(dataService.generateProducts(100)); + }, []); + + useEffect(() => { if (gridRef.current) { - const dataService = new GridLiteDataService(); - const data: ProductInfo[] = dataService.generateProducts(100); - gridRef.current.data = data; gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration; } }, [dataPipelineConfiguration]); @@ -80,13 +72,13 @@ export default function Sample() {
- - - - - - - + + + + + + +
); @@ -94,4 +86,4 @@ export default function Sample() { // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); From ff2e088d0a36995343a519d66dcd6dabfa8f98d1 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Sun, 1 Mar 2026 13:01:35 +0200 Subject: [PATCH 6/6] refactor(grid-lite): use React wrappers in filtering-config-events --- .../filtering-config-events/src/index.tsx | 79 +++++++------------ 1 file changed, 30 insertions(+), 49 deletions(-) diff --git a/samples/grids/grid-lite/filtering-config-events/src/index.tsx b/samples/grids/grid-lite/filtering-config-events/src/index.tsx index 3829a8dc1b..a9e2ab6c63 100644 --- a/samples/grids/grid-lite/filtering-config-events/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-events/src/index.tsx @@ -1,24 +1,19 @@ -import React from 'react'; +import { useState, useCallback, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { GridLiteDataService, User } from './GridLiteDataService'; -// Import the web component -import { IgcGridLite } from 'igniteui-grid-lite'; - +import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite'; import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; -// Register components -IgcGridLite.register(); - const getTime = () => `[${new Date().toLocaleTimeString()}]`; -export default function Sample() { - const gridRef = React.useRef(null); - const logRef = React.useRef(null); - const [log, setLog] = React.useState([]); +export default function GridLiteFilteringConfigEvents() { + const logRef = useRef(null); + const [data, setData] = useState([]); + const [log, setLog] = useState([]); - const updateLog = React.useCallback((message: string) => { + const updateLog = useCallback((message: string) => { setLog(prevLog => { const newLog = [...prevLog]; if (newLog.length > 10) { @@ -29,54 +24,40 @@ export default function Sample() { }); }, []); - React.useEffect(() => { + useEffect(() => { if (logRef.current) { logRef.current.scrollTop = logRef.current.scrollHeight; } }, [log]); - React.useEffect(() => { - if (gridRef.current) { - const dataService = new GridLiteDataService(); - const data: User[] = dataService.generateUsers(50); - gridRef.current.data = data; - - // Listen to filter events - const handleFiltering = (e: any) => { - const { expressions, type } = e.detail; - updateLog(`${getTime()} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`); - }; - - const handleFiltered = (e: any) => { - updateLog(`${getTime()} :: Event \`${e.type}\` for column '${e.detail.key}'`); - }; - - gridRef.current.addEventListener('filtering', handleFiltering); - gridRef.current.addEventListener('filtered', handleFiltered); + const handleFiltering = useCallback((event: CustomEvent) => { + const { expressions, type } = event.detail; + updateLog(`${getTime()} :: Event \`filtering\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`); + }, [updateLog]); - return () => { - if (gridRef.current) { - gridRef.current.removeEventListener('filtering', handleFiltering); - gridRef.current.removeEventListener('filtered', handleFiltered); - } - }; - } + const handleFiltered = useCallback((event: CustomEvent) => { + updateLog(`${getTime()} :: Event \`filtered\` for column '${event.detail.key}'`); }, [updateLog]); - const logContent = log - .map(entry => `

${entry}

`) - .join(''); + useEffect(() => { + const dataService = new GridLiteDataService(); + setData(dataService.generateUsers(50)); + }, []); return (
- - - - - - -
+ + + + + + +
+ {log.map((entry, index) => ( +

{entry}

+ ))} +
); @@ -84,4 +65,4 @@ export default function Sample() { // rendering above component in the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render();