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 }
});
 
// включить ресайзинг через иконку
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true }
});
 
// ресайзинг через иконку без live-режима
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true, live: false }
});

Details

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

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

resizeColumn: true включает ресайзинг столбцов по их границам вне зависимости от окружения. Этот режим не адаптирован для сенсорных устройств. Чтобы использовать ресайзинг столбцов на сенсорных устройствах, включите ресайзинг через иконку, задав resizeColumn: { icon: true }.

Если задан как объект, конфиг resizeColumn может содержать следующие свойства:

size - (number) размер области срабатывания ресайзинга
headerOnly - (boolean) ограничивает ресайзинг хедером столбца
icon - (boolean) включает ресайзинг через иконку. Поддерживает ресайзинг на сенсорных устройствах
live - (boolean) включает live-ресайзинг через иконку; по умолчанию true. Работает только при включённом свойстве icon

Свойства size и headerOnly не применяются, если в объекте конфигурации resizeColumn заданы свойства icon и live.

Настройка области срабатывания ресайзинга

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

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

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

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

Ресайзинг хедера

Чтобы ограничить ресайзинг областью хедера столбца, включите свойство headerOnly в объекте конфигурации resizeColumn:

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

Ресайзинг через иконку

Чтобы включить ресайзинг столбцов через иконку, используйте свойство icon в объекте конфигурации resizeColumn:

// включить ресайзинг через иконку
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true }
});

Иконка добавляется к каждому подходящему столбцу. Перетаскивание иконки изменяет ширину соответствующего столбца. Этот режим поддерживает ресайзинг столбцов на сенсорных устройствах.

Live-ресайзинг работает совместно со свойством icon: true и включён по умолчанию. Отключить его можно, задав live: false в объекте конфигурации resizeColumn:

// ресайзинг через иконку без live-режима
webix.ui({
    view: "datatable",
    resizeColumn: { icon: true, live: false }
});

Отключение live-ресайзинга рекомендуется при работе с большим числом столбцов - это снижает нагрузку на производительность.

Дополнительные замечания о ресайзинге через иконку

Иконки ресайзера отображаются и в хедерах, и в футерах, если они включены.
По умолчанию иконки появляются в последней строке хедеров и в первой строке футеров. Это можно переопределить через свойство resizerIcon в объекте конфигурации хедера. Явное указание resizerIcon: true принудительно отображает иконку в конкретной строке/ячейке хедера.
Если в хедере задан colspan, resizerIcon применяется к хедеру соответствующего целевого столбца (например, для иконок, выровненных по правому краю, это последний столбец в span).
Если для столбца задано resize: false, иконка ресайзера не отображается в его хедере. При наличии colspan в хедере целевой столбец определяется соответствующим образом.
Включение ресайзинга столбцов через icon: true добавляет отступы по умолчанию к ячейкам хедера (там, где это уместно), независимо от того, видна ли иконка.

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

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