width

How wide the column is, in CSS pixels.

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

What it does

A column is 150 px wide unless it says otherwise. The width stays within minWidth and maxWidth. A width the user gives (dragging the header’s edge, the menu, the keyboard) wins over this one and is part of the saved state; the column menu’s « Reset columns » gives this one back.

A column with a flex shares the room left instead, and width is only its share when the grid’s own width is not known yet. A width that is not a number of zero or more is refused with an invalid-column error, and the column is left out.

Example

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

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

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

Live demo

Tool is 160 px wide, Shelf 90 px, Notes takes what is left.

See also

• flex, minWidth, maxWidth, resizable.
• Columns.