Skip to content

Migrate Grid Lite samples to v0.4.0 declarative column API with function components #1028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 8 commits into
base: vnext
Choose a base branch
from
Draft

Migrate Grid Lite samples to v0.4.0 declarative column API with function components #1028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
75424ab
Initial plan
Copilot Feb 4, 2026
8c75cc7
Transform all Grid Lite samples to use declarative column API v0.4.0
Copilot Feb 4, 2026
7b0e408
Add explicit initial state for dynamic column properties
Copilot Feb 4, 2026
5dfbd91
Refactor Grid Lite samples from class-based to function-based components
Copilot Feb 5, 2026
5358ef6
Address code review feedback - consolidate duplicate cellTemplates an…
Copilot Feb 5, 2026
46f2710
Remove setState from useMemo dependencies (stable by design)
Copilot Feb 5, 2026
18352ac
chore(grid-lite): update versions for samples browser
MarielaTihova Feb 12, 2026
d657b52
chore: package.json
MarielaTihova Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 164 additions & 66 deletions browser/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion browser/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"dompurify": "^3.3.0",
"file-saver": "1.3.8",
"igniteui-dockmanager": "^1.17.0",
"igniteui-grid-lite": "^0.0.1",
"igniteui-grid-lite": "~0.4.0",
"igniteui-react": "^19.4.0",
"igniteui-react-charts": "19.3.2",
"igniteui-react-core": "19.3.2",
Expand Down
2 changes: 1 addition & 1 deletion browser/tasks/gulp-samples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -861,7 +861,7 @@ function updateIG(cb) {
// these IG packages are sometimes updated:
{ version: "^6.3.0", name: "igniteui-webcomponents" },
{ version: "^19.4.0", name: "igniteui-react-dockmanager" },
{ version: "^0.0.1", name: "igniteui-grid-lite" },
{ version: "~0.4.0", name: "igniteui-grid-lite" },
// main react packages
{ version: "^19.2.0", name: "react" },
{ version: "^19.2.0", name: "react-dom" },
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/column-config-basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"lint": "eslint ./src/**/*.{ts,tsx}"
},
"dependencies": {
"igniteui-grid-lite": "^0.0.1",
"igniteui-grid-lite": "~0.4.0",
"igniteui-react": "^19.4.0",
"igniteui-webcomponents": "^6.3.0",
"lit-html": "^3.2.0",
Expand Down
108 changes: 38 additions & 70 deletions samples/grids/grid-lite/column-config-basic/src/index.tsx
View file
Open in desktop
Copy link
Member

@damyanpetev damyanpetev Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot I don't like the use of gridRef to access columns to assign templates. It should work just fine to assign those directly to the column component.

<igc-grid-lite-column field="price" cellTemplate={priceCellTemplate}></igc-grid-lite-column>

Can you update the those to simple functions for all samples. Also while at it, switch the sample components to function-based please.

Copy link
Contributor Author

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! All 13 samples have been refactored to:

  1. Function-based components using React hooks (useState, useEffect, useCallback, useMemo)
  2. cellTemplate functions defined outside component and passed directly as props
  3. Removed all gridRef.current.columns.find() pattern for setting templates

See commits 5dfbd91, 5358ef6, and 46f2710 for the complete refactoring.

Original file line number Diff line number Diff line change
Expand Up @@ -16,82 +16,50 @@ import "./index.css";
IgcGridLite.register();
defineComponents(IgcRatingComponent);

export default class Sample extends React.Component<any, any> {
private dataService: GridLiteDataService;
private formatter: Intl.NumberFormat;
private gridRef: React.RefObject<any>;
const formatter = new Intl.NumberFormat('en-EN', {
style: 'currency',
currency: 'EUR'
});

constructor(props: any) {
super(props);
this.dataService = new GridLiteDataService();
this.formatter = new Intl.NumberFormat('en-EN', {
style: 'currency',
currency: 'EUR'
});
this.gridRef = React.createRef();
}
// Define cellTemplate functions outside component
const currencyCellTemplate = (params: any) => {
const span = document.createElement('span');
span.textContent = formatter.format(params.value);
return span;
};

componentDidMount() {
if (this.gridRef.current) {
const data: ProductInfo[] = this.dataService.generateProducts(50);

const columns = [
{
key: 'name',
headerText: 'Product Name'
},
{
key: 'price',
headerText: 'Price',
type: 'number',
cellTemplate: (params: any) => {
const span = document.createElement('span');
span.textContent = this.formatter.format(params.value);
return span;
}
},
{
key: 'sold',
type: 'number',
headerText: 'Units sold'
},
{
key: 'total',
headerText: 'Total sold',
cellTemplate: (params: any) => {
const span = document.createElement('span');
span.textContent = this.formatter.format(params.value);
return span;
}
},
{
key: 'rating',
type: 'number',
headerText: 'Customer rating',
cellTemplate: (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 = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
rating.setAttribute('value', params.value.toString());
return rating;
};

this.gridRef.current.columns = columns;
this.gridRef.current.data = data;
export default function Sample() {
const gridRef = React.useRef<any>(null);

React.useEffect(() => {
if (gridRef.current) {
const dataService = new GridLiteDataService();
const data: ProductInfo[] = dataService.generateProducts(50);
gridRef.current.data = data;
}
}
}, []);

public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="grid-lite-wrapper">
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
</div>
return (
<div className="container sample ig-typography">
<div className="grid-lite-wrapper">
<igc-grid-lite ref={gridRef} id="grid-lite">
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
<igc-grid-lite-column field="price" header="Price" data-type="number" cellTemplate={currencyCellTemplate}></igc-grid-lite-column>
<igc-grid-lite-column field="sold" data-type="number" header="Units sold"></igc-grid-lite-column>
<igc-grid-lite-column field="total" header="Total sold" cellTemplate={currencyCellTemplate}></igc-grid-lite-column>
<igc-grid-lite-column field="rating" data-type="number" header="Customer rating" cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
</igc-grid-lite>
</div>
);
}
</div>
);
}

// rendering above component in the React DOM
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/column-config-dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"lint": "eslint ./src/**/*.{ts,tsx}"
},
"dependencies": {
"igniteui-grid-lite": "^0.0.1",
"igniteui-grid-lite": "~0.4.0",
"igniteui-react": "^19.4.0",
"igniteui-webcomponents": "^6.3.0",
"lit-html": "^3.2.0",
Expand Down
Loading
Loading