Quick / global filter

A single global search box filters the whole tree by a case-insensitive substring match across all row dimensions — type France and every group whose region/country/city path contains it stays, the rest are pruned (ancestors kept). It ANDs with any per-column filters, and like all filtering it is a pure view prune: the engine’s aggregates are never recomputed on the client.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "qty": "number:0"},
})

# The component ships a global search box; `global_filter` seeds it (the frontend owns it at runtime).
TensorGrid(
    id="grid",
    row_data=payload["row_data"],
    column_defs=payload["column_defs"],
    global_filter="France",
)

React

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

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  showSearch
  searchPlaceholder="Filter rows (e.g. France)…"
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  show-search
  search-placeholder="Filter rows (e.g. France)…"
/>

Vanilla JS

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

mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  showSearch: true,
  searchPlaceholder: 'Filter rows (e.g. France)…',
});

Notes

• Searches the row dimensions, not the measure values — it’s for finding a group by name, not by number (use a range filter or having for that).
• ANDs with column filters. The quick term and every per-column filter apply together; matching groups keep their full breakdown and ancestor paths.
• showSearch renders the built-in box; the React/Vue quickFilter prop (and Dash global_filter) seed or drive the term programmatically. The box is part of the opt-in chrome.