vue-cheetah-grid

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

    323

    Version

    1.7.6

    License

    MIT

    Unpacked Size

    340 kB

    Total Files

    26

    Last publish

    Collaborators

    • ota-meshi
    • future_oss