resizeColumn

enables/disables horizontal resizing of columns

boolean|WebixResizeColConfig resizeColumn;

Example

webix.ui({
    view: "datatable",
    resizeColumn: true
});
 
// define the size of area where resizing can start
webix.ui({
    view: "datatable",
    resizeColumn: { size: 6 }
});
 
// allow resizing only in the header
webix.ui({
    view: "datatable",
    resizeColumn: { headerOnly: true }
});
 
// enable resizing via a resizer icon
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true }
});
 
// resizing via a resizer icon without live mode
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true, live: false }
});

Default value:

false

Details

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

Note that resizeColumn: true enables resizing of columns by their borders regardless of the environment. This mode is not adapted for touch devices. To use column resizing on touch devices, you should enable column resizing via a resizer icon by setting resizeColumn: { icon: true }.

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

Pay attention that the size and headerOnly properties can't be applied when the icon and live properties are set in the resizeColumn configuration object.

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.ui({
    view: "datatable",
    resizeColumn: { size: 6 }
});

DataTables in Material and Mini skins have no borders by default. To restore the borders, make use of the following configuration options:

css:"webix_data_border"
css:"webix_header_border"
css:"webix_footer_border"

Allow resizing only in the header

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

webix.ui({
    view: "datatable",
    resizeColumn: { headerOnly: true }
});

Resizing via a resizer icon

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

// enable resizing via a resizer icon
webix.ui({
    view: "datatable",
    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:

// resizing via a resizer icon without live mode
webix.ui({
    view: "datatable",
    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 a resizer icon

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.ui({
  view:"datatable",
  // 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},
    // ...
  ],
 
});