Cheetah Grid - Vue Component

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).