# 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>
1
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
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.