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>
  );
}