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},
    // ...
  ],
 
});

Related sample:  Datatable: Deny Resizing for a Column

See also
Наверх
If you have not checked yet, be sure to visit site of our main product Webix javascript component library and page of tree grid ui product.