vue-cheetah-grid

Cheetah Grid - Vue Component

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

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

const app = createApp(App);

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

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