jquery datatable adjust columns on resize

Related sample: Dynamic Adjusting to the Parent Container

The usage of string values is incorrect and will cause errors in the sizing logic. The width and height of a datatable must be set through number values. You can also read about sizing in Webix tutorials. In this chapter you will learn how to set and change sizes for 3 different DataTable elements: This extension also has a few extra api functions which can be called by using the created DataTables instance.Start UI Widgets DataTable Configuration Sizing and Resizing Sets a fixed header and tbody height with scroll functionality. scrollY: number much like the DT scrollY.stateSave: boolean set to true if you wish to save the column width states using the DT default state saving mechanism.If set to true, when a column is resized, the neighbouring column is left untouched and the table shifts accordingly. Default behaviour is that when a column is resized the neighbouring column expands/shrinks accordingly. resizeTable: boolean set to true if you want the entire table to be shifted when a column is resized.minColumnWidth: number must be equal too or greater than the sum of the cell's padding (left + right).

The DataTables installation manual also has details on how to use package managers with DataTables. Please see the DataTables NPM and Bower installation pages for further information. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name. If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name dt-colresize. IE 10+ (for scrollY + fixed header feature).IE 8, 9 (without scrollY + fixed header feature).Use 3.1.1 if you can until 3.3.x is available :)ĬolResize adds the ability for the end user to click and drag column headers to resize a DataTables table. Doesn't always work under jQuery version 3.2.x:

Jquery datatable adjust columns on resize