A real-time logistics grid that renders 30,000 live rows.

The client is a German logistics-technology provider whose software helps companies cut time, distance, cost and carbon across the logistics chain. Their operational tool was a legacy Windows-Forms desktop application: fast and dense, but stuck on the desktop.

The brief was to bring it to the cloud as a React web app without giving up what made the desktop version useful: the ability to render thousands of records from hundreds of vehicles in one high-performance grid, and to show their real-time locations and routes on an interactive map.

The answer was to separate what’s rendered from what exists. We virtualized the grid with React’s virtual DOM so only the rows in the viewport (roughly 120 at a time) are ever mounted. But we kept the full dataset in the browser, so filtering, sorting, grouping and aggregation operate across all 30,000 records, not just the visible slice. Scrolling stays smooth; the numbers stay correct.

1// 30,000 rows must stay consistent for filtering, sorting and grouping, so we2// keep the FULL dataset in the browser (IndexedDB) and only mount the rows that3// are actually visible in the viewport.4const { data: all } = useQuery({5  queryKey: ['fleet'],6  queryFn: () => db.vehicles.toArray(),      // full set from IndexedDB, not the API7  staleTime: Infinity,8});9 10const rows = useMemo(11  () => group(sort(filter(all ?? [], filters), sortBy), groupBy),12  [all, filters, sortBy, groupBy],           // derived across ALL rows, not a page13);14 15const virtual = useVirtualizer({16  count: rows.length,                        // could be 30,00017  estimateSize: () => 32,18  overscan: 12,19  getScrollElement: () => scrollRef.current,20});21 22// only virtual.getVirtualItems() (~120 rows) ever reach the DOM

• Virtualization & resizing: only viewport rows mounted; columns resize freely.
• Filtering, sorting, grouping, aggregation, computed across the entire dataset.
• Editing & pagination: inline edits and paging that stay consistent with the source.

We cached with React Query and persisted the data in the browser’s IndexedDB. The result was lightning-fast interaction with almost no chatter to the backend. The grid reads from a local store, not the network, so filtering and scrolling never wait on a round-trip.

We drove real-time updates with SignalR. Rather than refetch, each incoming event patches IndexedDB directly and then nudges React Query, so every grid and the map re-derive from the same local source. That design handles hundreds of events a minute and reflects them instantly across multiple grids holding vast amounts of data.

1// Hundreds of driver events a minute. Each one patches IndexedDB directly, then2// nudges React Query, so every grid AND the map re-derive from one source.3connection.on('VehicleMoved', async (evt: VehicleEvent) => {4  await db.vehicles.update(evt.id, {5    lat: evt.lat, lng: evt.lng, status: evt.status, eta: evt.eta,6  });7 8  // refresh derived state without a network refetch, the data is already local9  queryClient.invalidateQueries({ queryKey: ['fleet'], refetchType: 'none' });10  mapBus.emit('vehicle:moved', evt);         // move the live marker on the map11});12 13await connection.start();                    // SignalR, with auto-reconnect

We modified react-leaflet to plot the live locations and chosen routes of hundreds of vehicles, driven by the very same event stream and IndexedDB store that feeds the grids. Markers move as the events arrive, so the map and the grids are always telling the same story: a super-fast, real-time, highly interactive application.

To get events out of the legacy world, we built a custom project that consumes the legacy system’s events and feeds them into the modern web app’s real-time pipeline. The old Windows-Forms system and the new React app stay in sync during and after the transition, letting the client migrate with confidence rather than in a single risky leap.

• A super-fast, real-time, interactive web app replacing a legacy desktop tool.
• Thousands of records rendered smoothly with virtualization and local caching.
• Live maps and grids in lockstep, driven by one event stream.
• A guided deployment with full quality assurance, in partnership with the client.

The unlock wasn’t a faster grid component. It was moving the data to where the work happens. With the full dataset cached locally in IndexedDB, virtualization, real-time updates and live maps all became local operations: fast, consistent, and quiet on the network. A legacy desktop tool became a modern, real-time web app without losing an ounce of its density.