resizeColumn

enables/disables horizontal resizing of columns

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

Details

By default, the parameter is disabled.

When enabled, the method 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).

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 in pixels (the example above).

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".

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