# Getting Started with Vue.js

# Installation

# Via npm

npm (opens new window)

npm install -S vue-cheetah-grid
1
import vueCheetahGrid from 'vue-cheetah-grid'

Vue.use(vueCheetahGrid)
1
2
3

# Via CDN

npm (opens new window)

<script src="https://unpkg.com/cheetah-grid@1.1"></script>
<script src="https://unpkg.com/vue-cheetah-grid@1.1"></script>
1
2
Vue.use(vueCheetahGrid)
1

WARNING

This usage only supports Vue.js v2.

# Vue Instance & Template

Please refer to the more documents for details

<div style="height: 500px; border: solid 1px #ddd;">
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <!-- define checkbox -->
    <c-grid-check-column
      field="check"
      width="50" />
    <c-grid-column
      field="personid"
      width= "85"
    >
      ID
    </c-grid-column>
    <!-- multiple header -->
    <c-grid-column-group
      caption="Name">
      <c-grid-input-column
        field="fname"
        width="20%"
        min-width="150"
      >
        First Name
      </c-grid-input-column>
      <c-grid-input-column
        field="lname"
        width= "20%"
        min-width="150"
      >
        Last Name
      </c-grid-input-column>
    </c-grid-column-group>
    <!-- button -->
    <c-grid-button-column
      caption="SHOW REC"
      width="120"
      @click="onClickRecord"
    />
  </c-grid>
</div>
<div class="grid-sample" ></div>
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
export default {
  data() {
    return {
      records: generatePersons(1000)
    }
  },
  methods: {
    onClickRecord(rec) { alert(JSON.stringify(rec)); }
  }
};
1
2
3
4
5
6
7
8
9
10