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>

/*
  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);
}

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",
      // ...
    },
    // ...
  ],
  // ...
});

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,
      // ...
    },
    // ...
  ],
  // ...
});

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),
      },
      // ...
    },
    // ...
  ],
  // ...
});

Multiple Header

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

<div class="sample2 demo-grid middle"></div>

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);
}