Skip to content

headerAlign

The place of the header’s title, over the column’s align.

Type'start' | 'center' | 'end'
Defaultthe column’s align
Live update (update())Yes — give the columns again (update({ columns }))
Declared inpackages/core/src/columns/defs.ts

'start', 'center' or 'end', logical sides. Without it the title follows align: a number column’s title sits at the end, as its cells. Give headerAlign: 'start' to keep every title at the start while the numbers stay at the end.

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' },
{ id: 'shelf', header: 'Shelf', type: 'number', headerAlign: 'start' },
],
getRowId: (r) => r.id,
messages: EN,
});