Overview

Technical reference for the AG Grid Community Edition integration in the Arda frontend application.

Documents in this Section

• Technical Inventory — this file: grid architecture, column definitions, custom renderers, editors, configuration, CSS overrides, and E2E testing guidance
• Compliance Refactor — audit of deviations from AG Grid v34 best practices, with recommended fixes and implementation plan
• Issues Analysis — consolidated issue list merging the deep-dive and compliance audit findings, with a phased fix order

Grid Architecture

AgGridReact  (ag-grid-community — the actual grid)
  wrapped by
ArdaGrid  (src/components/table/ArdaGrid.tsx)
  wrapped by
ItemTableAGGrid  (src/app/items/ItemTableAGGrid.tsx)

Only two pages use AG Grid: /items and /scan. The /order-queue and /receiving pages use custom card layouts with no AG Grid involvement.

Module Registration

Only Community modules are registered. No Enterprise modules are loaded.

import { AllCommunityModule } from 'ag-grid-community';
ModuleRegistry.registerModules([AllCommunityModule]);

ArdaGrid Configuration

Grid options:

{
  theme: 'legacy',
  rowSelection: { mode: 'multiRow' },
  suppressRowClickSelection: true,
  headerHeight: 48,
  rowHeight: 48,
  enableRangeSelection: false,
  suppressMultiRangeSelection: true,
  suppressColumnMoveAnimation: true,
  domLayout: 'normal',
  animateRows: false,
}

Default column definition (ArdaGrid level):

{
  sortable: true,
  filter: true,
  resizable: true,
  suppressHeaderMenuButton: true,
  suppressMovable: false,
}

Note: itemsDefaultColDef overrides filter: false at the items/scan level.

Column state persistence: Saved to localStorage with key items-grid-${activeTab}. Persists column order, visibility, width, and sort state. Restored on mount with applyColumnState().

Pagination: Custom implementation, not AG Grid’s built-in pagination. A custom footer shows “Page N” with First/Prev/Next buttons. Cursor-based pagination is managed by the parent component.

Items Grid: 33 Columns

The items grid (itemsColumnDefs in columnPresets.tsx) defines 33 columns. Key columns:

Column	colId	Editor Type	Notes
(checkbox)	select	Custom checkbox	Shift-click range selection
SKU	internalSKU	Inline text
Item	name	Inline text	Blue text; single-click opens detail panel
Image	imageUrl	None	sortable: false
Quick Actions	quickActions	None	3-4 icon buttons; suppressMovable: true
Supplier	supplier	SupplierCellEditor (typeahead)
Unit Price	unitCost	Inline text	Rendered with formatCurrency
Min Unit	minUnit	UnitCellEditor (typeahead)
Order Method	orderMechanism	OrderMechanismCellEditor (select popup)
Classification	type	TypeCellEditor (typeahead)
Color	color	ColorCellEditor (select popup)	Color swatch + name renderer

Custom Cell Editors

Typeahead editors (9 editors, identical class-based pattern):

SupplierCellEditor, UnitCellEditor, TypeCellEditor, SubTypeCellEditor, UseCaseCellEditor, FacilityCellEditor, DepartmentCellEditor, LocationCellEditor, SublocationCellEditor.

Each implements ICellEditorComp, creates a DOM container manually, calls createRoot() to render a React typeahead component inside it, and cleans up with setTimeout(() => root.unmount(), 0) in destroy().

Select editors (5 editors, inline in ItemTableAGGrid.tsx):

ColorCellEditor, OrderMechanismCellEditor, CardSizeCellEditor, LabelSizeCellEditor, BreadcrumbSizeCellEditor. Create a native <select> dropdown as a popup (isPopup: true).

Draft-based editing lifecycle:

1. Double-click a cell → getOrCreateDraft(itemId) creates a server-side draft.
2. Edit value → stored locally in localRowData state.
3. Click away from the row → publishRow(itemId) sends accumulated edits to the backend.
4. ESC → reverts to initialValue via isCancelAfterEnd().

Row visual states during editing: ag-row-saving (orange-tinted), ag-row-error (red-tinted).

CSS Overrides

The grid uses AG Grid’s legacy theme with a custom ag-theme-arda class applied to the wrapper.

Notable overrides:

• Sort indicators — completely hidden (display: none !important). Sort IS functional but has no visual indicator.
• Header menus and filter buttons — completely hidden.
• Cell borders — removed; row borders preserved.
• Column drag ghost — hidden (opacity: 0). Column reordering works but the drag preview is invisible.
• Checkbox — orange checked state (#fc5a29, the Arda brand color).
• Focus ring — orange outline.
• Dark mode — supported via .dark .ag-theme-arda CSS selector.

Key Behavioral Notes for E2E Testing

• Only /items and /scan use AG Grid. Use .ag-theme-arda or [class*="ag-root"] to detect the grid.
• Sort tests must verify row data order, not sort indicator icons (indicators are hidden by CSS).
• Row selection requires clicking the custom checkbox, not the row itself (suppressRowClickSelection: true).
• Inline editing requires double-click (single-click opens detail panel; 300ms delay discriminates).
• Pagination footer is a custom component, not AG Grid’s .ag-paging-panel.
• AG Grid filter UI is hidden; filtering is done via external search controls.

Key CSS Selectors

Target	Selector
Grid wrapper	.ag-theme-arda
Header cell	.ag-header-cell[col-id="<colId>"]
Data cell	.ag-cell[col-id="<colId>"]
Row by index	.ag-row[row-index="<n>"]
Select-column checkbox	.ag-cell[col-id="select"] input[type="checkbox"]
Cell in edit mode	.ag-cell-inline-editing
Select editor popup	.ag-popup-editor
Row being saved	.ag-row-saving
Row with error	.ag-row-error