Cheetah Grid

# 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 | {get:function,set?:function} define the field name, getter function, or accessor object 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
30
31
32
33

# field property

field is one of the most basic properties. It provides the data to display from the record to the cell. You can choose and define one of the 3 formats.

# string format

Define the property name to get the cell data from the record as a string.

For example:

const grid = new cheetahGrid.ListGrid({
  // ...
  header: [
    // ...
    {
      field: "email",
      // ...
    },
    // ...
  ],
  // ...
});
1
2
3
4
5
6
7
8
9
10
11
12

# function format

Define the getter function that get the cell data from the record.

For example:

const grid = new cheetahGrid.ListGrid({
  // ...
  header: [
    // ...
    {
      field: (record) => record.email,
      // ...
    },
    // ...
  ],
  // ...
});
1
2
3
4
5
6
7
8
9
10
11
12

# object format

Define an object with a getter function that gets the cell data from the record and a setter function that sets the cell data to the record.

For example:

const grid = new cheetahGrid.ListGrid({
  // ...
  header: [
    // ...
    {
      field: {
        get: (record) => record.email,
        set: (record, newValue) => (record.email = newValue),
      },
      // ...
    },
    // ...
  ],
  // ...
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 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
23
24
25
26
27

← Define Column Width →