igniteui-react-migrate-grid-lite-to-premium

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:

Feature	IgrGrid
Cell / row editing	editable on the column, rowEditable on the grid
Batch editing with undo	transaction service
Row add / delete	rowEditable + IgrActionStrip
Row / cell / column selection	rowSelection, cellSelection, columnSelection
Paging	IgrPaginator child
Grouping	groupingExpressions
Summaries	hasSummary on the column
Column pinning / moving / hiding	pinned, moving, toolbar actions
Master-detail, hierarchical rows	row expansion, IgrTreeGrid, IgrHierarchicalGrid
Excel / CSV export	IgrGridToolbarExporter
Advanced filtering UI	filterMode="excelStyleFilter", IgrGridToolbarAdvancedFiltering
State persistence	IgrGridState
Row drag and drop	rowDraggable

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

	Grid Lite	IgrGrid
Cell template prop	cellTemplate	bodyTemplate
Cell context type	IgrCellContext<T>	IgrCellTemplateContext
Cell value	ctx.value	ctx.cell.value (or ctx.implicit)
Row data	ctx.row.data	ctx.cell.row.data
Header context type	IgrHeaderContext<T>	IgrColumnTemplateContext
Header prop	headerTemplate	headerTemplate (unchanged)
Editor template	—	inlineEditorTemplate
Sorting expression	{ key, direction: 'ascending' }	{ fieldName, dir: SortingDirection.Asc }
Remote data	dataPipelineConfiguration	noop strategies + done events

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"
         onSortingDone={async () => setData(await api.sort(grid.current!.sortingExpressions))}
         onFilteringDone={async () => setData(await api.filter(grid.current!.filteringExpressionsTree))}>

Toolbar and export

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

const onExporting = (e: 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} onRowEditDone={onDone}>
  <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