Migrate Grid Lite samples to v0.4.0 declarative column API

[Copilot]

Updates all Grid Lite samples to igniteui-grid-lite@0.4.0 which introduces declarative column configuration via template elements instead of imperative property binding.

Changes

Package Update

• igniteui-grid-lite: ^0.0.1 → ~0.4.0

Column API Migration (14 components)

• Column definitions moved from TypeScript to template using <igc-grid-lite-column> elements
• Property renames: key → field, type → data-type, headerText → header
• Boolean configs converted to attributes: sort: true → sortable, filter: true → filterable
• Cell templates extracted as component methods for Angular property binding

Sorting API Changes

• Grid properties: sortConfiguration → sortingOptions, sortExpressions → sortingExpressions
• Configuration: multiple: boolean → mode: 'single' | 'multiple'
• Removed triState (now always enabled)

Example

Before:

columns = [
  { key: 'firstName', headerText: 'First Name', sort: true, filter: true },
  { key: 'priority', headerText: 'Priority', sort: { comparer: customFn } }
];

<igc-grid-lite [columns]="columns" [data]="data"></igc-grid-lite>

After:

priorityComparer = (a: string, b: string) => ...;

<igc-grid-lite [data]="data">
  <igc-grid-lite-column field="firstName" header="First Name" sortable filterable></igc-grid-lite-column>
  <igc-grid-lite-column field="priority" header="Priority" sortable [sortConfiguration]="{ comparer: priorityComparer }"></igc-grid-lite-column>
</igc-grid-lite>

Components Updated

• grid-lite-overview
• grid-lite-column-config-{simple,dynamic,headers}
• grid-lite-data-binding-dynamic
• grid-lite-filtering-{simple,events,pipeline}
• grid-lite-sorting-{simple,events,grid-config,pipeline}
• grid-lite-styling-{custom,themes}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/igniteui-angular-samples/igniteui-angular-samples/node_modules/.bin/ng build --configuration production (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Overview

Update all Grid Lite samples in src/app/grid-lite/ to use the new declarative column API from igniteui-grid-lite version 0.4.0.

Package Update

Update package.json at the root to use igniteui-grid-lite version ~0.4.0.

Breaking Changes to Apply

1. Declarative Column Configuration

Column configuration is now declarative using <igc-grid-lite-column> elements instead of the columns property.

Before:

const columns = [
  { key: 'firstName', headerText: 'First name', sort: true, filter: true, resizable: true },
  { key: 'email', headerText: 'Email Address' },
];
this.grid.columns = columns;

After (in template):

<igc-grid-lite [data]="data">
  <igc-grid-lite-column field="firstName" header="First name" sortable filterable resizable></igc-grid-lite-column>
  <igc-grid-lite-column field="email" header="Email Address"></igc-grid-lite-column>
</igc-grid-lite>

2. Column Property Renames (on column definition only, NOT on expressions)

• key → field (on column definitions only)
• type → dataType (attribute: data-type)
• headerText → header

IMPORTANT: The key property in FilterExpression and SortingExpression should remain as key - it refers to the field to filter/sort by.

3. Sort/Filter Configuration Changes

• sort: true → sortable attribute
• sort: { caseSensitive: true, comparer: fn } → sortable + sorting-case-sensitive attributes, and sortConfiguration property with comparer
• filter: true → filterable attribute
• filter: { caseSensitive: true } → filterable + filtering-case-sensitive attributes

4. Grid-level Sorting Renames

• grid.sortConfiguration → grid.sortingOptions
• grid.sortExpressions → grid.sortingExpressions
• sortConfiguration.multiple = false → sortingOptions.mode = 'single'
• sortConfiguration.multiple = true → sortingOptions.mode = 'multiple'
• Remove triState property (tri-state sorting is now always enabled)

5. Type Renames

• SortExpression → SortingExpression
• GridSortConfiguration → GridLiteSortingOptions
• ColumnConfiguration no longer used for columns property

Files to Update

All component files in src/app/grid-lite/*/ directories:

• grid-lite-overview/
• grid-lite-column-config-simple/
• grid-lite-column-config-dynamic/
• grid-lite-column-config-headers/
• grid-lite-data-binding-dynamic/
• grid-lite-filtering-simple/
• grid-lite-filtering-events/
• grid-lite-filtering-pipeline/
• grid-lite-sorting-simple/
• grid-lite-sorting-events/
• grid-lite-sorting-grid-config/
• grid-lite-sorting-pipeline/
• grid-lite-styling-custom/
• grid-lite-styling-themes/

Example Transformation

Before (grid-lite-overview.component.ts):

import { IgcGridLite, ColumnConfiguration } from 'igniteui-grid-lite';

@Component({
  template: `
    <igc-grid-lite #grid></igc-grid-lite>
  `
})
export class GridLiteOverviewComponent implements AfterViewInit {
  @ViewChild('grid') grid: ElementRef<IgcGridLite<User>>;

  columns: ColumnConfiguration<User>[] = [
    { key: 'firstName', headerText: 'First Name', sort: true, filter: true },
    { key: 'lastName', headerText: 'Last Name', sort: true, filter: true },
    { key: 'email', headerText: 'Email' }
  ];

  ngAfterViewInit() {
    this.grid.nativeElement.columns = this.columns;
    this.grid.nativeElement.data = this.data;
  }
}

After:

import { IgcGridLite } from 'igniteui-grid-lite';

@Component({
  template: `
    <igc-grid-lite #grid [data]="data">
      <igc-grid-lite-column field="firstName" header="First Name" sortable filterable></igc-grid-lite-column>
      <igc-grid-lite-column field="lastName" header="Last Name" sortable filterable></igc-grid-lite-column>
      <igc-grid-lite-column field="email" header="Email"></igc-grid-lite-column>
    </igc-grid-lite>
  `
})
export class GridLiteOverviewComponent {
  data: User[] = [...];
  // Remove columns array - no longer needed
}

Notes

• Keep key property unchanged in sort/filter expressions (e.g., grid.filter({ key: 'firstName', ... }))
• Only rename key to field on column configurations
• Use Angular property binding [data]="data" for the data property
• Boolean attributes like sortable, filterable, resizable can be used without values
• For columns with custom templates, set cellTemplate property on the column element or use slots

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.