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

[Copilot]

Updates all 13 Grid Lite samples to use the declarative column configuration API introduced in igniteui-grid-lite v0.4.0. Columns are now defined as JSX elements instead of programmatic arrays, and all samples have been refactored to modern function-based React components.

Changes

Package updates

• Bump igniteui-grid-lite to ~0.4.0 in all sample package.json files

Column configuration

• Convert programmatic column arrays to declarative <igc-grid-lite-column> JSX elements
• Rename column properties: key → field, type → dataType, headerText → header
• Convert boolean config to attributes: sort: true → sortable, filter: true → filterable
• Pass cellTemplate directly as props to column elements (defined as functions outside components)

Component architecture

• Refactor all samples from class-based to function-based React components
• Use modern React hooks: useState, useEffect, useCallback, useMemo, useRef
• Define cellTemplate functions outside component scope for reusability
• Proper event listener cleanup in useEffect return functions

Grid-level sorting API

• Rename sortConfiguration → sortingOptions
• Replace sortConfiguration.multiple with sortingOptions.mode ('single' | 'multiple')
• Rename sortExpressions → sortingExpressions on grid instances
• Remove deprecated triState property

Event handlers and expressions

• Preserve key property in FilterExpression and SortingExpression objects (refers to field name, not column property)

Example

Before (class-based with gridRef access):

export default class Sample extends React.Component {
  componentDidMount() {
    const columns = [
      { key: 'firstName', headerText: 'First name', sort: true, filter: true },
      { key: 'rating', headerText: 'Rating', type: 'number' }
    ];
    this.gridRef.current.columns = columns;
    
    // Set cellTemplate via gridRef
    const ratingCol = this.gridRef.current.columns.find(c => c.field === 'rating');
    if (ratingCol) {
      ratingCol.cellTemplate = (params) => { /* ... */ };
    }
    
    this.gridRef.current.data = data;
  }

  render() {
    return <igc-grid-lite ref={this.gridRef}></igc-grid-lite>;
  }
}

After (function-based with direct cellTemplate props):

// Define cellTemplate functions 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) {
      gridRef.current.data = data;
    }
  }, []);

  return (
    <igc-grid-lite ref={gridRef}>
      <igc-grid-lite-column field="firstName" header="First name" sortable filterable></igc-grid-lite-column>
      <igc-grid-lite-column field="rating" header="Rating" data-type="number" cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
    </igc-grid-lite>
  );
}

Impact: Net -296 lines across 25 files (1,398 insertions, 1,694 deletions) with improved code quality and maintainability

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' },
];
this.gridRef.current.columns = columns;

After:

// In render/return:
<igc-grid-lite ref={this.gridRef} 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 SortExpression (now 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 .tsx files in samples/grids/grid-lite/*/src/ directories that use the old column configuration API.

Example Transformation

Before (overview/src/index.tsx):

const columns = [
  {
    key: 'avatar',
    headerText: 'Avatar',
    cellTemplate: (params: any) => { ... }
  },
  {
    key: 'firstName',
    headerText: 'First name',
    sort: true,
    filter: true,
    resizable: true
  },
  {
    key: 'satisfaction',
    headerText: 'Satisfaction rating',
    type: 'number',
    sort: true,
    filter: true,
    cellTemplate: (params: any) => { ... }
  }
];

this.gridRef.current.columns = columns;
this.gridRef.current.data = data;

After:

// Remove columns assignment, use declarative columns in render
// For columns with cellTemplate, you'll need to set them programmatically or use slots

render() {
  return (
    <igc-grid-lite ref={this.gridRef}>
      <igc-grid-lite-column field="avatar" header="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></igc-grid-lite-column>
    </igc-grid-lite>
  );
}

componentDidMount() {
  // Set data and templates programmatically where needed
  this.gridRef.current.data = data;
  
  // For columns with custom templates, access the column and set cellTemplate
  const avatarCol = this.gridRef.current.columns.find(c => c.field === 'avatar');
  if (avatarCol) {
    avatarCol.cellTemplate = (params: any) => { ... };
  }
}

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

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.

[damyanpetev]

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

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

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

[Copilot]

Done! All 13 samples have been refactored to:

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

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