Cheetah Grid - Vue Component

It supports Vue 2 and Vue 3.

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>

Use Components Globally

Vue3:

import { createApp } from "vue";
import CGrid from "vue-cheetah-grid";

const app = createApp(App);

app.use(CGrid);

Vue2:

import Vue from "vue";
import CGrid from "vue-cheetah-grid";

Vue.use(CGrid);

Use Components Locally

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

There are other components available as well.

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