resizeColumn

включает/выключает возможность изменения ширины колонки через интерфейс

boolean|object resizeColumn;

Example

webix.ui({
    view: "datatable",
    resizeColumn: true
});
 
// определяет область вокруг границы между колонками,
// начиная с которой можно перетаскивать границу
webix.ui({
    view:"datatable",
    resizeColumn:{ size:6 }
});
 
// позволяет перетаскивать только границы хедера
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 }
});

Details

По умолчанию параметр false.

Само свойство не изменяет ширину колонок datatable. После обновления страницы ширина всех колонок станет исходной, если вы не сохранили состояние таблицы.

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

Чтобы изменить ширину колонки, пользователь должен перетащить границу между колонками. Чтобы облегчить жизнь пользователю, вы можете расширить зону вокруг границы, начиная с которой можно границу перетаскивать. Сделать это можно с помощью настройки size (задается в пикселях, см. пример выше).

webix.ui({
    view: "datatable",
    resizeColumn: { size: 6 }
});

У таблиц с темами Material и Mini между колонками границы не отображаются. Чтобы их вернуть, используйте эти css классы для datatable:

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.

Как отключить возможность изменения ширины определённого столбца

Чтобы размеры определённого столбца нельзя было менять, укажите его свойству resize значение false:

webix.ui({
  view:"datatable",
  // разрешаем менять размеры всех столбцов
  resizeColumn: true,
  columns:[
    // запрещаем менять размеры столбца "rank"
    { id:"rank", resize:false, header:"", css:"rank", width:50},
    { id:"title", header:"Film title",  fillspace:true},
    // ...
  ],
 
});