# Define Headers and Columns

# Standard Column

The header property, the property of cheetahGrid.ListGrid, decides the behave and appearance of columns and header cells.
We can set this property by constructor arguments or instance property.

The header property must be set by objects array (Array<object>).
In the standard definition, each object consists of following properties.

Property Type Description LINK
caption string define the header caption ---
field string | function define the field name or function of the record to display in the cell ---
width string | number define the width of column link
minWidth string | number define the minimum width of column link
maxWidth string | number define the maximum width of column link
columnType string | object define the type of column link
style string | object | function define the style of column link
action string | object define the action of column link
<div class="sample1 demo-grid middle"></div>
1
/*
  record object properties
  {
    personid: 'ID',
    fname: 'First Name',
    lname: 'Last Name',
    email: 'Email',
    birthday: 'birthday',
  }
 */
const records = generatePersons(100);

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.sample1'),
  header: [
    {field: 'personid', caption: 'ID', width: 100},
    {field: 'fname', caption: 'First Name', width: 200},
    {field: 'lname', caption: 'Last Name', width: 200},
    {field: 'email', caption: 'Email', width: 250},
    {field: getBirthday, caption: 'Birthday', width: 200},
  ],
  frozenColCount: 1,
});
grid.records = records;

function getBirthday (rec) {
  const dateTimeFormat = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'numeric', day: 'numeric'})
  return dateTimeFormat.format(rec.birthday)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Multiple Header

To use multiple header, set the hierarchical structured Object to the header property.

<div class="sample2 demo-grid middle"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.sample2'),
  header: [
    {field: 'personid', caption: 'ID', width: 100},
    { /* multiple header */
      caption: 'name',
      columns: [
        {field: 'fname', caption: 'First Name', width: 200},
        {field: 'lname', caption: 'Last Name', width: 200},
      ],
    },
    {field: 'email', caption: 'Email', width: 250},
    {field: getBirthday, caption: 'Birthday', width: 200},
  ],
  frozenColCount: 1,
});
grid.records = records;

function getBirthday (rec) {
  const dateTimeFormat = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'numeric', day: 'numeric'})
  return dateTimeFormat.format(rec.birthday)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22