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