In this chapter you will learn how to set sizes for different DataTable elements and then change them, if needed.
We will consider 3 elements:
and 3 possible situations (scenarios) for them:
The width and height of a datatable must be set through number values. The usage of string values is incorrect and will cause breaks in the sizing logic.
webix.ui({
view:"datatable",
height:400,
width:300
});
By default, DataTable adjusts to the parent container size that gives us 2 ways to set the fixed size for it:
Setting the fixed size for DataTable
//way 1
<div id="box" style="width:300px;height:400px;"></div>
webix.ui({
container:"box",
view:"datatable",
// datatable configuration
});
//way 2
<div id="box"/>
webix.ui({
container:"box",
view:"datatable",
height:400,
width:300,
// other config settings
});
Related sample: Adjusting to the Parent Container
Related sample: Sizing through the 'Width', 'Height' Parameters
Fixed column width
By default, datatable columns feature fixed size of 100px. To change it, you should either:
Setting different widths for columns
webix.ui({
view:"datatable",
columns:[
{ id:"title", header:"Film title" , width:80},
{ id:"title", header:"Release year" , minWidth:50}
]
});
Altering common width for all columns
webix.ui({
view:"datatable",
columnWidth:200,
columns:[
{ id:"title", header:"Film title"},
{ id:"title", header:"Release year"}
]
});
Relative Sizing
If you set widths for columns and their sum is less than the width of the parent container, you can use the fillspace attribute to force some of columns to widen for filling the unused space.
Using attribute fillspace
webix.ui({
view:"datatable",
columns:[
{ id:"title", header:"Film title", fillspace:true},
// more columns
]
});
Related sample: Adjusting Columns to the Parent Container
There can be more than one fillspace in the datatable; in this case width will be calculated on the base of a proportion defined by numeric values:
webix.ui({
view:"datatable",
columns:[
{ id:"id", header:"ID", fillspace:1},
{ id:"title", header:"Film title", fillspace:4}
]
});
In the above code the title column is 4 times bigger than the id column, which is 20 to 80 percent relation.
If you want to adjust the width of a column to the related content size, you can use the adjust attribute. It is defined for the needed column individually and features the following modes:
Adjusting the column width to fit the content size
webix.ui({
view:"datatable",
columns:[
{ id:"title", header:"Film title", adjust:"data"},
{ id:"rank", header:"Rank", adjust:"header"},
{ id:"votes", header:"Votes", adjust:true}
// more columns
]
})
Related sample: Adjusting Columns to the Content
Note that the resulting column width after adjusting won't be smaller than minWidth for this column provided that the latter is set.
In case of a large dataset, you can limit the number of rows that will take part in the calculation of the maximum column width with the help of the adjustBatch attribute of the column config. The property works in tandem with the adjust:"data" or adjust:true attributes.
webix.ui({
rows:[
{ view:"datatable",
columns:[
{id:"id"},
{id:"title", adjust:"data", adjustBatch:50},
{id:"title", adjust:true}
],
//data count is big
data:grid_data
}
]
});
To set the fixed height for a row, you should use $height while defining the data you will load into DataTable. If you set the height in such a way, it will save its value regardless of any other enabled size parameters (e.g. - autoheight).
Note that you need to provide the fixedRowHeight:false setting for the datatable as well, to avoid breaks in the scroll or editors position.
Setting different heights for rows
webix.ui({
view:"datatable",
fixedRowHeight:false,
data:[
{ $height:20, id:1, title:"The Shawshank Redemption", year:1994},
{ $height:40, id:2, title:"The Godfather", year:1972},
// other data fields
]
});
Related sample: Setting Custom Size for Rows
Autosizing to parent container
DataTable automatically adjusts to the size of a parent container provided that no content autosizing is not enabled.
To make the DataTable fill the entire width, you should define fillspace for at least one of its columns:
webix.ui({
view:"datatable",
columns:[
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Year", width:100}
]
});
In this case, title column will be calculated as container width - 100.
Autosizing to content
You can enable width, height (or both of them) autosizing to adjust DataTable to the size of its content horizontally or vertically. Autosizing is enabled by the following parameters:
DataTable autosizing
webix.ui({
view:"datatable",
autoheight:true,
autowidth:true
});
Related sample: Height and Width Autosizing
By resizing we mean 2 possible scenarios:
Related sample: Row Auto-Height
To enable the possibility to resize columns (rows) by mouse you should use one of the following parameters (or both of them at once):
Enabling the possibility to resize columns and rows by mouse
webix.ui({
view:"datatable",
resizeColumn:true,
resizeRow:true
});
For these resizing options there exist relevant events onRowResize and onColumnResize.
Related sample: Column and Row Resizing
If you use the Material skin, you need to define column borders to visualize resize zones by specifying the related CSS classes. Please, check the related article for instructions.
You can also define the size of the area where resizing can be activated. You can do this by setting the resizeRow or resizeColumn parameters and passing an object with the size property to them:
webix.ui({
view:"datatable",
resizeColumn: {size: 6},
resizeRow: {size: 6}
});
Related sample: Size of Resize Area
One more resizing possibility is to limit the area allowed for resizing to the datatable header.
It can be achieved by specifying the resizeRow or resizeColumn parameters and passing an object with the headerOnly property set to true to them:
webix.ui({
view:"datatable",
resizeColumn: {headerOnly:true},
resizeRow: {headerOnly:true}
});
Related sample: Resize within Header Only
For dynamic resizing of DataTable elements, the library offers the resize() method. When you change size of some element and call this method, child(parent) container of the calling element will adjust to his new size.
Adjusting the parent container to the DataTable size
grid = webix.ui({
view:"datatable",
// datatable configuration
})
grid.define("width", 700);
grid.resize();
Related sample: Dynamic Adjusting to the Parent Container
In some situations you may need to adjust an element to the size of the outer parent HTML container. In such the situation you may use method adjust() instead of resize():
Adjusting DataTable to the size of the parent container
grid = webix.ui({
container:"box",
view:"datatable",
// datatable configuration
})
webix.toNode("box").style.width = "700px";
grid.adjust();
Related sample: Dynamic Adjusting to the Parent Container
The resize() and adjust() methods can lead to one and the same effect. For example, you have DataTable placed into a 'div' container, named as 'box'. The initial height of DataTable is 50 px. You want to increase it to 80 px. Possible solutions can look as shown in the table below:
Image | Related code |
---|---|
![]() |
|
![]() |
|
You can use events to call the mentioned above methods:
Adjusting DataTable to the size of a window, its placed into
webix.event(window, "resize", function(){ grid.adjust(); })
Related sample: Sizing and Events
To dynamically adjust column width or row height to the size of their content, you can use the corresponding Datatable API.
Adjusting column width
The adjustColumn(id) method adjusts the width of a chosen column specified by its ID.
The method takes two parameters:
datatable.adjustColumn("title");
datatable.adjustColumn("title", "header");
The adjustment modes are:
Adjusting row height
The adjustRowHeight(id) method adjusts the height of all rows based on the cell content of a particular column or all columns.
Note that the method can slow down the application.
The method takes two optional parameters:
Note that you need to set fixedRowHeight to false for your datatable, otherwise the method will not have any visible result.
webix.ui({
view:"datatable",
fixedRowHeight:false,
columns:[
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Year", width:100}
]
});
// adjusts the height of each row to
// the height of the "title" column cells
dtable.adjustRowHeight("title");
// adjusts the height of each row to the highest cell in it
dtable.adjustRowHeight();
The row height is adjusted to:
If you want to apply auto-sizing just after data loading, you can use the following code:
webix.ui({
view:"datatable",
columns:[
{ id:"rank", width:40, header:"", css:"rank"},
{ id:"title", width:380, header:"Film title" },
{ id:"year", width:160, header:"Released" },
{ id:"votes", width:120, header:"Votes" }
],
fixedRowHeight:false,
on:{
"onresize":webix.once(function(){
this.adjustRowHeight("title", true);
})
}
});
By default, scrolling (vertical and horizontal) is enabled in DataTable. It can be disabled by parameters scrollY, scrollX.
Disabling vertical scrolling
grid = webix.ui({
view:"datatable",
scrollY:false
});
You can also force DataTable to be scrolled just by whole rows, i.e. you won't be able to scroll along the full length of rows. The related parameter you should enable is scrollAlignY:
Scrolling DataTable by whole rows
grid = webix.ui({
scrollAlignY:true
});
Related sample: Different Scrolling Behaviours
Back to top