Column reorder & resize

The measure columns are yours to rearrange: drag a header to reorder, drag its edge to resize, and tick a checkbox to show or hide it. These are pure view state — no backend round-trip, and the group / dimension column stays fixed as the anchor. Each change fires a callback so a host can persist the layout.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

# Per-column toggles (default ON) live on the column defs — disable via column_options.
payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "column_options": {
        "qty": {"resizable": False, "hideable": False},   # pin qty's width + keep it visible
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

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

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  enableColumnReorder      // drag measure headers to reorder
  resizableColumns         // drag a header edge to resize
  showColumnToggle         // one checkbox per measure column
  onColumnReorder={(order) => console.log(order)}
  onColumnResize={(widths) => console.log(widths)}
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  enable-column-reorder
  resizable-columns
  show-column-toggle
  @column-reorder="(order) => console.log(order)"
  @column-resize="(widths) => console.log(widths)"
/>

Vanilla JS

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

const grid = mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  enableColumnReorder: true,
  resizableColumns: true,
  showColumnToggle: true,
  hiddenColumns: ['qty'],            // start with qty hidden
});

grid.setColumnOrder(['qty', 'revenue']);   // programmatic reorder

Notes

• Measure columns only. Reorder / resize / hide apply to the measure columns; the group column is fixed. columnWidths is keyed by accessorKey, with "__group__" for the group column.
• Callbacks for persistence. onColumnReorder (new order), onColumnResize (width map), and onColumnVisibilityChange (hidden keys) let a host save and restore the layout — see the saved-view state in density & chrome.
• Dash toggles. enableResizing / enableHiding on a column def (or column_options resizable / hideable) gate the behaviour per column; they default ON.