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}
});

Details

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

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

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

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

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

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

Чтобы размеры определённого столбца нельзя было менять, укажите его свойству 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},
    // ...
  ],
 
});