Migrate Grid Lite samples to v0.4.0 declarative column API

[Copilot]

Migrates all 13 Grid Lite samples to use the declarative column configuration API introduced in igniteui-grid-lite v0.4.0.

Changes

Package Updates

• Updated igniteui-grid-lite dependency to ~0.4.0 across all samples

Column Configuration

• Converted from imperative column arrays to declarative <igc-grid-lite-column> elements
• Property renames: key → field, type → dataType, headerText → header
• Boolean flags to attributes: sort: true → sortable, filter: true → filterable
• Custom comparers: sort: { comparer, caseSensitive } → .sortConfiguration property + sorting-case-sensitive attribute
• Cell templates: DOM manipulation functions → Lit template property bindings via .cellTemplate

Grid API

• sortConfiguration → sortingOptions
• sortExpressions → sortingExpressions
• sortConfiguration.multiple → sortingOptions.mode with values 'single' | 'multiple'
• Removed triState property (now always enabled)

Rendering

• Grid elements rendered via lit-html's render() function
• HTML containers changed from <igc-grid-lite> to <div> with dynamic rendering

Example

Before:

const columns = [
  { key: 'name', headerText: 'Product', sort: true, filter: true },
  { key: 'price', type: 'number', headerText: 'Price', sort: true }
];
grid.columns = columns;
grid.data = data;

After:

import { html, render } from 'lit-html';

const template = html`
  <igc-grid-lite .data=${data}>
    <igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
    <igc-grid-lite-column field="price" header="Price" data-type="number" sortable></igc-grid-lite-column>
  </igc-grid-lite>
`;
render(template, container);

Notes

• key property in FilterExpression and SortingExpression remains unchanged per API design
• Dynamic column updates in column-config-dynamic now modify column element properties directly
• Custom comparers configured via .sortConfiguration property on column elements

Original prompt

Overview

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

Package Update

Update package.json in each sample folder 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' },
];
grid.columns = columns;

After:

<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

Files to Update

All TypeScript/HTML files in samples/grids/grid-lite/*/ directories that use the old column configuration API.

Example Transformation

Before:

const columns = [
  {
    key: 'avatar',
    headerText: 'Avatar',
    cellTemplate: (params) => html`<igc-avatar src=${params.value}></igc-avatar>`
  },
  {
    key: 'firstName',
    headerText: 'First name',
    sort: true,
    filter: true,
    resizable: true
  },
  {
    key: 'satisfaction',
    headerText: 'Satisfaction rating',
    type: 'number',
    sort: true,
    filter: true,
    cellTemplate: (params) => html`<igc-rating readonly value=${params.value}></igc-rating>`
  }
];

grid.columns = columns;
grid.data = data;

After (in HTML template using Lit):

html`
  <igc-grid-lite .data=${data}>
    <igc-grid-lite-column 
      field="avatar" 
      header="Avatar"
      .cellTemplate=${(params) => html`<igc-avatar src=${params.value}></igc-avatar>`}
    ></igc-grid-lite-column>
    <igc-grid-lite-column 
      field="firstName" 
      header="First name" 
      sortable 
      filterable 
      resizable
    ></igc-grid-lite-column>
    <igc-grid-lite-column 
      field="satisfaction" 
      header="Satisfaction rating" 
      data-type="number" 
      sortable 
      filterable
      .cellTemplate=${(params) => html`<igc-rating readonly value=${params.value}></igc-rating>`}
    ></igc-grid-lite-column>
  </igc-grid-lite>
`

Notes

• Keep key property unchanged in sort/filter expressions (e.g., grid.filter({ key: 'firstName', ... }))
• Only rename key to field on column configurations
• Update any TypeScript type imports accordingly
• For Lit templates, use .cellTemplate property binding on the column element

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.