+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
}
// rendering above component in the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
);
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
);
diff --git a/samples/grids/grid-lite/sort-config-grid/src/index.tsx b/samples/grids/grid-lite/sort-config-grid/src/index.tsx
index 6dcaff9b7c..4cf9af5c69 100644
--- a/samples/grids/grid-lite/sort-config-grid/src/index.tsx
+++ b/samples/grids/grid-lite/sort-config-grid/src/index.tsx
@@ -1,78 +1,94 @@
-import React, { useRef, useState } from 'react';
-import ReactDOM from 'react-dom/client';
-import { IgrSwitch } from 'igniteui-react';
-import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
+import React, { useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
+import { IgrRating, IgrSwitch } from "igniteui-react";
+import { GridLiteDataService, ProductInfo } from "./GridLiteDataService";
-// Import the web component
-import { IgcGridLite } from 'igniteui-grid-lite';
-import {
- defineComponents,
- IgcRatingComponent
-} from 'igniteui-webcomponents';
+import {
+ IgrGridLite,
+ IgrGridLiteColumn,
+ type IgrCellContext,
+} from "igniteui-react/grid-lite";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";
-// Register components
-IgcGridLite.register();
-defineComponents(IgcRatingComponent);
-
// 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: IgrCellContext) => (
+
+);
export default function Sample() {
const gridRef = useRef
(null);
- const [switchChecked, setSwitchChecked] = useState(true);
+ const [data, setData] = useState([]);
const [sortingOptions, setSortingOptions] = useState({
- mode: 'multiple'
+ mode: "multiple",
});
React.useEffect(() => {
- if (gridRef.current) {
- const dataService = new GridLiteDataService();
- const data: ProductInfo[] = dataService.generateProducts(100);
- gridRef.current.data = data;
- gridRef.current.sortingOptions = sortingOptions;
- }
- }, [sortingOptions]);
+ const dataService = new GridLiteDataService();
+ const items: ProductInfo[] = dataService.generateProducts(100);
+ setData(items);
+ }, []);
- const updateConfig = React.useCallback((prop: string, checked: boolean) => {
- setSwitchChecked(checked);
-
- if (prop === 'multiple' && gridRef.current) {
- const mode = checked ? 'multiple' : 'single';
- setSortingOptions({ mode });
-
- gridRef.current.sortingConfiguration = { mode };
- gridRef.current.clearSort();
- }
+ const updateConfig = React.useCallback((checked: boolean) => {
+ const mode = checked ? "multiple" : "single";
+ setSortingOptions((prev: any) => ({ ...prev, mode }));
+ gridRef.current?.clearSort();
}, []);
-
+
return (
-
- updateConfig('multiple', e.target.checked)}>
- Multiple Sort
+
+ updateConfig(e.target.checked)}
+ >
+ Enable multi-sort
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+ {`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+
+
+
+
+
+
+
+
+
);