# MultilineTextColumn

Show multiline text.

By specifying multilinetext for the columnType property,
You can display multiple lines of text in a cell.

# 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 Column Style

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

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "title",
      caption: "title",
      width: 150,
    },
    {
      field: "description",
      caption: "description",
      width: "calc(100% - 150px)",
      columnType: "multilinetext",
    },
  ],
  frozenColCount: 1,
  defaultRowHeight: 100,
  headerRowHeight: 40,
});
grid.records = [
  {
    title: "Lorem ipsum",
    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
  },
  {
    title: "multilinetext",
    description: `By specifying 'multilinetext' for the 'columnType' property,
You can display multiple lines of text in a cell.`,
  },
  {
    title: "multilinetext",
    description: `プロパティ'columnType'に'multilinetext'を指定することで、  
セルに複数行テキストを表示することができます。  `,
  },
];

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
34
35
36
37
38

# Aligns

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

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample2"),
  header: [
    {
      field: "title",
      caption: "title",
      width: 150,
    },
    //textAlign
    {
      field: "description",
      caption: "left",
      width: 1000,
      columnType: "multilinetext",
      style: { textAlign: "left" },
    },
    {
      field: "description",
      caption: "right",
      width: 1000,
      columnType: "multilinetext",
      style: { textAlign: "right" },
    },
    {
      field: "description",
      caption: "center",
      width: 1000,
      columnType: "multilinetext",
      style: { textAlign: "center" },
    },
    //textBaseline
    {
      field: "description",
      caption: "top",
      width: 1000,
      columnType: "multilinetext",
      style: { textBaseline: "top" },
    },
    {
      field: "description",
      caption: "middle",
      width: 1000,
      columnType: "multilinetext",
      style: { textBaseline: "middle" },
    },
    {
      field: "description",
      caption: "bottom",
      width: 1000,
      columnType: "multilinetext",
      style: { textBaseline: "bottom" },
    },
  ],
  frozenColCount: 1,
  defaultRowHeight: 200,
  headerRowHeight: 40,
});
grid.records = vm.records;

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# lineHeight

<div class="sample3 demo-grid large"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample3"),
  header: [
    {
      field: "title",
      caption: "title",
      width: 150,
    },
    {
      field: "description",
      caption: "lineHeight=3em top",
      width: 1000,
      columnType: "multilinetext",
      style: {
        lineHeight: "3em",
        textBaseline: "top",
      },
    },
    {
      field: "description",
      caption: "lineHeight=3em middle",
      width: 1000,
      columnType: "multilinetext",
      style: {
        lineHeight: "3em",
        textBaseline: "middle",
      },
    },
    {
      field: "description",
      caption: "lineHeight=3em bottom",
      width: 1000,
      columnType: "multilinetext",
      style: {
        lineHeight: "3em",
        textBaseline: "bottom",
      },
    },
  ],
  frozenColCount: 1,
  defaultRowHeight: 300,
  headerRowHeight: 40,
});
grid.records = vm.records;

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
34
35
36
37
38
39
40
41
42
43
44

# autoWrapText

<div class="sample4 demo-grid large"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample4"),
  header: [
    {
      field: "title",
      caption: "title",
      width: 150,
    },
    {
      field: "description",
      caption: "autoWrapText=true",
      width: 600,
      columnType: "multilinetext",
      style: {
        autoWrapText: true,
      },
    },
  ],
  frozenColCount: 1,
  defaultRowHeight: 100,
  headerRowHeight: 40,
});
grid.records = vm.records;

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

# lineClamp

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

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample5"),
  header: [
    {
      field: "title",
      caption: "title",
      width: 150,
    },
    {
      field: "description",
      caption: "lineClamp=2 autoWrapText=true",
      width: 600,
      columnType: "multilinetext",
      style: {
        autoWrapText: true,
        lineClamp: 2,
      },
    },
    {
      field: "description",
      caption: 'lineClamp="auto" autoWrapText=true',
      width: 600,
      columnType: "multilinetext",
      style: {
        autoWrapText: true,
        lineClamp: "auto",
      },
    },
    {
      field: "description",
      caption: "lineClamp=2 textOverflow=ellipsis",
      width: 600,
      columnType: "multilinetext",
      style: {
        lineClamp: 2,
        textOverflow: "ellipsis",
      },
    },
  ],
  frozenColCount: 1,
  defaultRowHeight: 60,
  headerRowHeight: 40,
});
grid.records = vm.records;

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
34
35
36
37
38
39
40
41
42
43
44

← IconColumn BranchGraphColumn →