resizeColumn

enables/disables horizontal resizing of columns

 let resizeColumn: boolean|WebixResizeRowColConfig

Example

webix.grid({
  resizeColumn:true
});

// define the size of area where resizing can start
webix.grid({
  resizeColumn:{size:6}
});

// allow resizing only in the header
webix.grid({
  resizeColumn:{headerOnly:true}
});

  // enable resizing via a resizer icon
webix.grid({
  resizeColumn: { icon: true }
});

// non-live resizing via a resizer icon
webix.grid({
  resizeColumn: { icon: true, live: false }
});

Default value: false

Details

By default, the parameter is disabled. When enabled, the parameter doesn’t actually resize the grid. After a page is refreshed, the size returns to the initial one (provided that you haven’t saved the state of the grid).

When set as an object, the resizeColumn config can have the following properties:

size - (number) defines the size of the area where resizing can be activated
headerOnly - (boolean) enables resizing only in the column header
icon - (boolean) enables column resizing via a resizer icon. Additionally, provides the ability to resize columns on touch devices
live - (boolean) activates live column resizing via a resizer icon, true by default. Works only with the enabled icon property

Define the size of area where resizing can start

To change a column size, the user must drag its right border. To spread the area, where the mouse pointer can grab and drag the border, define the size property in pixels:

webix.grid({
  resizeColumn: { size: 6 }
});

Allow resizing only in the header

To provide resizing only in the column header, enable the headerOnly property in the resizeColumn configuration object:

webix.grid({
  resizeColumn: { headerOnly: true }
});

Resizing via an icon resizer

To provide column resizing via a resizer icon, use the icon property in the resizeColumn configuration object:

// enable resizing via a resizer icon
webix.grid({
  resizeColumn: { icon: true }
});

It adds a resizer icon to each valid column. Dragging the icon resizes the corresponding column. This mode provides the ability to resize columns on touch devices.

Live resizing works together with the icon: true property, it is enabled by default. You can disable it by setting live: false within the resizeColumn configuration object:

// non-live resizing via a resizer icon
webix.grid({
  resizeColumn: { icon: true, live: false }
});

Disabling live resizing is recommended when working with a large number of columns, as it reduces performance overhead.

Additional notes on column resizing via an icon resizer

Resizers are rendered for both headers and footers, when they are enabled.
By default, resizers appear on the last row of headers and the first row of footers. This can be overridden via the resizerIcon property in the header config object. Setting resizerIcon: true explicitly renders the resizer in that specific header row/cell.
When a header has a colspan defined, resizerIcon applies to the correct target column header (e.g., for right-positioned resizers -> last column in that span).
When a column has resize: false specified, the resizer will not be displayed in that column’s header. If the header has a colspan defined, the target is adjusted accordingly.
Enabling the column resizing via icon: true applies default padding to header cells (where appropriate), regardless of whether the resizer is visible.

Disable resizing of a particular column

You can disable resizing of a particular column by setting its resize property to false:

webix.grid({
  // enable column resizing
  resizeColumn: true,
  columns:[
    // disable resizing of the "rank" column
    { id:"rank", resize:false, header:"", css:"rank", width:50},
    { id:"title", header:"Film title",  fillspace:true},
    // ...
  ],

});

you can check the full snippet DataGrid: Deny Resizing for a Column