Column Operations

import { columnOps, createDataGrid } from '@sv5ui/datagrid';

// All four operations are on by default. The shorthand form registers the
// feature for you; register it by hand to turn one off.
const grid = createDataGrid<Person>({
  data: people,
  columns,
  getRowId,
  features: [columnOps()]
});

// Or narrow it: this grid resizes and hides, but never reorders or pins.
columnOps({ resize: true, reorder: false, pin: false, hide: true });

// Pixels per keyboard resize step
columnOps({ resizeStep: 16 });

// A column can opt out of resizing on its own, whatever the feature allows.
{ id: 'status', header: 'Status', width: 110, resizable: false }

// Starting state lives on the column, not on the feature.
{ id: 'name', header: 'Name', width: 200, pinned: 'left' }
{ id: 'country', header: 'Country', width: 150, hidden: true }

<!-- The toolbar carries the chooser; place it yourself when you compose
     the chrome by hand. It lists only the columns the app declared, so the
     selection checkbox and the row grip never appear in it. -->
<Grid.Root {grid}>
  <Grid.Toolbar>
    <Grid.ColumnChooser />
  </Grid.Toolbar>
  <Grid.Viewport>
    <Grid.Header />
    <Grid.Body />
  </Grid.Viewport>
</Grid.Root>

import { getColumnOps } from '@sv5ui/datagrid';

const ops = getColumnOps(grid);

ops?.setColumnWidth('name', 240);
ops?.autoSizeColumn('email');   // to the widest rendered cell
ops?.autoSizeColumns();         // every visible column at once
ops?.moveColumn('team', 0);     // to a visible index; returns where it landed
ops?.pinColumn('name', 'left'); // 'left' | 'right' | null
ops?.setColumnHidden('country', true);

// The same six through the flat api
grid.api.setColumnWidth?.('name', 240);
grid.api.pinColumn?.('name', 'left');

// Folding a header group comes through here too, so the header's toggle,
// the column menu and your own call all announce and emit alike.
ops?.toggleGroup('pay');
ops?.setGroupCollapsed('pay', true);

// Each one emits: columnResized, columnMoved, columnPinned,
// columnVisibilityChanged, columnGroupToggled.
grid.events.on('columnMoved', ({ columnId, toIndex }) => save(columnId, toIndex));