Virtualization

For large trees, the virtual grid renders only the rows in the viewport (plus a small buffer) and re-windows as you scroll — so a 27,900-node tree keeps ~26 DOM rows. Search, a pinned grand-total footer, and conditional formatting all survive the windowed re-render.

Dash (Python)

# The Dash component virtualizes the client tree with enable_virtualization; for FLAT
# billion-row sources use the infinite (server) row model instead — see Server / lazy.
TensorGrid(id="grid", row_data=payload["row_data"],
           column_defs=payload["column_defs"], enable_virtualization=True)

React

import { TensorVirtualGrid } from '@tensorgrid/react';

<TensorVirtualGrid
  data={data}
  rows={['region', 'country', 'city']}
  measures={{ revenue: 'sum' }}
  height={420}
  showFooter
/>;

Vue

<TensorVirtualGrid
  :data="data"
  :rows="['region', 'country', 'city']"
  :measures="{ revenue: 'sum' }"
  :height="420"
  show-footer
/>

Vanilla JS

import { mountVirtualGrid } from '@tensorgrid/vanilla';

mountVirtualGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country', 'city'],
  measures: { revenue: 'sum' },
  height: 420,
  showFooter: true,
  footerLabel: 'All regions',
});

When to reach for what

• Virtual grid — a large tree already built client-side (tens of thousands of aggregated nodes). Everything stays in the browser.
• Infinite / server row model — a huge flat source (millions–billions of rows). The grid requests windows as you scroll and the engine sorts/filters over the whole dataset. See server / lazy mode.