npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

vue-cheetah-grid

0.13.0 • Public • Published

Cheetah Grid - Vue Component

GitHub npm npm npm npm npm Build Status
NPM

Install using npm

npm install -S vue-cheetah-grid

Usage Examples

<template>

<template>
  <c-grid
    :data="records"
    :frozen-col-count="1">
    <!-- define checkbox -->
    <c-grid-check-column
      field="check"
      width="50">
    </c-grid-check-column>
    <c-grid-column
      field="personid"
      width="85"
    >
      ID
    </c-grid-column>
    <!-- multiple headers -->
    <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>
    <!-- define button -->
    <c-grid-button-column
      caption="SHOW REC"
      width="120"
      @click="onClickRecord">
    </c-grid-button-column>
  </c-grid>
</template>

<script> use global

import CGrid from 'vue-cheetah-grid'
 
Vue.use(CGrid)

<script> use local

<script>
import * as cGridAll from 'vue-cheetah-grid'
 
export default {
  name: 'App',
  components: {
    ...cGridAll
  },
  // ...
}
</script>

Please refer to the documents for details

Available Vue Component tag names

Component Tag Name Function Note
<c-grid> Grid ---
<c-grid-column> Column definition to display in the grid ---
<c-grid-column-group> Definition of column group when multiple header is displayed ---
<c-grid-button-column> Button column definition component for button column definition
<c-grid-check-column> Checkbox column definition component for checkbox column definition
<c-grid-input-column> Input column definition component for input column definition
<c-grid-menu-column> Menu column definition component for menu column definition
<c-grid-link-column> Link column definition component for linkable column definition
<c-grid-icon-column> Icon column definition component for icon column definition
<c-grid-percent-complete-bar-column> Percent complete bar column definition component for Percent complete bar column definition

Please refer also to the Available Vue Components


Please refer to the documents for details

License

See the LICENSE file for license rights and limitations (MIT).

install

npm i vue-cheetah-grid

Downloadsweekly downloads

238

version

0.13.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability