Skip to content
ZenGrid

Sizing & Resizing

Community

Introduction

Section titled “Introduction”

Every column has a width and optional min/max constraints. Users can drag the edge of a header to resize (on by default), and you can resize, auto-fit, or constrain columns programmatically through grid.columns.

Widths and constraints

Section titled “Widths and constraints”

Set widths per column in the definition. Constraints clamp both user drags and programmatic resizes.

columns: [
  { field: 'name', header: 'Name', width: 240, minWidth: 120, maxWidth: 400 },
  { field: 'status', header: 'Status', width: 140, resizable: false },
]

A grid-level colWidth provides the fallback width for columns without an explicit width.

Resize behavior

Section titled “Resize behavior”

Resizing is enabled by default. Tune it with columnResize, or turn it off with enableColumnResize: false.

const grid = new Zengrid(el, {
  rowCount,
  colCount,
  rowHeight: 36,
  colWidth: 160,
  enableColumnResize: true,
  columnResize: {
    resizeZoneWidth: 6,     // px hit-zone on the column edge
    defaultMinWidth: 30,
    defaultMaxWidth: Infinity,
    showHandles: true,      // visible resize handles
    showPreview: true,      // preview line while dragging
    autoFitOnLoad: false,   // auto-fit all columns on first render
    autoFitSampleSize: 100, // rows sampled when auto-fitting
    autoFitPadding: 16,
    skipHeaderOnAutoSize: false,
  },
  columns,
});

Programmatic sizing — grid.columns

Section titled “Programmatic sizing — grid.columns”
interface ColumnApi {
  resize(col: number, width: number): void;
  autoFit(col: number): void;
  autoFitAll(): void;
  setConstraints(col: number, constraints: { minWidth: number; maxWidth: number }): void;
  updateResizeHandles(): void;
}
grid.columns.resize(0, 300);                       // set column 0 to 300px
grid.columns.autoFit(1);                            // fit column 1 to its content
grid.columns.autoFitAll();                          // fit every column
grid.columns.setConstraints(2, { minWidth: 80, maxWidth: 320 });

Try it live

Section titled “Try it live”

Each tab isolates one dimension of sizing. Edit the snippet — change a width, a constraint, or the columnResize block and the grid re-renders. The Programmatic tab adds buttons that drive grid.columns without touching the code.

Drag the right edge of a header to resize. Name clamps between 140–420px; Status sets resizable:false so it stays put. Change a width or a min/max and the grid re-renders.