Migrate from AG Grid

The OGE grid covers what an AG Grid screen usually uses — sorting, filtering, grouping with summaries, selection, editing, pinned rows and columns, master-detail, export — with one difference in shape: server data goes through a data source that receives a single LoadOptions object instead of a row-model callback.

grid options columnDefs server-side rows

Grid options

AG Grid grid options on oge-grid
AG Grid	OGE grid
`rowData`	`data` (an array or a `DataSource` )
`getRowId`	`keyField`
`columnDefs`	`<oge-column>` children or `columns`
`defaultColDef`	column defaults are sensible: sortable, filterable, resizable with `columnResize`
`pagination` · `paginationPageSize`	`paging: { pageSize }`
`rowSelection`	`selectionMode: 'single' \| 'multiple'` (+ `selectedKeys` )
`cellSelection` (range selection)	`rangeSelection` with `selectionMode: 'cell'`
`rowModelType: 'serverSide'` / `'infinite'`	a `CustomDataSource` ; `scrolling: { mode: 'infinite' }` for block loading
`rowGroupPanelShow`	`groupPanel`
`rowGroup` on a column	`groupIndex` on the column (or `groupBy` )
`aggFunc`	`groupSummary` / `totalSummary` on the column
`floatingFilter`	`filterRow`
set filter ( `agSetColumnFilter` )	`headerFilter` (value list, conditions, or both)
quick filter ( `quickFilterText` )	`searchPanel`
`rowDragManaged` · `rowDragEntireRow`	`rowDragging` ( `rowDragGroup` across grids, `rowDragExternal` to other apps)
`masterDetail` · `detailCellRenderer`	a detail template ( `*ogeDetailTemplate` )
`pinnedTopRowData` · `pinnedBottomRowData`	`pinnedTopRows` · `pinnedBottomRows`
`enableRtl`	`rtlEnabled`
`exportDataAsExcel` / `exportDataAsCsv`	`exportGridToExcel()` ( `@oge-ui/grid/export-excel` ) · `getCsv()`

Column definitions

AG Grid column definitions on oge-column
AG Grid ColDef	OGE column
`field`	`field`
`headerName`	`caption`
`width` · `minWidth` · `maxWidth`	`width` · `minWidth` · `maxWidth`
`hide`	`visible: false`
`pinned`	`pinned: 'left' \| 'right'`
`sortable: false` · `filter: false`	`sortable: false` · `filterable: false`
`sort` · `sortIndex`	`sortOrder` · `sortIndex`
`valueGetter`	`calculateCellValue`
`valueFormatter`	`format` (a function or a declarative `OgeValueFormat` )
`comparator`	`calculateSortValue` , or `sorting.compare` for the whole grid
`cellRenderer`	`*ogeCellTemplate`
`headerComponent`	`*ogeHeaderTemplate`
`editable` · `cellEditor`	`editable` · `*ogeEditTemplate` ( `editing` on the grid)
`cellClassRules`	`conditionalFormats` or the grid's `cellClass`
`children` (column groups)	`<oge-column-group>`

// AG Grid: columnDefs objects
columnDefs: ColDef<Order>[] = [
  { field: 'id', headerName: 'Id', width: 80, pinned: 'left' },
  { field: 'customer', filter: true, sortable: true },
  { headerName: 'Total', valueGetter: (p) => p.data!.qty * p.data!.price,
    valueFormatter: (p) => money(p.value) },
];

<!-- OGE: <oge-column> children (or the same objects through [columns]) -->
<oge-grid [data]="orders" keyField="id" [filterRow]="true">
  <oge-column field="id" caption="Id" [width]="80" pinned="left" />
  <oge-column field="customer" />
  <oge-column caption="Total" [calculateCellValue]="total" [format]="money" />
</oge-grid>

Server data

One request carries paging, sorting, the filter tree, grouping and the summaries; value lists ask distinct(). The filter contract says what each operator means, with test vectors your server can run.

// AG Grid: the server-side row model calls getRows({ request }) with
// startRow / endRow / sortModel / filterModel
// OGE: a data source receives one LoadOptions object — the same in memory and on the server
const orders = new CustomDataSource<Order>({
  key: 'id',
  load: (options) => api.post('/orders/query', options), // skip, take, sort, filter, group, summaries
  distinct: (field, options) => api.post(`/orders/distinct/${field}`, options),
});

Cell renderers

// AG Grid: a cell renderer component registered per column
{ field: 'status', cellRenderer: StatusBadge }

<!-- OGE: a template, with the row and value in context -->
<oge-column field="status">
  <span *ogeCellTemplate="let value" class="status" [attr.data-status]="value">
    {{ value }}
  </span>
</oge-column>

State and the grid API

Column state, filter model and sort model are one GridStateSnapshot; stateKey persists it and stateMigrations upgrades older saved formats.

// AG Grid: gridApi.setFilterModel / getColumnState / applyColumnState
this.gridApi.setFilterModel({ customer: { type: 'contains', filter: 'kaya' } });
const saved = this.gridApi.getColumnState();

// OGE: one serializable snapshot for sort, filters, grouping and the column layout
const saved = this.grid().state();
this.grid().applyState(saved);
// or persist automatically: <oge-grid stateKey="orders" />