Zum Inhalt springen
Jefferson Gonçalves
← Zurück zu den Projekten

Vue Tables

#Vue Tables

Note: using strings as templates is deprecated and will be removed in an upcoming release. Please use functions instead.

npm version Build Status

Users of VueJs 2 please use this package instead.

This Vue package offers an easy and intuitive way of displaying Bootstrap-styled grids with data coming either from the client or from the server.

#Dependencies

  • Vue.js (>=1.0). Required. (NOT 1.0.27)
  • Bootstrap (CSS). Optional.
  • vue-resource (>=0.9.0) (server-side component only)

#Installation

#Option 1

Compile the code using browserify with the stringify transform, or webpack

npm install vue-tables

Require the script:

var VueTables = require('vue-tables');

#Option 2

Import the compiled standalone file into your HTML, which will expose a global VueTables variable.

#Usage

#Register the component(s)

Vue.use(VueTables.client, options);

Or/And

Vue.use(require('vue-resource'));
Vue.use(VueTables.server, options);

If you wish to customize the table template itself, pass the altered version as the third argument, like so:

Vue.use(VueTables.client, {}, { template: require('./my-template.html') });

#Client Side

Add the following element to your page wherever you want it to render. Make sure to wrap it with a parent element you can latch your vue instance into.

<div id="people">
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>

Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:

new Vue({
  el:"#people",
  data: {
    columns:['id','name','age'],
    tableData: [
      {id:1, name:"John",age:"20"},
      {id:2, name:"Jane",age:"24"},
      {id:3, name:"Susan",age:"16"},
      {id:4, name:"Chris",age:"55"},
      {id:5, name:"Dan",age:"40"}
    ],
    options: {
      // see the options API
    }
  }
});

Important: when loading data asynchronously add a v-if conditional to the component along with some loaded flag, so it will only compile once the data is attached.

Check out the live client-side demo

#Server side

<div id="people">
  <v-server-table url="/people" :columns="columns" :options="options"></v-server-table>
</div>

Javascript:

new Vue({
    el:"#people",
    data: {
      columns:['id','name','age'],
      options: {
       // see the options API
     }
  }
});

All the data is passed in the following GET parameters: query,limit,page,orderBy,ascending,byColumn. You need to return a JSON object with two properties:

data array - An array of row objects with identical keys.

count number - Total count before limit.

#Implementations

I have included an Eloquent implementation for Laravel Users. If you happen to write other implementations for PHP or other languages, a pull request would be most welcome, under the following guidelines:

a. Include the class under ./server/{language}.

b. Name it according to convention: {concrete}VueTables.

c. if this is the first implementation in this language add an interface similar to the one found in the PHP folder.

d. Have it implement the interface.

e. TEST IT.

#Methods

Use refs to get the instance.

  • setPage(page)
  • refresh() - server component only

#Events

vue-tables.loading (server-side)

Fires off when a request is sent to the server. Sends through the request data.

vue-tables.loaded (server-side)

Fires off after the response data has been attached to the table. Sends through the response.

You can listen to those two complementary events on a parent component and use them to add and remove a loading indicator, respectively.

vue-tables.error (server-side)

Fires off if the server returns an invalid code. Sends through the error

vue-tables.row-click

Fires off after a row was clicked. sends through the row

vue-tables.filtered (client-side)

Fires off after a filter was applied to the dataset. Send through the filtered subset.

#Custom Filters

Custom filters allow you to integrate your own filters into the plugin using Vue's events system.

#Client Side Filters

A. use the customFilters option to declare your filters, following this syntax:

  customFilters: [
    {
      name:'alphabet',
      callback: function(row, query) {
        return row.name[0] == query;
    }
    }
  ]

B. On your application broadcast an event when a filter was applied, and pass the query:

  this.$broadcast('vue-tables.filter::alphabet', query);

#Server Side Filters

A. use the customFilters option to declare your filters, following this syntax:

  customFilters: ['alphabet','age-range']

B. the same as in the client component.

#List Filters

When filtering by column, the listColumns option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter.

For example:

  options: {
    listColumns:{
      animal: [
        {id:1, text:'Dog'},
        {id:2, text:'Cat'},
        {id:3, text:'Tiger'},
        {id:4, text:'Bear'}
      ]
    }
  }

The values of this column should correspond to the values (id) passed to the list. They will be automatically converted to their textual representation.

#Options

Options are set in three layers, where the more particular overrides the more general.

  1. Pre-defined component defaults.
  2. Applicable user-defined defaults for the global Vue Instance. Passed as the second paramter to the Use statement.
  3. Options for a single table, passed through the options prop.

EXPLORE OPTIONS

CSS Note: to center the pagination apply text-align:center to the wrapping element

Neue Version verfügbar.