Grid Lite To Igr Grid Migration

Grid Lite → Premium Data Grid

Read the user's current Grid Lite usage first — columns, templates, data binding, dataPipelineConfiguration — then confirm APIs with get_doc({ framework: 'react', name: 'grid-editing' }) or get_api_reference({ platform: 'react', component: 'IgrGrid' }) rather than from memory. Grid APIs change between versions.

Is the migration warranted?

Grid Lite has none of these; each is a valid reason to move:

If none applies, staying on Grid Lite is lighter — see igniteui-react-optimize-bundle-size.

Setup

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

import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; // in addition to the base theme

No registration. IgrGridModule.register() is deprecated and unnecessary — the React wrapper registers the element on import. Do not add it, and delete it if present.

Minimal port

import { useRef, useState } from 'react';
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

export default function Products({ data }: { data: Product[] }) {
  const grid = useRef<IgrGrid>(null);

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

Three additions Grid Lite did not need:

• primaryKey — required for editing, selection, and any row-targeted API.
• height — required for row virtualization; without it the grid renders no rows.
• allowFiltering on the grid and filterable on each column — the grid-level flag alone shows no UI.

As in Grid Lite, do not set column width unless the user asked; IgrColumn sizes itself and fixed widths leave dead space.

API renames

import { type IgrCellTemplateContext, IgrColumn } from 'igniteui-react-grids';

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

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

Note the context types are no longer generic over the row type.

Programmatic sort and filter

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

grid.current.sort([{ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true }]);
grid.current.clearSort('name');                    // or clearSort() for all

grid.current.filter('age', 21, IgrNumberFilteringOperand.instance().condition('greaterThan'));
grid.current.clearFilter('age');

Operands are available per data type: IgrStringFilteringOperand, IgrNumberFilteringOperand, IgrBooleanFilteringOperand, IgrDateFilteringOperand, IgrDateTimeFilteringOperand, IgrTimeFilteringOperand.

Remote data (replacing dataPipelineConfiguration)

Assign noop strategies so the grid stops processing locally, then re-fetch on the done events.

import { IgrNoopSortingStrategy, IgrNoopFilteringStrategy } from 'igniteui-react-grids';

useEffect(() => {
  if (!grid.current) return;
  grid.current.sortStrategy = IgrNoopSortingStrategy.instance();
  grid.current.filterStrategy = IgrNoopFilteringStrategy.instance();
}, []);

<IgrGrid ref={grid} data={data} primaryKey="id" height="600px"
         () => setData(await api.sort(grid.current!.sortingExpressions))}
         () => setData(await api.filter(grid.current!.filteringExpressionsTree))}>

Toolbar and export

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

const IgrGridToolbarExportEventArgs) => {
  e.detail.options.fileName = 'products';
  // e.detail.cancel = true to abort
};

For programmatic export, IgrExcelExporterService / IgrExcelExporterOptions and the CSV equivalents come from igniteui-react-grids — the same package as the grid.

Other feature snippets

<IgrGrid data={data} primaryKey="id" height="600px" rowEditable={true}
  <IgrColumn field="name" editable={true} />
  <IgrColumn field="price" dataType="number" hasSummary={true} />
</IgrGrid>

<IgrGrid data={data} primaryKey="id" height="600px" rowSelection="multiple">   {/* grid.current.selectedRows */}
  <IgrPaginator perPage={15} />
</IgrGrid>

Cleanup

1. Remove dataPipelineConfiguration and any hooks it used.
2. Remove IgrCellContext / IgrHeaderContext imports from igniteui-react/grid-lite.
3. Remove any IgrGridModule.register() calls.
4. npm uninstall igniteui-grid-lite once no IgrGridLite instances remain.
5. Keep the base theme CSS; add the grid theme CSS.

Related skills

• igniteui-react-components — the wider grid feature set, events, refs
• igniteui-react-customize-theme — grid tokens such as --ig-grid-header-background