grid-lite-to-igr-grid-migration

name: grid-lite-to-igr-grid-migration description: Step-by-step migration guide from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid), covering every import, registration, component name, property, event, template, sorting, filtering, and toolbar API change. user-invocable: true

Ignite UI for React — Grid Lite → Premium Data Grid Migration

MANDATORY AGENT PROTOCOL

DO NOT write any code from memory. Grid APIs change between versions.

Before producing migration code:

1. Read the user's existing component files to understand current Grid Lite usage (columns, templates, data binding, dataPipelineConfiguration).
2. Use the MCP server — call get_doc or search_docs with framework: "react" to confirm API details when in doubt.
3. Only then produce output — base all code on verified references, not memory.

When to Migrate from Grid Lite to Premium Grid

Migrate when you need any of the following features (not available in Grid Lite):

Setup

npm install --save igniteui-react-grids
# licensed: npm install --save @infragistics/igniteui-react-grids

import { IgrGridModule, IgrGrid, IgrColumn, IgrPaginator,
         IgrCellTemplateContext, IgrColumnTemplateContext } from "igniteui-react-grids";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";

// Required once before render — Grid Lite has no equivalent
IgrGridModule.register();

Use @infragistics/igniteui-react-grids and the matching CSS path for the licensed package. Check package.json — igniteui-grid-lite may be a standalone dependency alongside igniteui-react.

Minimal Migration Example

import { useRef, useState } from "react";
import { IgrGrid, IgrColumn, IgrGridModule } from "igniteui-react-grids";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
IgrGridModule.register();

export default function MyView() {
  const gridRef = useRef<IgrGrid>(null);
  const [data] = useState<Product[]>([]);

  return (
    <IgrGrid ref={gridRef} data={data} primaryKey="id" autoGenerate={false}
             height="600px" allowFiltering={true}>
      <IgrColumn field="name" header="Name" sortable={true} filterable={true} resizable={true} />
      <IgrColumn field="price" header="Price" dataType="number" sortable={true} />
    </IgrGrid>
  );
}

Key additions vs Grid Lite:

• primaryKey — required for editing, selection, row-targeted APIs
• height — required for row virtualization
• allowFiltering={true} on the grid — required for filter UI; filterable={true} on the column opts that column in

Cell Templates

Prop renamed: cellTemplate → bodyTemplate. Context type changes.

import { IgrCellTemplateContext } from "igniteui-react-grids";

const statusCell = (ctx: IgrCellTemplateContext) => (
  <span style={{ color: ctx.cell.value === "Active" ? "green" : "red" }}>
    {ctx.cell.value}
  </span>
);

<IgrColumn field="status" bodyTemplate={statusCell} />

Header Templates

Prop name unchanged (headerTemplate); context type changes to IgrColumnTemplateContext from igniteui-react-grids.

import { IgrColumnTemplateContext } from "igniteui-react-grids";

const priceHeader = (ctx: IgrColumnTemplateContext) => (
  <strong>{ctx.column.header}</strong>
);

<IgrColumn field="price" headerTemplate={priceHeader} />

Remote Data (replaces dataPipelineConfiguration)

For server-side operations, disable local sort/filter processing first by assigning noop strategies, then listen to the done events to issue new requests.

import { IgrGrid, IgrGridModule,
         IgrNoopSortingStrategy, IgrNoopFilteringStrategy } from "igniteui-react-grids";

// Disable built-in sort/filter so the grid does not process data locally.
// Set these once after the grid mounts (e.g., in a useEffect or ref callback).
useEffect(() => {
  if (!gridRef.current) return;
  gridRef.current.sortStrategy = IgrNoopSortingStrategy.instance();
  gridRef.current.filterStrategy = IgrNoopFilteringStrategy.instance();
}, []);

const handleSortingDone = async () => {
  if (!gridRef.current) return;
  setData(await dataService.sort(gridRef.current.sortingExpressions));
};
const handleFilteringDone = async () => {
  if (!gridRef.current) return;
  setData(await dataService.filter(gridRef.current.filteringExpressionsTree));
};

<IgrGrid ref={gridRef} data={data} primaryKey="id" height="600px"
         onSortingDone={handleSortingDone} onFilteringDone={handleFilteringDone}>
  {/* columns */}
</IgrGrid>

Programmatic Sort / Filter

import { SortingDirection, IgrNumberFilteringOperand } from "igniteui-react-grids";

// fieldName + SortingDirection enum (not key + string)
gridRef.current.sort([{ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true }]);
gridRef.current.clearSort('name');      // or clearSort() for all

// Positional args with operand
// Note: verify IgrNumberFilteringOperand.instance() is available in your version
gridRef.current.filter('age', 21, IgrNumberFilteringOperand.instance().condition('greaterThan'));
gridRef.current.clearFilter('age');     // or clearFilter() for all

Common Enterprise Features

Editing

<IgrGrid data={data} primaryKey="id" rowEditable={true} onRowEditDone={handleRowEditDone} height="600px">
  <IgrColumn field="name" editable={true} />
</IgrGrid>

Row Selection

<IgrGrid data={data} primaryKey="id" rowSelection="multiple" height="600px">
  {/* columns */}
</IgrGrid>
// Read: gridRef.current.selectedRows

Paging

<IgrGrid data={data} primaryKey="id" height="600px">
  <IgrPaginator perPage={15} />
</IgrGrid>

Summaries

<IgrColumn field="price" dataType="number" hasSummary={true} />

Toolbar + Export

Note: IgrExcelExporterService / IgrExcelExporterOptions (programmatic export) must be imported from "igniteui-react", not "igniteui-react-grids". The toolbar approach below does not need them.

import { IgrGrid, IgrColumn, IgrGridToolbar, IgrGridToolbarTitle,
         IgrGridToolbarActions, IgrGridToolbarHiding, IgrGridToolbarPinning,
         IgrGridToolbarExporter, IgrGridToolbarAdvancedFiltering,
         IgrGridToolbarExportEventArgs, IgrGridModule } from "igniteui-react-grids";
IgrGridModule.register();

<IgrGrid data={data} primaryKey="id" height="600px" onToolbarExporting={handleExporting}>
  <IgrGridToolbar>
    <IgrGridToolbarTitle>Products</IgrGridToolbarTitle>
    <IgrGridToolbarActions>
      <IgrGridToolbarHiding />
      <IgrGridToolbarPinning />
      <IgrGridToolbarAdvancedFiltering />
      <IgrGridToolbarExporter exportExcel={true} exportCSV={true} />
    </IgrGridToolbarActions>
  </IgrGridToolbar>
  {/* columns */}
</IgrGrid>

const handleExporting = (e: IgrGridToolbarExportEventArgs) => {
  e.detail.options.fileName = "MyExport";
  // set e.detail.cancel = true to abort
};

Cleanup After Migration

1. Remove all dataPipelineConfiguration usage — replace with events (see Remote Data).
2. Remove IgrCellContext / IgrHeaderContext imports from igniteui-react/grid-lite.
3. Uninstall igniteui-grid-lite if no Grid Lite instances remain: npm uninstall igniteui-grid-lite.

Related Skills

• igniteui-react-components — Identify the right Igr* components, install, import, and use them; covers JSX patterns, events, refs, and forms. Use this after migrating to explore the full premium grid feature set.
• igniteui-react-customize-theme — Customize IgrGrid styling using CSS custom properties and the Ignite UI theming system.
• igniteui-react-optimize-bundle-size — Reduce bundle size after migrating to igniteui-react-grids with granular imports, tree-shaking, and lazy loading.
• igniteui-react-generate-from-image-design — Build a full React view from a screenshot or mockup using Ignite UI components and MCP-driven theming.