Density & chrome

The grid ships a set of opt-in chrome controls that need no host wiring — flip a flag and the control renders, does its job over the same engine, and stays out of the way when off. Mix and match: a search box, an export button, a selection toolbar, a density toggle, a column toggle, a status bar, and a placeholder for the empty state. The host only supplies CSS for the .tg-* classes.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {"rows": ["region", "country"], "measures": {"revenue": "sum"}})

# The Dash component ships its own toolbar / status bar; `density` sets the row height.
TensorGrid(
    id="grid",
    row_data=payload["row_data"],
    column_defs=payload["column_defs"],
    density="compact",          # 'compact' | 'standard' | 'comfortable'
    show_footer=True,
)

React

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

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  showSearch
  showExportButton
  showSelectionToolbar
  showDensityToggle
  showColumnToggle
  showStatusBar
  noRowsMessage="No rows match your search."
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  show-search
  show-export-button
  show-selection-toolbar
  show-density-toggle
  show-column-toggle
  show-status-bar
  no-rows-message="No rows match your search."
/>

Vanilla JS

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

mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  showSearch: true,
  showExportButton: true,
  showSelectionToolbar: true,
  showDensityToggle: true,
  showColumnToggle: true,
  showStatusBar: true,
  density: 'standard',                       // 'comfortable' | 'standard' | 'compact'
  noRowsMessage: 'No rows match your search.',
});

Options

• showSearch — the built-in quick filter box.
• showExportButton — download the selected (or all) source rows, or the aggregated view (exportMode: 'aggregated').
• showSelectionToolbar — Select all / Clear; showStatusBar — the selection summary.
• showDensityToggle / density — cycle comfortable → standard → compact (a tg-density-<level> class the host styles).
• showColumnToggle / hiddenColumns — per-measure visibility; combine with column reorder & resize.
• noRowsMessage — a full-width placeholder when everything is filtered out (omit for an empty body). Each control emits its own callback (onDensityChange, onExport, …) for a host that wants to persist state.