# Define Multiline Text Header

You can display multiline text in the header by setting the headerType property to 'multilinetext'.

<div class="sample1 demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "item",
      caption: "Item\nName",
      width: 100,
      headerType: "multilinetext",
    },
    {
      field: "amount",
      caption: "Regular\nPrice",
      width: 120,
      headerType: "multilinetext",
    },
  ],
});
grid.records = [
  { item: "abc", amount: 123 },
  { item: "def", amount: 456 },
  { item: "ghi", amount: 789 },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Note that simple text headers and headers with sort can also display multiline text using the style property multiline: true.

# Style Properties

Property	Description	Default
`lineHeight`	Define the amount of space used for lines	--
`autoWrapText`	Define whether to wrap automatically.	--
`lineClamp`	Define truncates text at a specific number of lines.	--

In addition to this, the Standard styles is available.

Standard Header Style

← Sort by Column Define Header Styles →