Files
2026-10-05 22:29:22 +02:00

2.2 KiB

AGENTS — react-virtual-aggridautomat

What

PureComponent wrapper: AG Grid infinite-scroll + react-automat state. Library in src/lib/, demo in src/demo/.

Exports (src/lib/index.ts)

  • AutomatGrid — PureComponent. Props: automat (required), columnDefs (required), rowIdField (default 'id'), cacheBlockSize, rowBuffer, height, width, onGridApiReady, plus standard AG Grid overrides.
  • createGridAutomat(options) — Factory returning Automat<GridAutomatState, GridAutomatActions>.

createGridAutomat

createGridAutomat({ fetchRows, name?, blockSize? })
  • fetchRows: ({startRow, endRow, sortModel, filterModel}) => Promise<{rows, lastRow?}> — the only required option.
  • State: ready, loading, totalRows, sortModel, filterModel, revision, error.
  • Actions: reload(), setSort(model), setFilter(model).

AutomatGrid internals

  • Uses InfiniteRowModelModule (community, no enterprise needed).
  • Constructor: sync read automat.state. Mount: automat.subscribe(this, selector). Unmount: unsub().
  • On revision change (via componentDidUpdate): rebuilds IDatasource and calls api.setGridOption('datasource', ds).
  • onSortChanged/onFilterChanged → automat.actions.setSort/setFilter → bumps revision → datasource reset.
  • getRowId uses props.rowIdField (default 'id') from row data.

Patterns

// 1. Create automat (module scope)
const grid = createGridAutomat({ fetchRows: myFetcher });
// 2. Render
<AutomatGrid automat={grid} columnDefs={cols} rowIdField="id" />
// 3. Reload externally
grid.actions.reload();
// 4. Subscribe from another component
this.unsub = grid.subscribe(this, s => ({ loading: s.loading }));

Rules

  • Never use hooks — PureComponent only.
  • Subscribe in componentDidMount, unsubscribe in componentWillUnmount.
  • Read automat.state in constructor for zero-flash initial render.
  • fetchRows must return { rows, lastRow? }. Set lastRow to total count to stop infinite scrolling.
  • AG Grid modules: only InfiniteRowModelModule is registered by AutomatGrid.

Commands

npm run dev      # Vite dev server
npm run build    # tsc + vite build