From 75424ab2469bdf904a644a7438eedd4752b7cfe7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 10:11:21 +0000 Subject: [PATCH 1/8] Initial plan From 8c75cc76c4d8655a4bff422d893f58afa8aa9128 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 10:18:19 +0000 Subject: [PATCH 2/8] Transform all Grid Lite samples to use declarative column API v0.4.0 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com> --- .../column-config-basic/package.json | 2 +- .../column-config-basic/src/index.tsx | 80 ++++----- .../column-config-dynamic/package.json | 2 +- .../column-config-dynamic/src/index.tsx | 84 +++++---- .../column-config-headers/package.json | 2 +- .../column-config-headers/src/index.tsx | 36 +--- .../grids/grid-lite/data-binding/package.json | 2 +- .../filtering-config-events/package.json | 2 +- .../filtering-config-events/src/index.tsx | 16 +- .../filtering-config-remote/package.json | 2 +- .../filtering-config-remote/src/index.tsx | 15 +- .../grid-lite/filtering-config/package.json | 2 +- .../grid-lite/filtering-config/src/index.tsx | 48 ++---- samples/grids/grid-lite/overview/package.json | 2 +- .../grids/grid-lite/overview/src/index.tsx | 163 ++++++++---------- .../grid-lite/sort-config-events/package.json | 2 +- .../sort-config-events/src/index.tsx | 58 ++----- .../grid-lite/sort-config-grid/package.json | 2 +- .../grid-lite/sort-config-grid/src/index.tsx | 74 +++----- .../sort-config-pipeline/package.json | 2 +- .../sort-config-pipeline/src/index.tsx | 62 +++---- .../grid-lite/sort-config-sample/package.json | 2 +- .../sort-config-sample/src/index.tsx | 33 +--- .../styling-custom-theme/package.json | 2 +- .../styling-custom-theme/src/index.tsx | 61 ++----- 25 files changed, 297 insertions(+), 459 deletions(-) diff --git a/samples/grids/grid-lite/column-config-basic/package.json b/samples/grids/grid-lite/column-config-basic/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/column-config-basic/package.json +++ b/samples/grids/grid-lite/column-config-basic/package.json @@ -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", diff --git a/samples/grids/grid-lite/column-config-basic/src/index.tsx b/samples/grids/grid-lite/column-config-basic/src/index.tsx index 2aadabba08..74017ea3f9 100644 --- a/samples/grids/grid-lite/column-config-basic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-basic/src/index.tsx @@ -35,50 +35,36 @@ export default class Sample extends React.Component { 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; - } - } - ]; + // Set cellTemplate for columns with custom rendering + const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price'); + if (priceCol) { + priceCol.cellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = this.formatter.format(params.value); + return span; + }; + } + + const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total'); + if (totalCol) { + totalCol.cellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = this.formatter.format(params.value); + return span; + }; + } + + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + if (ratingCol) { + ratingCol.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; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -87,7 +73,13 @@ export default class Sample extends React.Component { return (
- + + + + + + +
); diff --git a/samples/grids/grid-lite/column-config-dynamic/package.json b/samples/grids/grid-lite/column-config-dynamic/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/column-config-dynamic/package.json +++ b/samples/grids/grid-lite/column-config-dynamic/package.json @@ -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", diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx index b910476fdc..bc0c8c952b 100644 --- a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx @@ -35,34 +35,34 @@ export default class Sample extends React.Component { }; protected columns = [ { - key: 'id', + field: 'id', hidden: true, - headerText: 'ID' + header: 'ID' }, { - key: 'name', - headerText: 'Product Name' + field: 'name', + header: 'Product Name' }, { - key: 'price', - headerText: 'Price', - type: 'number', + field: 'price', + header: 'Price', + dataType: 'number', cellTemplate: this.format }, { - key: 'sold', - type: 'number', - headerText: 'Units sold' + field: 'sold', + dataType: 'number', + header: 'Units sold' }, { - key: 'total', - headerText: 'Total sold', + field: 'total', + header: 'Total sold', cellTemplate: this.format }, { - key: 'rating', - type: 'number', - headerText: 'Customer rating', + field: 'rating', + dataType: 'number', + header: 'Customer rating', cellTemplate: (params: any) => { const rating = document.createElement('igc-rating'); rating.setAttribute('readonly', ''); @@ -86,7 +86,23 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: ProductInfo[] = this.dataService.generateProducts(50); - this.gridRef.current.columns = this.columns; + // Set cellTemplates programmatically for columns that need them + const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price'); + if (priceCol && this.columns.find(col => col.field === 'price')?.cellTemplate) { + priceCol.cellTemplate = this.format; + } + + const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total'); + if (totalCol && this.columns.find(col => col.field === 'total')?.cellTemplate) { + totalCol.cellTemplate = this.format; + } + + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + const ratingColDef = this.columns.find(col => col.field === 'rating'); + if (ratingCol && ratingColDef?.cellTemplate) { + ratingCol.cellTemplate = ratingColDef.cellTemplate; + } + this.gridRef.current.data = data; } } @@ -94,17 +110,17 @@ export default class Sample extends React.Component { toggleFormatters(checked: boolean) { if (this.gridRef.current) { this.gridRef.current.updateColumns( - ['price', 'total'].map((key) => ({ - key, + ['price', 'total'].map((field) => ({ + field, cellTemplate: checked ? this.format : undefined, })) ); } } - toggleColumnProperty(columnKey: string, property: string, value: boolean) { + toggleColumnProperty(columnField: string, property: string, value: boolean) { if (this.gridRef.current) { - this.gridRef.current.updateColumns({ key: columnKey, [property]: value }); + this.gridRef.current.updateColumns({ field: columnField, [property]: value }); } } @@ -124,31 +140,31 @@ export default class Sample extends React.Component { Column Properties {this.columns.map((column: any) => ( - +
- {column.headerText} + {column.header} this.toggleColumnProperty(column.key, 'hidden', !e.target.checked)}> + onChange={(e: any) => this.toggleColumnProperty(column.field, 'hidden', !e.target.checked)}> Hidden this.toggleColumnProperty(column.key, 'resizable', e.target.checked)}> + onChange={(e: any) => this.toggleColumnProperty(column.field, 'resizable', e.target.checked)}> Resizable this.toggleColumnProperty(column.key, 'filter', e.target.checked)}> + checked={column.filterable === true} + onChange={(e: any) => this.toggleColumnProperty(column.field, 'filterable', e.target.checked)}> Filter this.toggleColumnProperty(column.key, 'sort', e.target.checked)}> + checked={column.sortable === true} + onChange={(e: any) => this.toggleColumnProperty(column.field, 'sortable', e.target.checked)}> Sort
@@ -167,7 +183,17 @@ export default class Sample extends React.Component {
- + + {this.columns.map((column: any) => ( + + ))} +
); diff --git a/samples/grids/grid-lite/column-config-headers/package.json b/samples/grids/grid-lite/column-config-headers/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/column-config-headers/package.json +++ b/samples/grids/grid-lite/column-config-headers/package.json @@ -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", diff --git a/samples/grids/grid-lite/column-config-headers/src/index.tsx b/samples/grids/grid-lite/column-config-headers/src/index.tsx index 76cd0ff186..d05b775258 100644 --- a/samples/grids/grid-lite/column-config-headers/src/index.tsx +++ b/samples/grids/grid-lite/column-config-headers/src/index.tsx @@ -23,34 +23,6 @@ export default class Sample extends React.Component { componentDidMount() { if (this.gridRef.current) { const data: User[] = this.dataService.generateUsers(50); - - const columns = [ - { - key: 'id', - headerText: '🆔 ID', - width: '150px' - }, - { - key: 'firstName', - headerText: '👤 First Name' - }, - { - key: 'lastName', - headerText: '👤 Last Name' - }, - { - key: 'age', - headerText: '🎂 Age', - type: 'number', - width: '100px' - }, - { - key: 'email', - headerText: '📧 Email' - } - ]; - - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -59,7 +31,13 @@ export default class Sample extends React.Component { return (
- + + + + + + +
); diff --git a/samples/grids/grid-lite/data-binding/package.json b/samples/grids/grid-lite/data-binding/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/data-binding/package.json +++ b/samples/grids/grid-lite/data-binding/package.json @@ -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", diff --git a/samples/grids/grid-lite/filtering-config-events/package.json b/samples/grids/grid-lite/filtering-config-events/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/filtering-config-events/package.json +++ b/samples/grids/grid-lite/filtering-config-events/package.json @@ -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", 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 a3ab2f553d..e9d892dc05 100644 --- a/samples/grids/grid-lite/filtering-config-events/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-events/src/index.tsx @@ -32,15 +32,6 @@ export default class Sample extends React.Component { componentDidMount() { if (this.gridRef.current) { const data: User[] = this.dataService.generateUsers(50); - - const columns = [ - { key: 'firstName', headerText: 'First name', filter: true }, - { key: 'lastName', headerText: 'Last name', filter: true }, - { key: 'age', headerText: 'Age', filter: true, type: 'number' }, - { key: 'email', headerText: 'Email', filter: true } - ]; - - this.gridRef.current.columns = columns; this.gridRef.current.data = data; // Listen to filter events @@ -77,7 +68,12 @@ export default class Sample extends React.Component { return (
- + + + + + +
diff --git a/samples/grids/grid-lite/filtering-config-remote/package.json b/samples/grids/grid-lite/filtering-config-remote/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/filtering-config-remote/package.json +++ b/samples/grids/grid-lite/filtering-config-remote/package.json @@ -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", diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx index 4f7147bd0a..5a74c46be6 100644 --- a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx @@ -38,13 +38,6 @@ export default class Sample extends React.Component { componentDidMount() { if (this.gridRef.current) { - const columns = [ - { key: 'firstName', headerText: 'First name', filter: true }, - { key: 'lastName', headerText: 'Last name', filter: true }, - { key: 'age', headerText: 'Age', filter: true, type: 'number' }, - { key: 'email', headerText: 'Email' } - ]; - const config = { filter: async ({ data, grid }: any) => { this.buildUri(grid.filterExpressions); @@ -53,7 +46,6 @@ export default class Sample extends React.Component { }, }; - this.gridRef.current.columns = columns; this.gridRef.current.data = this.allData; this.gridRef.current.dataPipelineConfiguration = config; } @@ -88,7 +80,12 @@ export default class Sample extends React.Component {
- + + + + + +
); diff --git a/samples/grids/grid-lite/filtering-config/package.json b/samples/grids/grid-lite/filtering-config/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/filtering-config/package.json +++ b/samples/grids/grid-lite/filtering-config/package.json @@ -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", diff --git a/samples/grids/grid-lite/filtering-config/src/index.tsx b/samples/grids/grid-lite/filtering-config/src/index.tsx index d4ad26d143..f11e518fed 100644 --- a/samples/grids/grid-lite/filtering-config/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config/src/index.tsx @@ -30,39 +30,18 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: User[] = this.dataService.generateUsers(50); - const columns = [ - { - key: 'firstName', - headerText: 'First name', - filter: true - }, - { - key: 'lastName', - headerText: 'Last name', - filter: true - }, - { - key: 'age', - headerText: 'Age', - filter: true, - type: 'number' - }, - { - key: 'active', - headerText: 'Active', - type: 'boolean', - filter: true, - cellTemplate: (params: any) => { - const checkbox = document.createElement('igc-checkbox'); - if (params.value) { - checkbox.setAttribute('checked', ''); - } - return checkbox; + // Set cellTemplate for active column + const activeCol = this.gridRef.current.columns.find((c: any) => c.field === 'active'); + if (activeCol) { + activeCol.cellTemplate = (params: any) => { + const checkbox = document.createElement('igc-checkbox'); + if (params.value) { + checkbox.setAttribute('checked', ''); } - } - ]; + return checkbox; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -71,7 +50,12 @@ export default class Sample extends React.Component { return (
- + + + + + +
); diff --git a/samples/grids/grid-lite/overview/package.json b/samples/grids/grid-lite/overview/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/overview/package.json +++ b/samples/grids/grid-lite/overview/package.json @@ -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", diff --git a/samples/grids/grid-lite/overview/src/index.tsx b/samples/grids/grid-lite/overview/src/index.tsx index 5e3a342f4e..db95440f88 100644 --- a/samples/grids/grid-lite/overview/src/index.tsx +++ b/samples/grids/grid-lite/overview/src/index.tsx @@ -39,98 +39,70 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: User[] = this.dataService.generateUsers(1000); - const columns = [ - { - key: 'avatar', - headerText: 'Avatar', - cellTemplate: (params: any) => { - const cell = document.createElement('igc-avatar'); - cell.setAttribute('shape', 'circle'); - cell.setAttribute('alt', 'User avatar'); - cell.setAttribute('src', params.value); - return cell; - } - }, - { - key: 'firstName', - headerText: 'First name', - sort: true, - filter: true, - resizable: true - }, - { - key: 'lastName', - headerText: 'Last name', - sort: true, - filter: true, - resizable: true - }, - { - key: 'email', - headerText: 'Email Address' - }, - { - key: 'priority', - headerText: 'Priority', - width: '12rem', - sort: { - comparer: (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b), - caseSensitive: true - }, - cellTemplate: (params: any) => { - const select = document.createElement('igc-select'); - select.setAttribute('outlined', ''); - select.setAttribute('flip', ''); - select.setAttribute('value', params.value); - - this.choices.forEach(choice => { - const item = document.createElement('igc-select-item'); - item.setAttribute('value', choice); - item.textContent = choice; - select.appendChild(item); - }); - - return select; - } - }, - { - key: 'satisfaction', - headerText: 'Satisfaction rating', - type: 'number', - sort: true, - filter: true, - cellTemplate: (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('value', params.value.toString()); - return rating; - } - }, - { - key: 'registeredAt', - headerText: 'Registered @', - sort: true, - cellTemplate: (params: any) => { - const span = document.createElement('span'); - span.textContent = params.value.toLocaleString(); - return span; - } - }, - { - key: 'active', - type: 'boolean', - headerText: 'Active', - cellTemplate: (params: any) => { - const checkbox = document.createElement('igc-checkbox'); - if (params.value) { - checkbox.setAttribute('checked', ''); - } - return checkbox; + // Set cellTemplate for columns with custom rendering + const avatarCol = this.gridRef.current.columns.find((c: any) => c.field === 'avatar'); + if (avatarCol) { + avatarCol.cellTemplate = (params: any) => { + const cell = document.createElement('igc-avatar'); + cell.setAttribute('shape', 'circle'); + cell.setAttribute('alt', 'User avatar'); + cell.setAttribute('src', params.value); + return cell; + }; + } + + const priorityCol = this.gridRef.current.columns.find((c: any) => c.field === 'priority'); + if (priorityCol) { + priorityCol.sortConfiguration = { + comparer: (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b) + }; + priorityCol.cellTemplate = (params: any) => { + const select = document.createElement('igc-select'); + select.setAttribute('outlined', ''); + select.setAttribute('flip', ''); + select.setAttribute('value', params.value); + + this.choices.forEach(choice => { + const item = document.createElement('igc-select-item'); + item.setAttribute('value', choice); + item.textContent = choice; + select.appendChild(item); + }); + + return select; + }; + } + + const satisfactionCol = this.gridRef.current.columns.find((c: any) => c.field === 'satisfaction'); + if (satisfactionCol) { + satisfactionCol.cellTemplate = (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; + }; + } + + const registeredAtCol = this.gridRef.current.columns.find((c: any) => c.field === 'registeredAt'); + if (registeredAtCol) { + registeredAtCol.cellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = params.value.toLocaleString(); + return span; + }; + } + + const activeCol = this.gridRef.current.columns.find((c: any) => c.field === 'active'); + if (activeCol) { + activeCol.cellTemplate = (params: any) => { + const checkbox = document.createElement('igc-checkbox'); + if (params.value) { + checkbox.setAttribute('checked', ''); } - } - ]; + return checkbox; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -139,7 +111,16 @@ export default class Sample extends React.Component { return (
- + + + + + + + + + +
); diff --git a/samples/grids/grid-lite/sort-config-events/package.json b/samples/grids/grid-lite/sort-config-events/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/sort-config-events/package.json +++ b/samples/grids/grid-lite/sort-config-events/package.json @@ -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", 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 c7f5c06483..6acbd173b4 100644 --- a/samples/grids/grid-lite/sort-config-events/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-events/src/index.tsx @@ -39,46 +39,18 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: ProductInfo[] = this.dataService.generateProducts(100); - const columns = [ - { - key: 'name', - headerText: 'Name', - sort: true - }, - { - key: 'price', - type: 'number', - headerText: 'Price', - sort: true - }, - { - key: 'rating', - type: 'number', - headerText: 'Rating', - sort: true, - 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; - } - }, - { - key: 'sold', - type: 'number', - headerText: 'Sold', - sort: true - }, - { - key: 'total', - type: 'number', - headerText: 'Total', - sort: true - } - ]; + // Set cellTemplate for rating column + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + if (ratingCol) { + ratingCol.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; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; // Listen to sorting events @@ -133,7 +105,13 @@ export default class Sample extends React.Component { return (
- + + + + + + +
diff --git a/samples/grids/grid-lite/sort-config-grid/package.json b/samples/grids/grid-lite/sort-config-grid/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/sort-config-grid/package.json +++ b/samples/grids/grid-lite/sort-config-grid/package.json @@ -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", 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 16663efe6a..6026a842dd 100644 --- a/samples/grids/grid-lite/sort-config-grid/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-grid/src/index.tsx @@ -19,9 +19,8 @@ defineComponents(IgcRatingComponent); export default class Sample extends React.Component { private dataService: GridLiteDataService; private gridRef: React.RefObject; - private sortConfiguration: any = { - multiple: true, - triState: true + private sortingOptions: any = { + mode: 'multiple' }; constructor(props: any) { @@ -35,55 +34,29 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: ProductInfo[] = this.dataService.generateProducts(100); - const columns = [ - { - key: 'name', - headerText: 'Name', - sort: true - }, - { - key: 'price', - type: 'number', - headerText: 'Price', - sort: true - }, - { - key: 'rating', - type: 'number', - headerText: 'Rating', - sort: true, - 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; - } - }, - { - key: 'sold', - type: 'number', - headerText: 'Sold', - sort: true - }, - { - key: 'total', - type: 'number', - headerText: 'Total', - sort: true - } - ]; + // Set cellTemplate for rating column + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + if (ratingCol) { + ratingCol.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; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; - this.gridRef.current.sortConfiguration = this.sortConfiguration; + this.gridRef.current.sortingOptions = this.sortingOptions; } } private updateConfig(prop: string, checked: boolean) { - this.sortConfiguration = { ...this.sortConfiguration, [prop]: checked }; + if (prop === 'multiple') { + this.sortingOptions = { ...this.sortingOptions, mode: checked ? 'multiple' : 'single' }; + } if (this.gridRef.current) { - this.gridRef.current.sortConfiguration = this.sortConfiguration; + this.gridRef.current.sortingOptions = this.sortingOptions; } } @@ -94,12 +67,15 @@ export default class Sample extends React.Component { this.updateConfig('multiple', e.target.checked)}> Multiple Sort - this.updateConfig('triState', e.target.checked)}> - Tri-State -
- + + + + + + +
); diff --git a/samples/grids/grid-lite/sort-config-pipeline/package.json b/samples/grids/grid-lite/sort-config-pipeline/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/package.json +++ b/samples/grids/grid-lite/sort-config-pipeline/package.json @@ -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", 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 10bd2a83e4..46e878d17a 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx @@ -33,52 +33,25 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: ProductInfo[] = this.dataService.generateProducts(100); - const columns = [ - { - key: 'name', - headerText: 'Name', - sort: true - }, - { - key: 'price', - type: 'number', - headerText: 'Price', - sort: true - }, - { - key: 'rating', - type: 'number', - headerText: 'Rating', - sort: true, - 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; - } - }, - { - key: 'sold', - type: 'number', - headerText: 'Sold', - sort: true - }, - { - key: 'total', - type: 'number', - headerText: 'Total', - sort: true - } - ]; + // Set cellTemplate for rating column + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + if (ratingCol) { + ratingCol.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 dataPipelineConfiguration = { sort: async ({ data, grid }: any) => { if (this.progressRef.current) { this.progressRef.current.classList.add('in-operation'); } - const queryString = grid.sortExpressions.length - ? this.buildUri(grid.sortExpressions) + const queryString = grid.sortingExpressions.length + ? this.buildUri(grid.sortingExpressions) : ''; this.setState({ queryString }); @@ -90,7 +63,6 @@ export default class Sample extends React.Component { } }; - this.gridRef.current.columns = columns; this.gridRef.current.data = data; this.gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration; } @@ -120,7 +92,13 @@ export default class Sample extends React.Component {
- + + + + + + +
); diff --git a/samples/grids/grid-lite/sort-config-sample/package.json b/samples/grids/grid-lite/sort-config-sample/package.json index bcef229119..d158eead5f 100644 --- a/samples/grids/grid-lite/sort-config-sample/package.json +++ b/samples/grids/grid-lite/sort-config-sample/package.json @@ -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", 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 c2953a7665..830bd21bb1 100644 --- a/samples/grids/grid-lite/sort-config-sample/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-sample/src/index.tsx @@ -24,32 +24,6 @@ export default class Sample extends React.Component { componentDidMount() { if (this.gridRef.current) { const data: User[] = this.dataService.generateUsers(50); - - const columns = [ - { - key: 'firstName', - headerText: 'First name', - sort: true - }, - { - key: 'lastName', - headerText: 'Last name', - sort: true - }, - { - key: 'age', - headerText: 'Age', - sort: true, - type: 'number' - }, - { - key: 'email', - headerText: 'Email', - sort: true - } - ]; - - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -58,7 +32,12 @@ export default class Sample extends React.Component { return (
- + + + + + +
); diff --git a/samples/grids/grid-lite/styling-custom-theme/package.json b/samples/grids/grid-lite/styling-custom-theme/package.json index 8c431949c5..2d0cfb484f 100644 --- a/samples/grids/grid-lite/styling-custom-theme/package.json +++ b/samples/grids/grid-lite/styling-custom-theme/package.json @@ -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-theming": "^24.0.2", "igniteui-webcomponents": "^6.3.0", diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx index e947abd237..6afafb6614 100644 --- a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx +++ b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx @@ -30,50 +30,17 @@ export default class Sample extends React.Component { if (this.gridRef.current) { const data: ProductInfo[] = this.dataService.generateProducts(50); - const columns = [ - { - key: 'name', - headerText: 'Product', - sort: true, - filter: true - }, - { - key: 'price', - headerText: 'Price', - sort: true, - filter: true, - type: 'number' - }, - { - key: 'sold', - headerText: 'Sold', - sort: true, - filter: true, - type: 'number' - }, - { - key: 'total', - headerText: 'Total', - sort: true, - filter: true, - type: 'number' - }, - { - key: 'rating', - headerText: 'Rating', - type: 'number', - sort: true, - filter: true, - cellTemplate: (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('value', params.value.toString()); - return rating; - } - } - ]; + // Set cellTemplate for rating column + const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); + if (ratingCol) { + ratingCol.cellTemplate = (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; + }; + } - this.gridRef.current.columns = columns; this.gridRef.current.data = data; } } @@ -82,7 +49,13 @@ export default class Sample extends React.Component { return (
- + + + + + + +
); From 7b0e4084c3a13a6af2d3c574e8c23aa37c947316 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Feb 2026 10:20:31 +0000 Subject: [PATCH 3/8] Add explicit initial state for dynamic column properties Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com> --- .../column-config-dynamic/src/index.tsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx index bc0c8c952b..757ade924b 100644 --- a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx @@ -37,27 +37,42 @@ export default class Sample extends React.Component { { field: 'id', hidden: true, - header: 'ID' + header: 'ID', + resizable: true, + sortable: false, + filterable: false }, { field: 'name', - header: 'Product Name' + header: 'Product Name', + resizable: true, + sortable: false, + filterable: false }, { field: 'price', header: 'Price', dataType: 'number', - cellTemplate: this.format + cellTemplate: this.format, + resizable: true, + sortable: false, + filterable: false }, { field: 'sold', dataType: 'number', - header: 'Units sold' + header: 'Units sold', + resizable: true, + sortable: false, + filterable: false }, { field: 'total', header: 'Total sold', - cellTemplate: this.format + cellTemplate: this.format, + resizable: true, + sortable: false, + filterable: false }, { field: 'rating', @@ -69,7 +84,10 @@ export default class Sample extends React.Component { rating.setAttribute('step', '0.01'); rating.setAttribute('value', params.value.toString()); return rating; - } + }, + resizable: true, + sortable: false, + filterable: false } ]; From 5dfbd913eeed9cc8b6da4f0c458e54b482ae8614 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 14:03:14 +0000 Subject: [PATCH 4/8] Refactor Grid Lite samples from class-based to function-based components Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com> --- .../column-config-basic/src/index.tsx | 102 ++--- .../column-config-dynamic/src/index.tsx | 363 +++++++++--------- .../column-config-headers/src/index.tsx | 48 +-- .../grid-lite/data-binding/src/index.tsx | 62 ++- .../filtering-config-events/src/index.tsx | 115 +++--- .../filtering-config-remote/src/index.tsx | 107 +++--- .../grid-lite/filtering-config/src/index.tsx | 66 ++-- .../grids/grid-lite/overview/src/index.tsx | 163 ++++---- .../sort-config-events/src/index.tsx | 153 ++++---- .../grid-lite/sort-config-grid/src/index.tsx | 96 ++--- .../sort-config-pipeline/src/index.tsx | 139 +++---- .../sort-config-sample/src/index.tsx | 50 +-- .../styling-custom-theme/src/index.tsx | 72 ++-- 13 files changed, 701 insertions(+), 835 deletions(-) diff --git a/samples/grids/grid-lite/column-config-basic/src/index.tsx b/samples/grids/grid-lite/column-config-basic/src/index.tsx index 74017ea3f9..3abd15eb7b 100644 --- a/samples/grids/grid-lite/column-config-basic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-basic/src/index.tsx @@ -16,74 +16,56 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcRatingComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private formatter: Intl.NumberFormat; - private gridRef: React.RefObject; +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 priceCellTemplate = (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); - - // Set cellTemplate for columns with custom rendering - const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price'); - if (priceCol) { - priceCol.cellTemplate = (params: any) => { - const span = document.createElement('span'); - span.textContent = this.formatter.format(params.value); - return span; - }; - } +const totalCellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = formatter.format(params.value); + return span; +}; - const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total'); - if (totalCol) { - totalCol.cellTemplate = (params: any) => { - const span = document.createElement('span'); - span.textContent = this.formatter.format(params.value); - return span; - }; - } +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 ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - if (ratingCol) { - ratingCol.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; - }; - } +export default function Sample() { + const gridRef = React.useRef(null); - this.gridRef.current.data = data; + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: ProductInfo[] = dataService.generateProducts(50); + gridRef.current.data = data; } - } + }, []); - public render(): JSX.Element { - return ( -
-
- - - - - - - -
+ return ( +
+
+ + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx index 757ade924b..087f55431f 100644 --- a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx @@ -23,199 +23,194 @@ const formatter = new Intl.NumberFormat('en-EN', { currency: 'EUR', }); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private dropdownRef: React.RefObject; - protected hasFormatters = true; - protected format = (params: any) => { - const span = document.createElement('span'); - span.textContent = formatter.format(params.value); - return span; - }; - protected columns = [ - { - field: 'id', - hidden: true, - header: 'ID', - resizable: true, - sortable: false, - filterable: false - }, - { - field: 'name', - header: 'Product Name', - resizable: true, - sortable: false, - filterable: false - }, - { - field: 'price', - header: 'Price', - dataType: 'number', - cellTemplate: this.format, - resizable: true, - sortable: false, - filterable: false - }, - { - field: 'sold', - dataType: 'number', - header: 'Units sold', - resizable: true, - sortable: false, - filterable: false - }, - { - field: 'total', - header: 'Total sold', - cellTemplate: this.format, - resizable: true, - sortable: false, - filterable: false - }, - { - field: 'rating', - dataType: 'number', - header: '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; - }, - resizable: true, - sortable: false, - filterable: false - } - ]; - - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.dropdownRef = React.createRef(); - this.toggleFormatters = this.toggleFormatters.bind(this); - this.toggleColumnProperty = this.toggleColumnProperty.bind(this); +// Define cellTemplate functions outside component +const formatCellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = formatter.format(params.value); + return span; +}; + +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 initialColumns = [ + { + field: 'id', + hidden: true, + header: 'ID', + resizable: true, + sortable: false, + filterable: false, + cellTemplate: undefined + }, + { + field: 'name', + header: 'Product Name', + resizable: true, + sortable: false, + filterable: false, + cellTemplate: undefined + }, + { + field: 'price', + header: 'Price', + dataType: 'number', + cellTemplate: formatCellTemplate, + resizable: true, + sortable: false, + filterable: false + }, + { + field: 'sold', + dataType: 'number', + header: 'Units sold', + resizable: true, + sortable: false, + filterable: false, + cellTemplate: undefined + }, + { + field: 'total', + header: 'Total sold', + cellTemplate: formatCellTemplate, + resizable: true, + sortable: false, + filterable: false + }, + { + field: 'rating', + dataType: 'number', + header: 'Customer rating', + cellTemplate: ratingCellTemplate, + resizable: true, + sortable: false, + filterable: false } - - componentDidMount() { - if (this.gridRef.current) { - const data: ProductInfo[] = this.dataService.generateProducts(50); - - // Set cellTemplates programmatically for columns that need them - const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price'); - if (priceCol && this.columns.find(col => col.field === 'price')?.cellTemplate) { - priceCol.cellTemplate = this.format; - } - - const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total'); - if (totalCol && this.columns.find(col => col.field === 'total')?.cellTemplate) { - totalCol.cellTemplate = this.format; - } - - const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - const ratingColDef = this.columns.find(col => col.field === 'rating'); - if (ratingCol && ratingColDef?.cellTemplate) { - ratingCol.cellTemplate = ratingColDef.cellTemplate; - } - - this.gridRef.current.data = data; +]; + +export default function Sample() { + const gridRef = React.useRef(null); + const dropdownRef = React.useRef(null); + const [columns, setColumns] = React.useState(initialColumns); + const [hasFormatters, setHasFormatters] = React.useState(true); + + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: ProductInfo[] = dataService.generateProducts(50); + gridRef.current.data = data; } - } + }, []); - toggleFormatters(checked: boolean) { - if (this.gridRef.current) { - this.gridRef.current.updateColumns( + const toggleFormatters = React.useCallback((checked: boolean) => { + if (gridRef.current) { + gridRef.current.updateColumns( ['price', 'total'].map((field) => ({ field, - cellTemplate: checked ? this.format : undefined, + cellTemplate: checked ? formatCellTemplate : undefined, })) ); + setColumns(prevColumns => + prevColumns.map(col => + col.field === 'price' || col.field === 'total' + ? { ...col, cellTemplate: checked ? formatCellTemplate : undefined } + : col + ) + ); } - } - - toggleColumnProperty(columnField: string, property: string, value: boolean) { - if (this.gridRef.current) { - this.gridRef.current.updateColumns({ field: columnField, [property]: value }); + }, []); + + const toggleColumnProperty = React.useCallback((columnField: string, property: string, value: boolean) => { + if (gridRef.current) { + gridRef.current.updateColumns({ field: columnField, [property]: value }); + setColumns(prevColumns => + prevColumns.map(col => + col.field === columnField + ? { ...col, [property]: value } + : col + ) + ); } - } - - public render(): JSX.Element { - return ( -
-
- { - this.dropdownRef.current?.clearSelection(); - }} - id="column-select"> -
- Column Properties -
- {this.columns.map((column: any) => ( - -
- {column.header} - this.toggleColumnProperty(column.field, 'hidden', !e.target.checked)}> - Hidden - - this.toggleColumnProperty(column.field, 'resizable', e.target.checked)}> - Resizable - - this.toggleColumnProperty(column.field, 'filterable', e.target.checked)}> - Filter - - this.toggleColumnProperty(column.field, 'sortable', e.target.checked)}> - Sort - -
- - ))} - - { - this.hasFormatters = e.target.checked; - this.toggleFormatters(this.hasFormatters); - }}> - Value formatters: - -
-
- - {this.columns.map((column: any) => ( - - ))} - -
-
- ); - } + }, []); + + return ( +
+
+ { + dropdownRef.current?.clearSelection(); + }} + id="column-select"> +
+ Column Properties +
+ {columns.map((column: any) => ( + +
+ {column.header} + toggleColumnProperty(column.field, 'hidden', !e.target.checked)}> + Hidden + + toggleColumnProperty(column.field, 'resizable', e.target.checked)}> + Resizable + + toggleColumnProperty(column.field, 'filterable', e.target.checked)}> + Filter + + toggleColumnProperty(column.field, 'sortable', e.target.checked)}> + Sort + +
+ + ))} + + { + setHasFormatters(e.target.checked); + toggleFormatters(e.target.checked); + }}> + Value formatters: + +
+
+ + {columns.map((column: any) => ( + + ))} + +
+
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/column-config-headers/src/index.tsx b/samples/grids/grid-lite/column-config-headers/src/index.tsx index d05b775258..da335033be 100644 --- a/samples/grids/grid-lite/column-config-headers/src/index.tsx +++ b/samples/grids/grid-lite/column-config-headers/src/index.tsx @@ -10,38 +10,30 @@ import "./index.css"; // Register components IgcGridLite.register(); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; +export default function Sample() { + const gridRef = React.useRef(null); - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - } - - componentDidMount() { - if (this.gridRef.current) { - const data: User[] = this.dataService.generateUsers(50); - this.gridRef.current.data = data; + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: User[] = dataService.generateUsers(50); + gridRef.current.data = data; } - } + }, []); - public render(): JSX.Element { - return ( -
-
- - - - - - - -
+ return ( +
+
+ + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/data-binding/src/index.tsx b/samples/grids/grid-lite/data-binding/src/index.tsx index 9f2e6e052c..fad354d3ae 100644 --- a/samples/grids/grid-lite/data-binding/src/index.tsx +++ b/samples/grids/grid-lite/data-binding/src/index.tsx @@ -16,21 +16,14 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcButtonComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private showingProducts = true; +export default function Sample() { + const gridRef = React.useRef(null); + const [showingProducts, setShowingProducts] = React.useState(true); - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.switchData = this.switchData.bind(this); - } - - componentDidMount() { - if (this.gridRef.current) { - this.gridRef.current.data = this.dataService.generateProducts(50); + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + gridRef.current.data = dataService.generateProducts(50); window.addEventListener('error', (e) => { if (e.message === 'ResizeObserver loop completed with undelivered notifications.') { @@ -38,34 +31,33 @@ export default class Sample extends React.Component { } }); } - } + }, []); - private switchData() { - if (this.gridRef.current) { - this.gridRef.current.columns = []; + const switchData = React.useCallback(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + gridRef.current.columns = []; - if (this.showingProducts) { - this.gridRef.current.data = this.dataService.generateUsers(50); - this.showingProducts = false; + if (showingProducts) { + gridRef.current.data = dataService.generateUsers(50); + setShowingProducts(false); } else { - this.gridRef.current.data = this.dataService.generateProducts(50); - this.showingProducts = true; + gridRef.current.data = dataService.generateProducts(50); + setShowingProducts(true); } } - } + }, [showingProducts]); - public render(): JSX.Element { - return ( -
-
- -
-
- -
+ return ( +
+
+ +
+
+
- ); - } +
+ ); } // rendering above component in the React DOM 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 e9d892dc05..3829a8dc1b 100644 --- a/samples/grids/grid-lite/filtering-config-events/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-events/src/index.tsx @@ -11,74 +11,75 @@ import "./index.css"; // Register components IgcGridLite.register(); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private logRef: React.RefObject; - private log: string[] = []; +const getTime = () => `[${new Date().toLocaleTimeString()}]`; - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.logRef = React.createRef(); - this.state = { logContent: '' }; - } +export default function Sample() { + const gridRef = React.useRef(null); + const logRef = React.useRef(null); + const [log, setLog] = React.useState([]); - get time() { - return `[${new Date().toLocaleTimeString()}]`; - } + const updateLog = React.useCallback((message: string) => { + setLog(prevLog => { + const newLog = [...prevLog]; + if (newLog.length > 10) { + newLog.shift(); + } + newLog.push(message); + return newLog; + }); + }, []); - componentDidMount() { - if (this.gridRef.current) { - const data: User[] = this.dataService.generateUsers(50); - this.gridRef.current.data = data; + React.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 - this.gridRef.current.addEventListener('filtering', (e: any) => { + const handleFiltering = (e: any) => { const { expressions, type } = e.detail; - this.updateLog(`${this.time} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`); - }); - this.gridRef.current.addEventListener('filtered', (e: any) => { - this.updateLog(`${this.time} :: Event \`${e.type}\` for column '${e.detail.key}'`); - }); - } - } + updateLog(`${getTime()} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`); + }; - private updateLog(message: string) { - if (this.log.length > 10) { - this.log.shift(); + const handleFiltered = (e: any) => { + updateLog(`${getTime()} :: Event \`${e.type}\` for column '${e.detail.key}'`); + }; + + gridRef.current.addEventListener('filtering', handleFiltering); + gridRef.current.addEventListener('filtered', handleFiltered); + + return () => { + if (gridRef.current) { + gridRef.current.removeEventListener('filtering', handleFiltering); + gridRef.current.removeEventListener('filtered', handleFiltered); + } + }; } - this.log.push(message); - this.renderLog(); - } + }, [updateLog]); - private renderLog() { - const logContent = this.log - .map(entry => `

${entry}

`) - .join(''); - this.setState({ logContent }, () => { - if (this.logRef.current) { - this.logRef.current.scrollTop = this.logRef.current.scrollHeight; - } - }); - } + const logContent = log + .map(entry => `

${entry}

`) + .join(''); - public render(): JSX.Element { - return ( -
-
- - - - - - -
-
+ return ( +
+
+ + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx index 5a74c46be6..663a31eb54 100644 --- a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx @@ -23,73 +23,64 @@ function groupBy(arr: T[], key: keyof T) { return out; } -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private allData: User[] = []; +const mapExpressions = (arr: any[]) => { + return arr + .map(({ searchTerm, criteria, condition }: any, idx: number) => { + const c = condition; + return idx < 1 + ? `${c.name}("${searchTerm}")` + : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`; + }) + .join(' '); +}; - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.allData = this.dataService.generateUsers(100); - this.state = { queryString: '' }; +const buildUri = (state: any[], setQueryString: (qs: string) => void) => { + const out: string[] = []; + const qs = groupBy(state, 'key'); + for (const [key, exprs] of Object.entries(qs)) { + out.push(`${key}(${mapExpressions(exprs)})`); } + setQueryString(`GET: /data?filter=${out.join('&')}`); +}; - componentDidMount() { - if (this.gridRef.current) { - const config = { - filter: async ({ data, grid }: any) => { - this.buildUri(grid.filterExpressions); - await new Promise((resolve) => setTimeout(resolve, 250)); - return data; - }, - }; +export default function Sample() { + const gridRef = React.useRef(null); + const [queryString, setQueryString] = React.useState(''); - this.gridRef.current.data = this.allData; - this.gridRef.current.dataPipelineConfiguration = config; - } - } - - protected mapExpressions(arr: any[]) { - return arr - .map(({ searchTerm, criteria, condition }: any, idx: number) => { - const c = condition; - return idx < 1 - ? `${c.name}("${searchTerm}")` - : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`; - }) - .join(' '); - } + const dataPipelineConfiguration = React.useMemo(() => ({ + filter: async ({ data, grid }: any) => { + buildUri(grid.filterExpressions, setQueryString); + await new Promise((resolve) => setTimeout(resolve, 250)); + return data; + }, + }), []); - protected buildUri(state: any[]) { - const out: string[] = []; - const qs = groupBy(state, 'key'); - for (const [key, exprs] of Object.entries(qs)) { - out.push(`${key}(${this.mapExpressions(exprs)})`); + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const allData: User[] = dataService.generateUsers(100); + gridRef.current.data = allData; + gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration; } - this.setState({ queryString: `GET: /data?filter=${out.join('&')}` }); - } + }, [dataPipelineConfiguration]); - public render(): JSX.Element { - return ( -
-
-
-

{this.state.queryString}

-
-
-
- - - - - - + return ( +
+
+
+

{queryString}

- ); - } +
+ + + + + + +
+
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/filtering-config/src/index.tsx b/samples/grids/grid-lite/filtering-config/src/index.tsx index f11e518fed..c4a8c77c0c 100644 --- a/samples/grids/grid-lite/filtering-config/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config/src/index.tsx @@ -16,50 +16,38 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcCheckboxComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); +// Define cellTemplate function outside component +const activeCellTemplate = (params: any) => { + const checkbox = document.createElement('igc-checkbox'); + if (params.value) { + checkbox.setAttribute('checked', ''); } + return checkbox; +}; - componentDidMount() { - if (this.gridRef.current) { - const data: User[] = this.dataService.generateUsers(50); - - // Set cellTemplate for active column - const activeCol = this.gridRef.current.columns.find((c: any) => c.field === 'active'); - if (activeCol) { - activeCol.cellTemplate = (params: any) => { - const checkbox = document.createElement('igc-checkbox'); - if (params.value) { - checkbox.setAttribute('checked', ''); - } - return checkbox; - }; - } +export default function Sample() { + const gridRef = React.useRef(null); - this.gridRef.current.data = data; + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: User[] = dataService.generateUsers(50); + gridRef.current.data = data; } - } - - public render(): JSX.Element { - return ( -
-
- - - - - - -
+ }, []); + + return ( +
+
+ + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/overview/src/index.tsx b/samples/grids/grid-lite/overview/src/index.tsx index db95440f88..d48f5934fd 100644 --- a/samples/grids/grid-lite/overview/src/index.tsx +++ b/samples/grids/grid-lite/overview/src/index.tsx @@ -24,107 +24,90 @@ defineComponents( IgcSelectComponent ); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private choices = ['Low', 'Standard', 'High']; - private gridRef: React.RefObject; +const choices = ['Low', 'Standard', 'High']; - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - } +// Define cellTemplate functions outside component +const avatarCellTemplate = (params: any) => { + const cell = document.createElement('igc-avatar'); + cell.setAttribute('shape', 'circle'); + cell.setAttribute('alt', 'User avatar'); + cell.setAttribute('src', params.value); + return cell; +}; - componentDidMount() { - if (this.gridRef.current) { - const data: User[] = this.dataService.generateUsers(1000); - - // Set cellTemplate for columns with custom rendering - const avatarCol = this.gridRef.current.columns.find((c: any) => c.field === 'avatar'); - if (avatarCol) { - avatarCol.cellTemplate = (params: any) => { - const cell = document.createElement('igc-avatar'); - cell.setAttribute('shape', 'circle'); - cell.setAttribute('alt', 'User avatar'); - cell.setAttribute('src', params.value); - return cell; - }; - } +const priorityCellTemplate = (params: any) => { + const select = document.createElement('igc-select'); + select.setAttribute('outlined', ''); + select.setAttribute('flip', ''); + select.setAttribute('value', params.value); + + choices.forEach(choice => { + const item = document.createElement('igc-select-item'); + item.setAttribute('value', choice); + item.textContent = choice; + select.appendChild(item); + }); + + return select; +}; - const priorityCol = this.gridRef.current.columns.find((c: any) => c.field === 'priority'); - if (priorityCol) { - priorityCol.sortConfiguration = { - comparer: (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b) - }; - priorityCol.cellTemplate = (params: any) => { - const select = document.createElement('igc-select'); - select.setAttribute('outlined', ''); - select.setAttribute('flip', ''); - select.setAttribute('value', params.value); - - this.choices.forEach(choice => { - const item = document.createElement('igc-select-item'); - item.setAttribute('value', choice); - item.textContent = choice; - select.appendChild(item); - }); - - return select; - }; - } +const satisfactionCellTemplate = (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; +}; - const satisfactionCol = this.gridRef.current.columns.find((c: any) => c.field === 'satisfaction'); - if (satisfactionCol) { - satisfactionCol.cellTemplate = (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('value', params.value.toString()); - return rating; - }; - } +const registeredAtCellTemplate = (params: any) => { + const span = document.createElement('span'); + span.textContent = params.value.toLocaleString(); + return span; +}; - const registeredAtCol = this.gridRef.current.columns.find((c: any) => c.field === 'registeredAt'); - if (registeredAtCol) { - registeredAtCol.cellTemplate = (params: any) => { - const span = document.createElement('span'); - span.textContent = params.value.toLocaleString(); - return span; - }; - } +const activeCellTemplate = (params: any) => { + const checkbox = document.createElement('igc-checkbox'); + if (params.value) { + checkbox.setAttribute('checked', ''); + } + return checkbox; +}; - const activeCol = this.gridRef.current.columns.find((c: any) => c.field === 'active'); - if (activeCol) { - activeCol.cellTemplate = (params: any) => { - const checkbox = document.createElement('igc-checkbox'); - if (params.value) { - checkbox.setAttribute('checked', ''); - } - return checkbox; +export default function Sample() { + const gridRef = React.useRef(null); + + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: User[] = dataService.generateUsers(1000); + + // Set custom sortConfiguration for priority column (can't be passed as prop) + const priorityCol = gridRef.current.columns.find((c: any) => c.field === 'priority'); + if (priorityCol) { + priorityCol.sortConfiguration = { + comparer: (a: string, b: string) => choices.indexOf(a) - choices.indexOf(b) }; } - - this.gridRef.current.data = data; + + gridRef.current.data = data; } - } + }, []); - public render(): JSX.Element { - return ( -
-
- - - - - - - - - - -
+ return ( +
+
+ + + + + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM 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 6acbd173b4..0de195ae7a 100644 --- a/samples/grids/grid-lite/sort-config-events/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-events/src/index.tsx @@ -15,108 +15,99 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcRatingComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private logRef: React.RefObject; - private log: string[] = []; +const getTimeStamp = (): string => `[${new Date().toLocaleTimeString()}]`; - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.logRef = React.createRef(); - this.state = { logContent: '' }; - this.handleSorting = this.handleSorting.bind(this); - this.handleSorted = this.handleSorted.bind(this); - } +// 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; +}; - get timeStamp(): string { - return `[${new Date().toLocaleTimeString()}]`; - } +export default function Sample() { + const gridRef = React.useRef(null); + const logRef = React.useRef(null); + const [log, setLog] = React.useState([]); - componentDidMount() { - if (this.gridRef.current) { - const data: ProductInfo[] = this.dataService.generateProducts(100); - - // Set cellTemplate for rating column - const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - if (ratingCol) { - ratingCol.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 updateLog = React.useCallback((message: string) => { + setLog(prevLog => { + const newLog = [...prevLog]; + if (newLog.length > 10) { + newLog.shift(); } + newLog.push(message); + return newLog; + }); + }, []); - this.gridRef.current.data = data; - - // Listen to sorting events - this.gridRef.current.addEventListener('sorting', this.handleSorting); - this.gridRef.current.addEventListener('sorted', this.handleSorted); - } - } - - private updateLog(message: string) { - if (this.log.length > 10) { - this.log.shift(); + React.useEffect(() => { + if (logRef.current) { + logRef.current.scrollTop = logRef.current.scrollHeight; } - this.log.push(message); - this.renderLog(); - } - - private renderLog() { - const logContent = this.log - .map(entry => `

${entry}

`) - .join(''); - this.setState({ logContent }, () => { - if (this.logRef.current) { - this.logRef.current.scrollTop = this.logRef.current.scrollHeight; - } - }); - } + }, [log]); - private handleSorting(event: any) { + const handleSorting = React.useCallback((event: any) => { const { detail, type } = event; const allowedColumns = ['price', 'total', 'sold']; if (!allowedColumns.includes(detail.key)) { event.preventDefault(); - this.updateLog( - `${this.timeStamp} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'` + updateLog( + `${getTimeStamp()} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'` ); } else { - this.updateLog( - `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}` + updateLog( + `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}` ); } - } + }, [updateLog]); - private handleSorted(event: any) { + const handleSorted = React.useCallback((event: any) => { const { detail, type } = event; - this.updateLog( - `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}` + updateLog( + `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}` ); - } + }, [updateLog]); - public render(): JSX.Element { - return ( -
-
- - - - - - - -
-
+ 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(''); + + return ( +
+
+ + + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM 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 6026a842dd..a125cfcc24 100644 --- a/samples/grids/grid-lite/sort-config-grid/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-grid/src/index.tsx @@ -16,70 +16,54 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcRatingComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private sortingOptions: any = { - mode: 'multiple' - }; - - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.updateConfig = this.updateConfig.bind(this); - } +// 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; +}; - componentDidMount() { - if (this.gridRef.current) { - const data: ProductInfo[] = this.dataService.generateProducts(100); - - // Set cellTemplate for rating column - const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - if (ratingCol) { - ratingCol.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; - }; - } +export default function Sample() { + const gridRef = React.useRef(null); + const [sortingOptions, setSortingOptions] = React.useState({ + mode: 'multiple' + }); - this.gridRef.current.data = data; - this.gridRef.current.sortingOptions = this.sortingOptions; + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: ProductInfo[] = dataService.generateProducts(100); + gridRef.current.data = data; + gridRef.current.sortingOptions = sortingOptions; } - } + }, [sortingOptions]); - private updateConfig(prop: string, checked: boolean) { + const updateConfig = React.useCallback((prop: string, checked: boolean) => { if (prop === 'multiple') { - this.sortingOptions = { ...this.sortingOptions, mode: checked ? 'multiple' : 'single' }; + setSortingOptions({ mode: checked ? 'multiple' : 'single' }); } - if (this.gridRef.current) { - this.gridRef.current.sortingOptions = this.sortingOptions; - } - } + }, []); - public render(): JSX.Element { - return ( -
-
- this.updateConfig('multiple', e.target.checked)}> - Multiple Sort - -
-
- - - - - - - -
+ return ( +
+
+ updateConfig('multiple', e.target.checked)}> + Multiple Sort + +
+
+ + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM 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 46e878d17a..e81ec57dc7 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx @@ -16,93 +16,80 @@ import "./index.css"; IgcGridLite.register(); defineComponents(IgcRatingComponent, IgcCircularProgressComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - private progressRef: React.RefObject; +// 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; +}; - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - this.progressRef = React.createRef(); - this.state = { queryString: '' }; +const buildUri = (state: any[]): string => { + const uri: string[] = []; + for (const expr of state) { + if (expr.direction === 'none') { + continue; + } + uri.push( + expr.direction === 'ascending' + ? `asc(${expr.key})` + : `desc(${expr.key})` + ); } + return `GET: /data?sort_by=${uri.join(',')}`; +}; - componentDidMount() { - if (this.gridRef.current) { - const data: ProductInfo[] = this.dataService.generateProducts(100); +export default function Sample() { + const gridRef = React.useRef(null); + const progressRef = React.useRef(null); + const [queryString, setQueryString] = React.useState(''); + + const dataPipelineConfiguration = React.useMemo(() => ({ + sort: async ({ data, grid }: any) => { + if (progressRef.current) { + progressRef.current.classList.add('in-operation'); + } + const qs = grid.sortingExpressions.length + ? buildUri(grid.sortingExpressions) + : ''; + setQueryString(qs); - // Set cellTemplate for rating column - const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - if (ratingCol) { - ratingCol.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; - }; + await new Promise(resolve => setTimeout(resolve, 250)); + if (progressRef.current) { + progressRef.current.classList.remove('in-operation'); } - - const dataPipelineConfiguration = { - sort: async ({ data, grid }: any) => { - if (this.progressRef.current) { - this.progressRef.current.classList.add('in-operation'); - } - const queryString = grid.sortingExpressions.length - ? this.buildUri(grid.sortingExpressions) - : ''; - this.setState({ queryString }); - - await new Promise(resolve => setTimeout(resolve, 250)); - if (this.progressRef.current) { - this.progressRef.current.classList.remove('in-operation'); - } - return data; - } - }; - - this.gridRef.current.data = data; - this.gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration; + return data; } - } + }), []); - private buildUri(state: any[]): string { - const uri: string[] = []; - for (const expr of state) { - if (expr.direction === 'none') { - continue; - } - uri.push( - expr.direction === 'ascending' - ? `asc(${expr.key})` - : `desc(${expr.key})` - ); + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: ProductInfo[] = dataService.generateProducts(100); + gridRef.current.data = data; + gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration; } - return `GET: /data?sort_by=${uri.join(',')}`; - } + }, [dataPipelineConfiguration]); - public render(): JSX.Element { - return ( -
-
-
-

{this.state.queryString}

-
-
-
- - - - - - - + return ( +
+
+
+

{queryString}

- ); - } +
+ + + + + + + +
+
+ ); } // rendering above component in the React DOM 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 830bd21bb1..0b2faa3d6e 100644 --- a/samples/grids/grid-lite/sort-config-sample/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-sample/src/index.tsx @@ -11,37 +11,29 @@ import "./index.css"; // Register components IgcGridLite.register(); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - } - - componentDidMount() { - if (this.gridRef.current) { - const data: User[] = this.dataService.generateUsers(50); - this.gridRef.current.data = data; +export default function Sample() { + const gridRef = React.useRef(null); + + React.useEffect(() => { + if (gridRef.current) { + const dataService = new GridLiteDataService(); + const data: User[] = dataService.generateUsers(50); + gridRef.current.data = data; } - } - - public render(): JSX.Element { - return ( -
-
- - - - - - -
+ }, []); + + return ( +
+
+ + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx index 6afafb6614..8ce1fde75f 100644 --- a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx +++ b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx @@ -16,50 +16,38 @@ import "./index.scss"; IgcGridLite.register(); defineComponents(IgcRatingComponent); -export default class Sample extends React.Component { - private dataService: GridLiteDataService; - private gridRef: React.RefObject; - - constructor(props: any) { - super(props); - this.dataService = new GridLiteDataService(); - this.gridRef = React.createRef(); - } - - componentDidMount() { - if (this.gridRef.current) { - const data: ProductInfo[] = this.dataService.generateProducts(50); - - // Set cellTemplate for rating column - const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating'); - if (ratingCol) { - ratingCol.cellTemplate = (params: any) => { - const rating = document.createElement('igc-rating'); - rating.setAttribute('readonly', ''); - rating.setAttribute('value', params.value.toString()); - return rating; - }; - } - - this.gridRef.current.data = data; +// Define cellTemplate function outside component +const ratingCellTemplate = (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; +}; + +export default function Sample() { + const gridRef = React.useRef(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 ( -
-
- - - - - - - -
+ }, []); + + return ( +
+
+ + + + + + +
- ); - } +
+ ); } // rendering above component in the React DOM From 5358ef6354da0c53112f18ed9d119354dc68ddbb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 14:05:28 +0000 Subject: [PATCH 5/8] Address code review feedback - consolidate duplicate cellTemplates and fix useMemo dependencies Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com> --- .../grid-lite/column-config-basic/src/index.tsx | 12 +++--------- .../grid-lite/column-config-dynamic/src/index.tsx | 10 +++++----- .../grid-lite/filtering-config-remote/src/index.tsx | 2 +- .../grid-lite/sort-config-pipeline/src/index.tsx | 2 +- 4 files changed, 10 insertions(+), 16 deletions(-) diff --git a/samples/grids/grid-lite/column-config-basic/src/index.tsx b/samples/grids/grid-lite/column-config-basic/src/index.tsx index 3abd15eb7b..00118c27f8 100644 --- a/samples/grids/grid-lite/column-config-basic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-basic/src/index.tsx @@ -22,13 +22,7 @@ const formatter = new Intl.NumberFormat('en-EN', { }); // Define cellTemplate functions outside component -const priceCellTemplate = (params: any) => { - const span = document.createElement('span'); - span.textContent = formatter.format(params.value); - return span; -}; - -const totalCellTemplate = (params: any) => { +const currencyCellTemplate = (params: any) => { const span = document.createElement('span'); span.textContent = formatter.format(params.value); return span; @@ -58,9 +52,9 @@ export default function Sample() {
- + - +
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx index 087f55431f..f4b5a9acee 100644 --- a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx +++ b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx @@ -24,7 +24,7 @@ const formatter = new Intl.NumberFormat('en-EN', { }); // Define cellTemplate functions outside component -const formatCellTemplate = (params: any) => { +const currencyCellTemplate = (params: any) => { const span = document.createElement('span'); span.textContent = formatter.format(params.value); return span; @@ -60,7 +60,7 @@ const initialColumns = [ field: 'price', header: 'Price', dataType: 'number', - cellTemplate: formatCellTemplate, + cellTemplate: currencyCellTemplate, resizable: true, sortable: false, filterable: false @@ -77,7 +77,7 @@ const initialColumns = [ { field: 'total', header: 'Total sold', - cellTemplate: formatCellTemplate, + cellTemplate: currencyCellTemplate, resizable: true, sortable: false, filterable: false @@ -112,13 +112,13 @@ export default function Sample() { gridRef.current.updateColumns( ['price', 'total'].map((field) => ({ field, - cellTemplate: checked ? formatCellTemplate : undefined, + cellTemplate: checked ? currencyCellTemplate : undefined, })) ); setColumns(prevColumns => prevColumns.map(col => col.field === 'price' || col.field === 'total' - ? { ...col, cellTemplate: checked ? formatCellTemplate : undefined } + ? { ...col, cellTemplate: checked ? currencyCellTemplate : undefined } : col ) ); diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx index 663a31eb54..a89e02e8ca 100644 --- a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx @@ -53,7 +53,7 @@ export default function Sample() { await new Promise((resolve) => setTimeout(resolve, 250)); return data; }, - }), []); + }), [setQueryString]); React.useEffect(() => { if (gridRef.current) { 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..798e0c3b70 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx @@ -61,7 +61,7 @@ export default function Sample() { } return data; } - }), []); + }), [setQueryString]); React.useEffect(() => { if (gridRef.current) { From 46f2710165c15af0521760d982e6a9e32df6c3d1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Feb 2026 14:06:25 +0000 Subject: [PATCH 6/8] Remove setState from useMemo dependencies (stable by design) Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com> --- samples/grids/grid-lite/filtering-config-remote/src/index.tsx | 2 +- samples/grids/grid-lite/sort-config-pipeline/src/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx index a89e02e8ca..663a31eb54 100644 --- a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx +++ b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx @@ -53,7 +53,7 @@ export default function Sample() { await new Promise((resolve) => setTimeout(resolve, 250)); return data; }, - }), [setQueryString]); + }), []); React.useEffect(() => { if (gridRef.current) { 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 798e0c3b70..e81ec57dc7 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx +++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx @@ -61,7 +61,7 @@ export default function Sample() { } return data; } - }), [setQueryString]); + }), []); React.useEffect(() => { if (gridRef.current) { From 18352acc65caae9774666bc4d34dd16e743ef40f Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 12 Feb 2026 17:19:22 +0200 Subject: [PATCH 7/8] chore(grid-lite): update versions for samples browser --- browser/package-lock.json | 216 +++++++++++++++++++++++----------- browser/package.json | 2 +- browser/tasks/gulp-samples.js | 2 +- 3 files changed, 152 insertions(+), 68 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index e3b6b174f1..cc26e0a564 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -16,7 +16,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", @@ -1912,55 +1912,61 @@ ] }, "node_modules/@shikijs/core": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.15.0.tgz", - "integrity": "sha512-8TOG6yG557q+fMsSVa8nkEDOZNTSxjbbR8l6lF2gyr6Np+jrPlslqDxQkN6rMXCECQ3isNPZAGszAfYoJOPGlg==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.22.0.tgz", + "integrity": "sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==", + "license": "MIT", "dependencies": { - "@shikijs/types": "3.15.0", + "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "node_modules/@shikijs/engine-javascript": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.15.0.tgz", - "integrity": "sha512-ZedbOFpopibdLmvTz2sJPJgns8Xvyabe2QbmqMTz07kt1pTzfEvKZc5IqPVO/XFiEbbNyaOpjPBkkr1vlwS+qg==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.22.0.tgz", + "integrity": "sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==", + "license": "MIT", "dependencies": { - "@shikijs/types": "3.15.0", + "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", - "oniguruma-to-es": "^4.3.3" + "oniguruma-to-es": "^4.3.4" } }, "node_modules/@shikijs/engine-oniguruma": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.15.0.tgz", - "integrity": "sha512-HnqFsV11skAHvOArMZdLBZZApRSYS4LSztk2K3016Y9VCyZISnlYUYsL2hzlS7tPqKHvNqmI5JSUJZprXloMvA==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz", + "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==", + "license": "MIT", "dependencies": { - "@shikijs/types": "3.15.0", + "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "node_modules/@shikijs/langs": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.15.0.tgz", - "integrity": "sha512-WpRvEFvkVvO65uKYW4Rzxs+IG0gToyM8SARQMtGGsH4GDMNZrr60qdggXrFOsdfOVssG/QQGEl3FnJ3EZ+8w8A==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz", + "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==", + "license": "MIT", "dependencies": { - "@shikijs/types": "3.15.0" + "@shikijs/types": "3.22.0" } }, "node_modules/@shikijs/themes": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.15.0.tgz", - "integrity": "sha512-8ow2zWb1IDvCKjYb0KiLNrK4offFdkfNVPXb1OZykpLCzRU6j+efkY+Y7VQjNlNFXonSw+4AOdGYtmqykDbRiQ==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz", + "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==", + "license": "MIT", "dependencies": { - "@shikijs/types": "3.15.0" + "@shikijs/types": "3.22.0" } }, "node_modules/@shikijs/types": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.15.0.tgz", - "integrity": "sha512-BnP+y/EQnhihgHy4oIAN+6FFtmfTekwOLsQbRw9hOKwqgNy8Bdsjq8B05oAt/ZgvIWWFrshV71ytOrlPfYjIJw==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz", + "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==", + "license": "MIT", "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" @@ -1969,7 +1975,8 @@ "node_modules/@shikijs/vscode-textmate": { "version": "10.0.2", "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==", + "license": "MIT" }, "node_modules/@sinclair/typebox": { "version": "0.27.8", @@ -2226,6 +2233,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "license": "MIT", "dependencies": { "@types/unist": "*" } @@ -4202,6 +4210,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4253,6 +4262,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4262,6 +4272,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4501,6 +4512,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5039,6 +5051,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "license": "MIT", "dependencies": { "dequal": "^2.0.0" }, @@ -8217,6 +8230,7 @@ "version": "9.0.5", "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", + "license": "MIT", "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", @@ -8238,12 +8252,14 @@ "node_modules/hast-util-to-html/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" }, "node_modules/hast-util-whitespace": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", + "license": "MIT", "dependencies": { "@types/hast": "^3.0.0" }, @@ -8292,6 +8308,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -8357,14 +8374,14 @@ } }, "node_modules/igniteui-grid-lite": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.0.1.tgz", - "integrity": "sha512-QR+yu3lW8jtF5tfR+HChw+ksnTbMz8vIAEbPv0kJyNR0Dk2nCQSuw8z531psgl6ket2o1OoGDpkZJNgNNQ9T2g==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.4.0.tgz", + "integrity": "sha512-QZ12Q9C9FxrJIZIO0beOQMAZ2E9UADEqS0cjL2Qt2YP1DNge7+x+AzXCp8aOOzT5Y5E+O6O0u6u7JPdtc3RhxA==", "license": "MIT", "dependencies": { "@lit-labs/virtualizer": "~2.1.0", "@lit/context": "~1.1.5", - "igniteui-webcomponents": "~6.1.0", + "igniteui-webcomponents": "~6.5.0", "lit": "^3.3.0" }, "engines": { @@ -8372,18 +8389,57 @@ } }, "node_modules/igniteui-grid-lite/node_modules/igniteui-webcomponents": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.2.tgz", - "integrity": "sha512-q3a3Q28xzRwDBmfDprY0PsN9cs5xgqOJigXWWmbWAfcMgPg5dIrPyMDV6Aj6GD7u1RgPeoZmTP/pz9gTWNhHJA==", - "license": "SEE LICENSE IN LICENSE", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.5.1.tgz", + "integrity": "sha512-cs/oqxuF7QowgwZ2LMTDqcpmcRqB4VWKNqshhA1dUTinxq20YjQKS/q+ix8K8sHgfg+QFXxPaOZruMLeubnIzw==", + "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.7.0", "@lit-labs/virtualizer": "^2.1.0", "@lit/context": "^1.1.0", + "igniteui-i18n-core": "^1.0.1", "lit": "^3.3.0" }, "engines": { "node": ">=20" + }, + "peerDependencies": { + "dompurify": "^3.3.0", + "igniteui-i18n-resources": "^1.0.1", + "marked": "^17.0.0", + "marked-shiki": "^1.2.0", + "shiki": "^3.20.0" + }, + "peerDependenciesMeta": { + "dompurify": { + "optional": true + }, + "igniteui-i18n-resources": { + "optional": true + }, + "marked": { + "optional": true + }, + "marked-shiki": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, + "node_modules/igniteui-i18n-core": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.2.tgz", + "integrity": "sha512-51szNhKG/3ckWkJKV6npAG50Fvi11a5e/lcKF9+unV9PlOpEm3tsf90s//8fXB9r28HSObgSRCVfKD+hfoNx7w==", + "license": "MIT", + "peerDependencies": { + "igniteui-i18n-resources": "1.0.2" + }, + "peerDependenciesMeta": { + "igniteui-i18n-resources": { + "optional": true + } } }, "node_modules/igniteui-react": { @@ -10387,9 +10443,10 @@ } }, "node_modules/mdast-util-to-hast": { - "version": "13.2.0", - "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz", - "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==", + "version": "13.2.1", + "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz", + "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==", + "license": "MIT", "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", @@ -10410,6 +10467,7 @@ "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "license": "MIT", "dependencies": { "@types/unist": "*" } @@ -10417,7 +10475,8 @@ "node_modules/mdast-util-to-hast/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" }, "node_modules/mdast-util-to-hast/node_modules/micromark-util-character": { "version": "2.1.1", @@ -10433,6 +10492,7 @@ "url": "https://opencollective.com/unified" } ], + "license": "MIT", "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" @@ -10451,7 +10511,8 @@ "type": "OpenCollective", "url": "https://opencollective.com/unified" } - ] + ], + "license": "MIT" }, "node_modules/mdast-util-to-hast/node_modules/micromark-util-sanitize-uri": { "version": "2.0.1", @@ -10467,6 +10528,7 @@ "url": "https://opencollective.com/unified" } ], + "license": "MIT", "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", @@ -10486,7 +10548,8 @@ "type": "OpenCollective", "url": "https://opencollective.com/unified" } - ] + ], + "license": "MIT" }, "node_modules/mdast-util-to-hast/node_modules/micromark-util-types": { "version": "2.0.2", @@ -10501,12 +10564,14 @@ "type": "OpenCollective", "url": "https://opencollective.com/unified" } - ] + ], + "license": "MIT" }, "node_modules/mdast-util-to-hast/node_modules/unist-util-is": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz", "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0" }, @@ -10516,9 +10581,10 @@ } }, "node_modules/mdast-util-to-hast/node_modules/unist-util-visit": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", - "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz", + "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", @@ -10533,6 +10599,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz", "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" @@ -11612,12 +11679,14 @@ "node_modules/oniguruma-parser": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz", - "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==" + "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==", + "license": "MIT" }, "node_modules/oniguruma-to-es": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz", - "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz", + "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==", + "license": "MIT", "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", @@ -12281,6 +12350,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -12726,9 +12796,10 @@ } }, "node_modules/regex": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz", - "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz", + "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==", + "license": "MIT", "dependencies": { "regex-utilities": "^2.3.0" } @@ -12750,6 +12821,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", + "license": "MIT", "dependencies": { "regex-utilities": "^2.3.0" } @@ -12757,7 +12829,8 @@ "node_modules/regex-utilities": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", - "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==" + "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", + "license": "MIT" }, "node_modules/regexp.prototype.flags": { "version": "1.5.4", @@ -14361,16 +14434,17 @@ } }, "node_modules/shiki": { - "version": "3.15.0", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.15.0.tgz", - "integrity": "sha512-kLdkY6iV3dYbtPwS9KXU7mjfmDm25f5m0IPNFnaXO7TBPcvbUOY72PYXSuSqDzwp+vlH/d7MXpHlKO/x+QoLXw==", - "dependencies": { - "@shikijs/core": "3.15.0", - "@shikijs/engine-javascript": "3.15.0", - "@shikijs/engine-oniguruma": "3.15.0", - "@shikijs/langs": "3.15.0", - "@shikijs/themes": "3.15.0", - "@shikijs/types": "3.15.0", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.22.0.tgz", + "integrity": "sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==", + "license": "MIT", + "dependencies": { + "@shikijs/core": "3.22.0", + "@shikijs/engine-javascript": "3.22.0", + "@shikijs/engine-oniguruma": "3.22.0", + "@shikijs/langs": "3.22.0", + "@shikijs/themes": "3.22.0", + "@shikijs/types": "3.22.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } @@ -14824,6 +14898,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -15158,6 +15233,7 @@ "version": "4.0.4", "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "license": "MIT", "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" @@ -15652,6 +15728,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -16126,6 +16203,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz", "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0" }, @@ -16137,7 +16215,8 @@ "node_modules/unist-util-position/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" }, "node_modules/unist-util-stringify-position": { "version": "3.0.3", @@ -16445,6 +16524,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" @@ -16458,6 +16538,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz", "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" @@ -16470,12 +16551,14 @@ "node_modules/vfile-message/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" }, "node_modules/vfile-message/node_modules/unist-util-stringify-position": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "license": "MIT", "dependencies": { "@types/unist": "^3.0.0" }, @@ -16487,7 +16570,8 @@ "node_modules/vfile/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" }, "node_modules/vinyl": { "version": "2.2.0", diff --git a/browser/package.json b/browser/package.json index 5c2c33f197..e1e973f867 100644 --- a/browser/package.json +++ b/browser/package.json @@ -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", diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js index 0ee3e9ec49..76b690036f 100644 --- a/browser/tasks/gulp-samples.js +++ b/browser/tasks/gulp-samples.js @@ -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" }, From d657b526a5a08a85dcf716ce98826cf9791527c2 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 12 Feb 2026 17:30:29 +0200 Subject: [PATCH 8/8] chore: package.json --- browser/package-lock.json | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/browser/package-lock.json b/browser/package-lock.json index cc26e0a564..3fb90124ba 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -8428,6 +8428,20 @@ } } }, + "node_modules/igniteui-grid-lite/node_modules/marked": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.2.tgz", + "integrity": "sha512-s5HZGFQea7Huv5zZcAGhJLT3qLpAfnY7v7GWkICUr0+Wd5TFEtdlRR2XUL5Gg+RH7u2Df595ifrxR03mBaw7gA==", + "license": "MIT", + "optional": true, + "peer": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 20" + } + }, "node_modules/igniteui-i18n-core": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.2.tgz",