Vue-table

What is Vue-table

vue-table is Vue component based on Vue, Bootstrap and Ramda.

vue-table only works only with Vue 2.0

Feature

• pagination
• column filter
• search
• row click callback
• custom TD render
• page size change
• server-side
• use Vue2.0

Quick Look

How to use

import Vue from 'vue';
import Table from './table.vue';

<template>
<vue-table
    api="http://127.0.0.1:9090"
    v-on:clickTr="clickTrEvent"
    v-bind:refresh="refresh"
    v-bind:pageSize="pageSize"
    v-bind:columns="columns">
</vue-table>
</template>
<script>
export default {
    name: 'some-module',
    props: {
        api: {
            type: String,
            default: 'http://127.0.0.1:9090/'
        }
    },
    data() {
        return {
            refresh: false,
            pageSize: 5,
            columns: [
                {
                    field: 'id',
                    name: 'ID',
                    sortable: true,
                    searchable: true,
                    render: function(value, row) {
                        return '<code>custom column content: </code>' + value;
                    }
                }
            ]
        }
    },
    components: {
        'vue-talbe': Table
    },
    methods: {
        forceUpdate: function() {
            this.refresh = !this.refresh
        }
    },
    clickTrEvent: function(e, data) {
        // e, is the target click element
        // data, is the whole row data
        console.log(e, data);
    }
}
</script>

More Detail

• about clickTrEvent clickTrEvent is the callback when you click tr callback, it will exec callback with two arguments: event and the row data

  clickTrEvent: function(e, data) {
      // e, is the target click element
      // data, is the whole row data
  }
  

• about api api is the backend server address, Vue-table will use Http GET to fetch data

  props: {
      api: {
          type: String,
          default: 'http://127.0.0.1:9090/'
      }
  }
  

• about refresh refresh is sig, when you want Vue-table to refresh, you can toggle this sig

  forceUpdate: function() {
      this.refresh = !this.refresh
  }
  

• pageSize yes, it's the default pageSize

• columns this is the most important param, all supports params:

  • field // String, the backend data field
  • name // String, the th name
  • width // String, column width, eg: 20%
  • sortable // Boolean, if or not support sort
  • render // Function, this is where you can custom the td content

  {
      field: 'id',
      name: 'ID',
      sortable: true,
      searchable: true,
      render: function(value, row) {
          return '<code>custom column content: </code>' + value;
      }
  }
  

Dependence

Ramda, it's awesome

Notice

If you want to test the demo locally, you should has your own server serve on http://127.0.0.1:8089 The demo response data is:

{
  "actions": [
    {
      "id": 1,
      "action_key": "admin.action.create",
      "description": ""
    },
    ...
  ],
  "code": 200,
  "msg": "OK",
  "total": 9
}

Source

npm install
npm run dev

.
├── app.vue                 # This is main app
├── dialog                  # The dialog for edit and delete
│   └── dialog.vue
├── dropdown                # dropdown
│   ├── dropdown.vue
│   └── dropfilter.vue
├── main.js                 # main entry point
├── mixin                   # ajax mixin
│   └── methods.js
├── table                   # the core table
│   ├── loading.svg
│   ├── pagination.vue
│   └── table.vue
├── toast                   # the toast
│   ├── toast.js
│   └── toast.vue
└── utils                   # utils
    ├── ajax.js
    └── type.js

Liscense