# ⚡ react-virtual-aggridautomat
> Opinionated, fully-virtualized AG Grid component powered by [react-automat](https://github.com/sebseb7/react-automat) — infinite-scroll data grids as React `PureComponent` with zero hooks, HOCs, or Context Providers.
[](https://www.ag-grid.com/)
[](https://github.com/sebseb7/react-automat)
[](https://react.dev/)
---
## What is this?
A reusable `` PureComponent that wires AG Grid's [Infinite Row Model](https://www.ag-grid.com/react-data-grid/infinite-scrolling/) to a `react-automat` store. Your async data fetcher is the only thing you provide — the library handles:
- **Virtual row loading** — only visible rows exist in the DOM
- **Block caching** — configurable cache size, debounced scroll loading
- **Server-side sort & filter** — sort/filter changes flow through the automat and trigger datasource resets
- **Reactive state** — loading indicators, error state, row counts, and revision tracking all live in the automat
- **Zero hooks** — designed for `PureComponent` with synchronous constructor reads and fine-grained automat subscriptions
## Install
```bash
npm install ag-grid-community ag-grid-react react-automat
```
> This library is not yet published to npm. Clone or copy `src/lib/` into your project.
## Quick Start
### 1. Create a grid automat
```ts
// myGridAutomat.ts
import { createGridAutomat } from './lib';
export const myGridAutomat = createGridAutomat({
fetchRows: async ({ startRow, endRow, sortModel, filterModel }) => {
const res = await fetch(`/api/items?start=${startRow}&end=${endRow}`);
const { items, total } = await res.json();
return { rows: items, lastRow: total };
},
name: 'myGrid', // Visible in window.__AUTOMATS__
blockSize: 100, // Rows per block (passed to AG Grid's cacheBlockSize)
});
```
### 2. Render the grid
```tsx
// MyView.tsx
import { PureComponent } from 'react';
import { AutomatGrid } from './lib';
import { myGridAutomat } from './myGridAutomat';
class MyView extends PureComponent {
render() {
return (
`€${p.value?.toFixed(2)}` },
]}
rowIdField="id"
height="600px"
/>
);
}
}
```
### 3. React to grid state
The automat is a standard `react-automat` store — subscribe to it from any PureComponent:
```tsx
class StatusBar extends PureComponent {
constructor(props) {
super(props);
this.state = {
loading: myGridAutomat.state.loading,
totalRows: myGridAutomat.state.totalRows,
};
}
componentDidMount() {
this.unsub = myGridAutomat.subscribe(this, (s) => ({
loading: s.loading,
totalRows: s.totalRows,
}));
}
componentWillUnmount() {
this.unsub();
}
render() {
return (