resizable

false keeps the column at the width you give it.

Type	boolean
Default	true
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

With the columns() feature, the user resizes a column by dragging its header’s edge or from the keyboard, and « Fit this column » sizes it to its content; the column menu also offers « Widen » and « Narrow ». resizable: false takes the edge away, and none of these changes this column. Your code still sets its width (update({ columns }), a saved state).

Example

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { columns } from '@dzgrid/dom/columns';
import { EN_COLUMNS } from '@dzgrid/dom/locales/en-columns';
import { EN } from '@dzgrid/dom/locales/en';

type Tool = { id: string; name: string; shelf: number; notes: string };

const messages: GridMessages = { ...EN, text: { ...EN.text, ...EN_COLUMNS.text } };

createGrid<Tool>(document.getElementById('tools')!, {
  rows: [{ id: 't1', name: 'Hammer', shelf: 2, notes: 'Claw, 450 g' }],
  columns: [
    { id: 'name', header: 'Tool' },
    { id: 'shelf', header: 'Shelf', type: 'number', width: 90, resizable: false },
  ],
  getRowId: (r) => r.id,
  messages,
  features: [columns()],
});

Live demo

Drag the edge of Tool’s title: it resizes. Shelf’s has no edge to drag.

See also

• width, movable.
• Columns.