# Define Column Width
You can set the width of each column by using width
property.
If nothing is set to width
property, the value of defaultColWidth
(property in grid
) is used.
You can use %
, calc()
or auto
by setting a string to the width
property.
You can also set the minimum and maximum widths by setting the minWidth
and maxWidth
properties.
<div class="sample1 demo-grid middle"></div>
1
const records = generatePersons(100);
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{field: 'check', caption: '', columnType: 'check', action: 'check', minWidth: 50, maxWidth: 50},
{field: 'personid', caption: 'ID', width: '10%', minWidth: '50px', maxWidth: '50%'},
{field: 'fname', caption: 'First Name', width: 'auto', minWidth: '120px'},
{field: 'lname', caption: 'Last Name', width: 'auto', minWidth: '120px'},
{field: 'email', caption: 'Email', width: 'calc(60% - 110px)', minWidth: '120px'},
],
defaultColWidth: 50,
});
grid.records = records;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14