Cheetah Grid

# CGridBranchGraphColumn

Defines branch graph column.

# Vue Template Structure

<div class="demo-grid large">
  <c-grid
    :data="records">
    <c-grid-branch-graph-column
      :width="200"
      cache
      field="command">
      Graph
    </c-grid-branch-graph-column>
  </c-grid>
</div>
1
2
3
4
5
6
7
8
9
10
11
const records = [
  {
    command: [
      { command: "commit", branch: "main" },
      { command: "tag", branch: "main", tag: "v1.1.0" },
    ],
  },
  {
    command: [{ command: "commit", branch: "develop2" }],
  },
  {
    command: [{ command: "merge", branch: { from: "main", to: "develop2" } }],
  },
  {
    command: [{ command: "merge", branch: { from: "develop3", to: "main" } }],
  },
  {
    command: [{ command: "commit", branch: "develop2" }],
  },
  {
    command: [
      { command: "branch", branch: { from: "main", to: "develop3" } },
      { command: "commit", branch: "develop3" },
    ],
  },
  {
    command: [{ command: "branch", branch: { from: "main", to: "develop2" } }],
  },
  {
    command: [{ command: "merge", branch: { from: "develop", to: "main" } }],
  },
  {
    command: [{ command: "commit", branch: "develop" }],
  },
  {
    command: [
      { command: "commit", branch: "main" },
      { command: "tag", branch: "main", tag: "v1.0.0" },
      { command: "branch", branch: { from: "main", to: "develop" } },
    ],
  },
  {
    command: [
      { command: "branch", branch: "main" },
      { command: "commit", branch: "main" },
    ],
  },
];
export default {
  data() {
    return {
      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

# Slots

# default slot

Use this slot to set the header caption

# Properties

# Optional Properties

Name Type Description Default
field object|string|function Defines a column data field undefined
width number|string Defines a default column width undefined
min-width number|string Defines a column min width undefined
max-width number|string Defines a column max width undefined
column-style object|string|function Defines a column style. Same as the style property of the JS API. undefined
action object|string|function Defines an action undefined
caption string|function Defines a header caption ''
cache boolean Enable cache undefined
colspan number|string Defines the layout colspan.
This property can be used when defining in the layout-header and layout-body slots.		 undefined
filter string|function Defines a vue filter name undefined
header-action object|string|function Defines a column header action. Same as the headerAction property of the JS API. undefined
header-field string Defines a column header data field undefined
header-icon object|string Defines a header icon undefined
header-style object|string|function Defines a column header style. Same as the headerStyle property of the JS API undefined
header-type object|string|function Defines a column header type. Same as the headerStyle property of the JS API undefined
icon object|string|function Defines an icon. Same as the icon property of the JS API. undefined
message object|string|function Defines a message generation method. Same as the message property of the JS API. undefined
rowspan number|string Defines the layout rowspan.
This property can be used when defining in the layout-header and layout-body slots.		 undefined
sort boolean|string|function Defines a sort. See "Sort by Column" for detail. undefined
start string Defines a start type undefined

# Methods

Name Return Type Description
invalidate --- Redraws the whole grid.

← CGridButtonColumn →