matfish2/vue-tables-2

Vue.js 2 grid components

25.11.2021 - The previously premium version is now available freely:

• vue2: https://www.npmjs.com/package/vue-tables-2-premium
• vue3: https://www.npmjs.com/package/v-tables-3

The package is no longer maintained by the author.

About Vue Tables 2

Vue Tables 2 was created to give developers a fully featured tool-set for creating beautiful and useful data tables with Vue.js. Used in hundreds of commercial software applications, Vue Tables 2 is constantly growing, improving and getting new features.

Demo

Click here to see the client component in action and fiddle with the various options or here for a rudimentary server component demo.

Installation

Install with npm or via CDN, Read More.

Documentation

Please click here for GitBook documentation.

VueJS 1

Users of VueJS 1 should use this package.

vue-tables-2's Issues

Customize Styling

• Vue.js version: 2
• consumed using: webpack

I'm using bulma for styling and not bootstrap. Now problematically some class names are overlapping, but do not the same. Is there a possibility (I saw the one for table in the options) to customize most of the class names? What would be the intended way?

I especially would like to change the styling of the pagination.

Please Help me how to make custom template.

• Vue.js version: vue-tables-2
• Can anyone help me how to make custom template when using vue-table-2, example i want add 2 p element in td and display other value on it.
  Thank all.

Defined key for cell value

Is it currently possible to define the specific object key for each cell value?

Ex data:

var data = { age: 12, name: 'User', location: {city: 'Los Angelos', state: 'CA' }, email: '[email protected]' };

From with which I would be able to define that for "location", I'd like location.city to display?

How to apply event in template?

• Vue.js version:2.0.1
• consumed using: (webpack)
• FULL error message (including stack trace):

in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/project/company/company_list.vue
Module build failed: SyntaxError: Unexpected token (147:31)

  145 |                 cus: function(h, row) {
  146 |                      return <a target="_blank"
> 147 |                                @delelte="deleteMe"
      |                                ^
  148 |                             ><i class="glyphicon glyphicon-erase"></i></a>;
  149 |                 },
  150 |                 handle: function(h, row) {

 @ ./src/project/company/company_list.vue 5:18-106

• relevant code:

                cus: function(h, row) {
                     return <a target="_blank"
                               @delelte="deleteMe"
                            ><i class="glyphicon glyphicon-erase"></i></a>;
                },
                handle: function(h, row) {
                    var that = this;
                    return <a href="javascript:void(0);"
                              onClick={
                                function(){
                                  console.log(that.$router);
                                  that.$router.push({ path: '/tv/edit_vedio' });
                                }
                              }
                            >
                              <i class="glyphicon glyphicon-erase"></i>
                           </a>;
                }

• steps for reproducing the issue:
  I can't use event in the template, I think it's the problem with jsx can't use vue language. When I deal with the rout, I can use the global $router, but when I want to trigger the event in this instance, I can't get the event in mothods, should I use vuex to solve this problem?

Adding child row functionality

It would be immensely helpful to have an innate method to toggle a child row that has a single td with colspan equal to the number active cols.

For reference, here's DataTable's implementation: https://datatables.net/examples/api/row_details.html

SyntaxError: Unexpected token: name (bus) during gulp --production

Using https://github.com/verwilst/laravel5-vuejs2 , i have a basic Laravel 5.3 with Vuejs 2 setup and laravel-elixir.

Gulp --production works fine then.

Next, i run:

• npm install vue-tables-2
• npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
• create .babelrc as documented.

As soon as i add var VueTables = require('vue-tables-2'); to my app.js, i get the following error when running gulp --production:

[15:36:03] Using gulpfile /app/gulpfile.js
[15:36:03] Starting 'all'...
[15:36:03] Starting 'sass'...
[15:36:03] Finished 'sass' after 755 ms
[15:36:03] Starting 'webpack'...
{ Error
    at new JS_Parse_Error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)
    at semicolon (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2123:56)
    at simple_statement (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2314:73)
    at eval (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2183:19)
    at eval (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)
    at block_ (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2429:20)
  message: '/app/app.js: SyntaxError: Unexpected token: name (bus)',
  fileName: '/app/app.js',
  lineNumber: 254,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at unexpected (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)\n    at semicolon (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2123:56)\n    at simple_statement (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2314:73)\n    at eval (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2183:19)\n    at eval (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)\n    at block_ (eval at <anonymous> (/app/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2429:20)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

(Phoenix Framework) Brunch build failed rror: 'import' and 'export' may only appear at the top level

• Vue.js version: [email protected]/vue-tables-2#master
• consumed using: brunch
• FULL error message (including stack trace):

16 Dec 02:00:42 - info: compiling
16 Dec 02:00:44 - error: undefined of node_modules/vue-tables-2/lib/v-client-table.js failed. rror: 'import' and 'export' may only appear at the top level (6:0) 
16 Dec 02:00:44 - error: undefined of node_modules/vue-tables-2/lib/v-server-table.js failed. rror: 'import' and 'export' may only appear at the top level (5:4) 
16 Dec 02:00:44 - info: compiled 16 files into 2 files, copied 3 in 10.4 sec

• relevant code:

import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";
import VueResource from "vue-resource";
var VueTables = require( "vue-tables-2");

import Collection from "./collection.component";
import EndpointGroups from "./endpoint_groups.component";
Vue.use(VueTables.server);
Vue.use(VueRouter);
Vue.use(VueResource);

.brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
      babel: {
          ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

• steps for reproducing the issue:

brunch build

thanks any help :)

add checkbox to header

Is there a possibility to add a component to a header label?

I have a table, and the first column is a checkbox, so you can select a set of rows and perform an action to them. I would like to add a "select all" checkbox in the header but i dont see how i can do this. Can anyone help me with this?

Inline Templates?

• Vue.js version: 2.1.6
• consumed using: webpack
• FULL error message (including stack trace):
• relevant code:

                <v-server-table url="{{ url('messages/templates/data') }}" :columns="['id','name']"
                    :options="{
                        templates: {
                            name: function(h, row) {
                                return <a>Test</a>
                            }
                        }
                }"></v-server-table>

I am trying to pass in a template inline and I get "failed to compile template:"

Wraping the template like this: return '<a>Test</a>' works but it escapes the HTML. Is there a way to accomplish what I am trying to do?

Template HTML not rendering inside table

- Vue.js version: 2.0
- consumed using: WebKit
- FULL error message (including stack trace):
- relevant code: http://pastebin.com/Vg3z8Z0k
I'm not sure whats going on but for some reason the html inside the table isn't being rendered or processed.

Cannot render custom component?

• Vue.js version: 2.0.1
• consumed using: (browserify)
• FULL error message (including stack trace): [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component )
  http://127.0.0.8/assets/js/index.js
  Line 16392
• relevant code:

import EditLink from './editlink.vue'

var tableColumns = ['name', 'stock', 'sku', 'price', 'created_at']
var options = {
  pagination: {
    dropdown: true,
    chunk: 10
  },
  filterByColumn: true,
  texts: {
    filter: 'Search:'
  },
  datepickerOptions: {
    showDropdowns: true
  },
  templates: {
    edit: function (h, row) {
      return <edit-link></edit-link>
    },
    delete: function (h, row) {
      return <a href="javascript:void(0);" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-erase"></i></a>
    }
  }
}

export default {
  name: 'ItemList',
  data: function () {
    return {
      options: options,
      columns: tableColumns
    }
  },
  components: {
    EditLink: EditLink
  },
  methods: {
    showItem: function (id) {
      console.log(id)
    }
  }
}

// editlink.vue
<template>
  <div>
    <button v-on:click="this.showItem()" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
  </div>
</template>

<script>
  export default {
    name: 'EditLink',
    props: ['id']
  }
</script>

• steps for reproducing the issue:
  The component is REGISTERED, I can use it OUTSIDE the table. The delete renders but I need to change it too later like the edit link since I need to bind it with vue.

Pagination isn't reset when applying custom filter with client side table

Vue.js version: 2.1
consumed using: (browserify/webpack/rollup): webpack
FULL error message (including stack trace): N/A
relevant code: N/A
steps for reproducing the issue:
Client-Side Table
Switch to a page X (other than 1)
Add filter to the table which filters out most rows
Records won't be shown, since the table will still be on page X

This is an identical issue to #36, but the fix in #37 only applied to the server side component.

Row Callback

• Vue.js version: 2.0
• consumed using: webpack

@matfish2 are you planning / are you interested in adding a row class callback function? This would be useful for adding a custom class to couple of data, i.e.: closed itemas, overdue invoices, etc.

Error when rendering component

- Vue.js version: v6.6.0
- consumed using: webpack

When I try to use the template property in options, i got this error:
[Vue warn]: Error when rendering component

- relevant code: http://pastebin.com/hfsPtGN9

When I remove the template property from options, works as expected.
I miss something?

Module parse failed

I'm using vue.js 2.0 with laravel elixir, after installing 'vue-tables-2' and impotring in app.js I'm getting folowing error. I installed https://github.com/vuejs/babel-plugin-transform-vue-jsx this plugin nad created a 'webpack.config.js' file in my project root with:

module.exports = {
	module: {
		loaders: [{
			test: /\.jsx?$/,
			loader: 'babel',
			exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
		}]
	}
}

• Vue.js 2.0:
• consumed using: (elixir)
• FULL error message (including stack trace):

ERROR in ./~/vue-tables-2/lib/template.jsx
Module parse failed: E:\wamp64\www\green\node_modules\vue-tables-2\lib\template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.
| var perPage = require('./template/per-page.jsx')(h, this);
|
| return <div class={"VueTables VueTables--" + this.source}>
|   <div class="row">
|     <div class="col-md-6">
 @ ./~/vue-tables-2/lib/v-client-table.js 11:15-40
 @ ./~/vue-tables-2/index.js
 @ ./resources/assets/js/app.js

ERROR in ./~/vue-tables-2/lib/methods/render.js
Module parse failed: E:\wamp64\www\green\node_modules\vue-tables-2\lib\methods\render.js Unexpected token (17:9)
You may need an appropriate loader to handle this file type.
|           });
|
|   return <span class='VueTables__template'>{template}</span>
|
| }
 @ ./~/vue-tables-2/lib/mixins/methods.js 27:14-42
 @ ./~/vue-tables-2/lib/table.js
 @ ./~/vue-tables-2/lib/v-client-table.js
 @ ./~/vue-tables-2/index.js
 @ ./resources/assets/js/app.js

ERROR in ./~/vue-pagination-2/src/template.jsx
Module parse failed: E:\wamp64\www\green\node_modules\vue-pagination-2\src\template.jsx Unexpected token (8:8)
You may need an appropriate loader to handle this file type.
|   this.pages.map(function(page) {
|       items.push(
|         <li class={"VuePagination__pagination-item page-item "+this.activeClass(page)}>
|         <a class="page-link" href="javascript:void(0);"
|         on-click={this.setPage.bind(this, page)}>{page}</a>
 @ ./~/vue-pagination-2/src/Pagination.js 1:15-40
 @ ./~/vue-pagination-2/index.js
 @ ./~/vue-tables-2/lib/v-client-table.js
 @ ./~/vue-tables-2/index.js
 @ ./resources/assets/js/app.js

Feature request: add listener for childRow toggle

Please consider adding a listener to allow childRow to be triggered from another component or from the clickRow event.

Bus is not listening to event?

• Vue.js version: 2.0.1
• consumed using: browserify
• issue:

Trying to convert date string to moment using server side tables. console.log('test') does not run, do I have to import. Checked the bus value and it appears the $children is an empty array so I'm guessing the bus is not linked to the table. How do you listen to the event properly?

• relevant code:
  the html:
  <v-server-table url="/items" :columns="columns" :options="options" ref="listTable"></v-server-table>

the js:

import moment from 'moment'
import bus from 'vue-tables-2/lib/bus'
import ShowLink from './../../components/button/showlink.vue'
import EditLink from './../../components/button/editlink.vue'
import DeleteLink from './../../components/button/deletelink.vue'

var tableColumns = ['name', 'stock', 'sku', 'price', 'created_at']
var options = {
  pagination: {
    dropdown: true,
    chunk: 10
  },
  filterByColumn: true,
  dateColumns: ['created_at'],
  toMomentFormat: true,
  texts: {
    limit: 'Records: '
  },
  datepickerOptions: {
    showDropdowns: true
  },
  debounce: 1000,
  headings: {
    name: 'Nama',
    stock: 'Stok',
    sku: 'SKU',
    price: 'Harga',
    created_at: 'Tanggal',
    action: 'Actions'
  },
  templates: {
    action: function (h, row) {
      return <div class="btn-group">
        <show-link id={row.id} module="item"></show-link>
        <edit-link id={row.id} module="item"></edit-link>
        <delete-link id={row.id} module="item" table={this.$refs.listTable}></delete-link>
      </div>
    }
  },
  customFilters: [
    {
      name: 'formatDate',
      callback: function (row) {
        console.log(row.created_at)
        var value = row.created_at
        if (value == null) return ''
        var fmt = (typeof fmt === 'undefined') ? 'D MMM YYYY' : fmt
        return moment(value, 'YYYY-MM-DD').format(fmt)
      }
    }
  ]
}

export default {
  name: 'ItemList',
  data: function () {
    return {
      elink: '#',
      options: options,
      columns: tableColumns
    }
  },
  components: {
    ShowLink: ShowLink,
    EditLink: EditLink,
    DeleteLink: DeleteLink
  },
  mounted () {
    document.title = 'List Item - PT. Sukses Mandiri'
  },
  created () {
    this.$on('id-selected', function (e) {
      this.elink = '/item/edit/' + e
    })

    bus.$on('vue-tables.loaded', function () {
      console.log('test')
      bus.$emit('vue-tables.filter::formatDate')
    })
  }
}

is_empty is not defined

• Vue.js version: 2.1.7
• consumed using: webpack
• FULL error message (including stack trace):

created.js?a570:13 Uncaught ReferenceError: is_empty is not defined
    at module.exports (eval at <anonymous> (all-0d020c34f4.js:175), <anonymous>:13:7)
    at VueComponent.created (eval at <anonymous> (all-0d020c34f4.js:1637), <anonymous>:48:7)
    at callHook (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:2603:19)
    at VueComponent.Vue._init (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:3359:5)
    at new VueComponent (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:3478:12)
    at createComponentInstanceForVnode (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:2754:10)
    at init (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:2764:31)
    at createComponent (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:4115:9)
    at createElm (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:4058:9)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (all-0d020c34f4.js:133), <anonymous>:4509:7)
module.exports @ created.js?a570:13
created @ v-server-table.js?3ea7:50
callHook @ vue.common.js?e881:2603
Vue._init @ vue.common.js?e881:3359
VueComponent @ vue.common.js?e881:3478
createComponentInstanceForVnode @ vue.common.js?e881:2754
init @ vue.common.js?e881:2764
createComponent @ vue.common.js?e881:4115
createElm @ vue.common.js?e881:4058
patch @ vue.common.js?e881:4509
Vue._update @ vue.common.js?e881:2483
(anonymous) @ vue.common.js?e881:2457
get @ vue.common.js?e881:1661
Watcher @ vue.common.js?e881:1653
Vue._mount @ vue.common.js?e881:2456
Vue$3.$mount @ vue.common.js?e881:6080
Vue$3.$mount @ vue.common.js?e881:8454
init @ vue.common.js?e881:2770
createComponent @ vue.common.js?e881:4115
createElm @ vue.common.js?e881:4058
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
patch @ vue.common.js?e881:4509
Vue._update @ vue.common.js?e881:2483
(anonymous) @ vue.common.js?e881:2457
get @ vue.common.js?e881:1661
Watcher @ vue.common.js?e881:1653
Vue._mount @ vue.common.js?e881:2456
Vue$3.$mount @ vue.common.js?e881:6080
Vue$3.$mount @ vue.common.js?e881:8454
init @ vue.common.js?e881:2770
createComponent @ vue.common.js?e881:4115
createElm @ vue.common.js?e881:4058
patch @ vue.common.js?e881:4509
Vue._update @ vue.common.js?e881:2483
(anonymous) @ vue.common.js?e881:2457
get @ vue.common.js?e881:1661
Watcher @ vue.common.js?e881:1653
Vue._mount @ vue.common.js?e881:2456
Vue$3.$mount @ vue.common.js?e881:6080
Vue$3.$mount @ vue.common.js?e881:8454
init @ vue.common.js?e881:2770
createComponent @ vue.common.js?e881:4115
createElm @ vue.common.js?e881:4058
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
createChildren @ vue.common.js?e881:4166
createElm @ vue.common.js?e881:4091
patch @ vue.common.js?e881:4545
Vue._update @ vue.common.js?e881:2483
(anonymous) @ vue.common.js?e881:2457
get @ vue.common.js?e881:1661
Watcher @ vue.common.js?e881:1653
Vue._mount @ vue.common.js?e881:2456
Vue$3.$mount @ vue.common.js?e881:6080
Vue$3.$mount @ vue.common.js?e881:8454
initRender @ vue.common.js?e881:3053
Vue._init @ vue.common.js?e881:3360
Vue$3 @ vue.common.js?e881:3407
(anonymous) @ app.js?8b67:90
(anonymous) @ all-0d020c34f4.js:2399
__webpack_require__ @ all-0d020c34f4.js:20
(anonymous) @ all-0d020c34f4.js:64
(anonymous) @ all-0d020c34f4.js:67
util.js:211 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
ZA.j @ util.js:211
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:127
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:46
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:43
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:46
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:99
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:43
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:99
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:43
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:99
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:43
(anonymous) @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:99
hc @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:45
gc.cb @ js?key=AIzaSyB-rJgfGK5c2wH3TDTz2215sTI8vhDNmgo&sensor=false&libraries=places:99
(anonymous) @ common.js:1

• relevant code:

    <v-server-table ref="panelTable" url="/api/panels/find" :columns="columns" :options="options"></v-server-table>

• steps for reproducing the issue: I'm not sure I'm compiling correctly. I'm using laravel elixir and webpack. I got it to compile, but when I try and display the component I get the above error, which seems weird because on that file the is_empty file is definitely included. So I'm wondering if it didn't actually compile correctly?

I've read through the other issues on the compiling errors and and I can't quite tell how to implement the webpack implementation. So it could be that I did something wrong.

templates not returning html , browserify / laravel

require('./bootstrap');
var Vue = require('vue/dist/vue');
//https://jsfiddle.net/matfish2/f5h8xwgn/
var VueTables = require('vue-tables-2');
Vue.use(VueTables.client, {
compileTemplates: true,
// highlightMatches: true,
// pagination: {
// dropdown:true,
// chunk:5
// },
filterByColumn: true,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});

const app = new Vue({
el: '#app',
data: {
columns: ['id', 'name', 'age', 'edit', 'erase'],
tableData: [
{id: 1, name: "John", age: "22"},
{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: {
headings: {
id: 'ID',
name: 'Naam',
age: 'Leeftijd',
edit: 'Edit',
erase: 'Verwijderen',
},
templates: {
edit: function (h,row) {
return <a href='#!/${row.id}/edit'><i class='glyphicon glyphicon-edit'></i></a>
},
erase: function(h, row) {
return <delete id=${row.id}></delete>
}
}
}
}
});

the templates returning plaintex, no idea why?

my gulp file:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

require('laravel-elixir-browserify-official');require('laravel-elixir-vueify');/*
Elixir Asset Management
--------------------------------------------------------------------------
Elixir provides a clean, fluent API for defining some basic Gulp tasks
for your Laravel application. By default, we are compiling the Sass
file for your application as well as publishing vendor resources.
*/
elixir.ready(function() {
elixir.config.js.browserify.transformers
    .find(transformer => transformer.name === 'babelify')
    .options.plugins = [
    'babel-plugin-transform-vue-jsx'
];
})

elixir(function(mix) {
mix.sass('app.scss');
mix.browserify('main.js');
});

[Question] Use custom jsx template

In vue-tables (Vue 1.x version), there was an option to use a custom template for displaying the table:

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

I haven't been able to find a way of doing this in the new version (I tried doing it the same way, and copying the template.jsx and template-folder, but no luck). Is there any way of doing this? If not, any plans to implement it?

I guess I could change the line where the template is required inside the plugin, but it would be erased if the plugin is updated. I am using Bootstrap 4, so it would be nice not having to include old bootstrap stuff.

v-server-table - example please

could you give an example for wrapping the v-server-table with a v-if please?

i am finding that putting the v-if directive with false never triggers the network call to fetch data, and setting it to true triggers the loading event, but vue-tables errors out with Cannot read property 'get' of undefined
not seeing a network call in either case.

my code

                <div id="assets-vue"
                     v-if="!loading"
                >
                    <v-server-table
                            url="/people"
                            :columns="columns"
                            :options="options"
                            name="assets-table"
                    >
                    </v-server-table>
                </div>

btw, i'm using the library after compiling it with browserify
sections from package.json:

    "build-vue-tables": "browserify node_modules/vue-tables-2/index.js --s VueTables | uglifyjs -c > public/js/vue-tables.js"

  "browserify": {
    "transform": [
      "babelify",
      {
        "presets": [
          "es2015"
        ],
        "plugins": [
          "transform-vue-jsx"
        ]
      }
    ]
  },

i also had to set .babelrc, for some reason

{
    "plugins": ["transform-vue-jsx"],
    "presets": ["es2015"]
}

Feature request: provide minified, single-file version of the library

Currently it isn't possible to use the library without using all the npm/browserify/webpack crap. It shouldn't be a lot of work to include a minified version of a compiled library in the repo.

Vue-table 2 - data retrieved using API Example / sample code

Hi, apologies to post this here. However - I was wondering if anyone has "Vue-table 2 - data retrieved using API Example / sample code". I am developing a finance app using laravel but stuck because of datatables (using VUEJS).

Defining templates in <slot>

Is there a technological impediment for not using slot instead of string templates?

Reactivity of list filters.

• Vue.js version: 2.0
• Consumed using: Webpack with Laravel's Elixir
• Server Table

Hi!

I've forked this repository in order to add some small features, but I've encountered a little problem.

Firstly, here is what I've added:

• 1. When receiving data from server, before, only data and count were populated. Now you can return a custom_data from the server too. You can access the custom_data property directly from the table component(e.g. using $refs). Returning custom_data on the server is optional. It's implemented for parsing table data along with custom data for personal things within 1 request (read further and you'll see a real life example).
• 2. When data is loaded from server, before only a vue-tables.loaded event was dispatched, now it also calls an optional table's parent callback method loaded. I believe this way is more comfortable for writing custom logic for each unique component, rather than using event listeners. Example:

Vue.component('something', {
    template: '<v-server-table :url="" :columns="" :options=""></v-server-table>',
    methods: {
        loaded: function (data) {
            // I will be called when the data in the table is loaded.
        },
    }
})

• 3. My main goal and the problem:

I have a table with polls. A poll belongs to a category. Above the "category" column I need a dropdown filter with all the categories listed.

So I must somehow parse the polls and the available categories within 1 request.
In order to achieve this goal, my server is returning this data for example:

data : $polls,
count : 10,
custom_data : [ 'categories' : $categories ]

(Yes, that's why I implemented the feature mentioned in point 1)

Ok, so now my categories are available at custom_data.categories. I have to find a way to populate the dropdown filter with these categories.

In the template list-filter.jsx all the dropdown options are stored in a local variable called options. I replaced this local variable with a global variable so that I could access this data from outside the template.
This new variable is an array, keyed by table's column names, called selectValues and is stored in opts. Example: THETABLE.opts.selectValues['category'] will contain the dropdown values for the column category.
See my commit.

And now, using the new callback method loaded(mentioned in point 2), I get the categories from custom_data (parsed from the server) and add them into this "global variable" from list-filter.jsx.
Example:

loaded: function (data) {
    var that = this;

    // Here we take each category and try to insert them into the dropdown.

    this.$refs.THETABLE.custom_data.subcategories.map(function(option) {
        that.$refs.THETABLE.opts.selectValues['category'].push(option)
    })  
}

The selectValues['category'] updates and the dropdown from the screenshot is linked to this variable as well, HOWEVER the list filters are not reactive! The dropdown doesn't update.
Once the jsx has been compiled, you can't update it? (I'm not familiar with reactivity at all)

Do you have any ideas? I hope you understood the idea correctly, let me know if it's not clear.
P.S. If you think these small features are useful, I can do a pull request when the problem is solved. :)
Looking forward to hearing from you, thanks in advance!

Using it with an existing server that I can't be changed

Hi,

I am wondering if I can make an adapter. Can I specify a function instead of a server url to return the results to populate the table?

My server has the same features needed: pagination, filter, etc. But with different names and different return.

If I could use the client side mode but specifying the total number of pages would be ok too.

Thanks

Template HTML not rendering

- Vue.js version: 2.0
- consumed using: WebKit
- FULL error message (including stack trace):

• relevant code:

<script> import \* as moment from "moment"; export default { data: function () { return { carColumns:['invoice','year','make','model','stock','vin','optional','product','price',"created_at","updated_at"], carData: [], carOptions:{ dateFormat: "DD-MM-YY", dateColumns: ['created_at'], headings: { invoice: 'Invoice', year: 'Year', make: 'Make', model: 'Model', stock: 'Stock', vin: 'VIN', optional: 'Optional', product: 'Product', price: 'Price', created_at: 'Created', updated_at: 'Updated', edit: 'Edit', }, templates: { edit: function(row) { return `` }, ``` }, }, }; }, methods: { getsCars: function(){ $.getJSON("/cars/get",function (data) { data.forEach(car=>{ car.created_at = moment(car.created_at); car.updated_at = moment(car.updated_at); }); this.carData = data; }.bind(this)); } }, created: function(){ this.getsCars(); this.timer = setInterval(this.getsCars, 1000) }, } ```

• steps for reproducing the issue:

I'm not sure whats going on but for some reason the html inside the table isn't being rendered or processed.

Default sort icon classes wiped out

I'm finding that the classes for the sort icon VueTables__sort-icon pull-right are wiped out when sorting a column. For now I've manually added the following to my options:

sortIcon: {
    base: 'VueTables__sort-icon pull-right glyphicon',
},

I think I see what the issue is in sort-control.jsx, I will send a pull request if it's a quick fix.

Option to hide pagination when not needed

How about the following feature:

• Assume we have perPageValues = [10, 25, 50, 100] (that is the default)
• If the unfiltered data contains <= 50 records, then we do not show the 100 option in the select box.
• If the unfiltered data contains <= 25 records, then
  • we no not show the limit select box at all
  • and the pagination arrows will be hidden (that is already the case)
  • and we do not show the sentence Showing 1 to X out of X Records (that would be new)

Right now, small signle-paged tables (e.g. only one record) look somehow cluttered.

need examples with template

hi can you able to make some example jsFiddle , will help people to use template option well .

It seems __actions is removed for vue-tables-2

• Vue.js version: 2.0
• consumed using: webpack
• FULL error message (including stack trace):
  actions can't render properly

I check the Vuetable.vue, and can't found the __actions related code.
I just want to confirm, Thanks!

How to apply existing filter input values to custom filters?

• Vue.js version: 2.0.1
• consumed using: webpack

I have column templates that generate links (<a href="url">text</a>). I have custom filters to match the same text that is displayed in the links. I want to use the queries from the existing filter input fields (top-left "normal filter" field and/or individual column filter fields) to be applied to these custom filters.

What is the easiest way to accomplish this?

Thanks for your help!

ERROR in ./~/vue-tables-2/lib/methods/render.js #36

• Vue.js version: Vue 2.0
• consumed using: Webpack
• FULL error message (including stack trace):
  ERROR in ./~/vue-tables-2/lib/methods/render.js Module parse failed: C:\xampp\htdocs\ProjectLaravel\CIRMS\node_modules\vue-tables-2\lib\methods\render.js Unexpected token (17:9) You may need an appropriate loader to handle this file type. | }); | | return <span class='VueTables__template'>{template}</span> | | } @ ./~/vue-tables-2/lib/mixins/methods.js 27:14-42 @ ./~/vue-tables-2/lib/table.js @ ./~/vue-tables-2/lib/v-server-table.js @ ./~/vue-tables-2/index.js @ ./public/js/Core/Brand/list.js
• relevant code:
  webpack.config.js
  `
  var webpack = require('webpack');

var fileName = "list.js"; //source and compiled filename
var entryFile = "./public/js/Core/Brand/"+fileName;
var destinationFolder = "./public/js/Core/Brand/compiled";

module.exports = {
entry: entryFile,

output: {
    path: destinationFolder,
    filename: fileName
},

module: {
    loaders: [
        {
            test: /\.jsx$/,
            loader: 'babel-loader'
        },

        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },

        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
        }
    ]
},

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

};

`.babelrc file

{ "presets": [ "es2015" ], "plugins": [ "transform-vue-jsx" ] }
JS File

`
var Vue= require('vue');
var VueTables = require('vue-tables-2');

var data = [];
Vue.use(VueTables.client, {
compileTemplates: true,
highlightMatches: true,
pagination: {
},
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});

const app = new Vue({
el: '#app',

data: {
    columns: ['code','name'],
    tableData: [
      {code:'X', name:'Brand X' }
    ],
    options: {
    // see the options API
    }
},

methods : {
    'search' : function(){
        alerts('ddd');
    }
}

});
`

• steps for reproducing the issue:
  node_modules/.bin/webpack

Thanks for the help!

React is not defined when using JSX on template

• Vue.js version: 2.0.1
• consumed using: (browserify/webpack/rollup)
• Uncaught ReferenceError: React is not defined

<script>
export default {
    props: ['url', 'columns'],
    data() {
      return {
        options: {
          templates: {
            name(h, row) {
              return <a href='/users/id'>row.id</a>
            }
          }
        }
      }
    }
  }
</script>

If I return a simple string on the template it will be rendered, but if I use the jsx syntax I got the error

I use this on sever-side.I want to know is the url surpport jsonp?

"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vue-tables-2": "^0.2.70"

• consumed using: (webpack)
• FULL error message (including stack trace):
• relevant code:

<v-server-table url="http://rec.letv.com/pcw?jsonp=jQuery191017033076474811715_1482823829011&lang=zh_cn&uid=156169079&lc=C00FDE2A034727ED4194D951617F6DC2B96FF3A6&history=&pt=0001&area=rec_0002&cid=0&num=21" :data="tableData" :columns="columns" :options="options"></v-server-table>

• steps for reproducing the issue:

The error des:

XMLHttpRequest cannot load http://rec.letv.com/pcw?jsonp=jQuery191017033076474811715_1482823829011&lan…02&cid=0&num=21&query=&limit=3&orderBy=tv_id&ascending=1&page=1&byColumn=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Can I use JSONP to get the data?

I just simply change the code like this in the '/vue-tables-2/lib/methods/get-data/js'
I have change the 'get' to 'jsonp', beacause my program's APIs are all supported by JSONP.

  this.dispatch('loading', data);

  var promise = this.$http.jsonp(this.url, {params:data}).then(function(data) {
    return data.json();
  }.bind(this),  function(e) {
    this.dispatch('error', e);
  }.bind(this));

  if (promiseOnly) return promise;

  return promise.then(function(data) {
    return this.setData(this.opts.responseAdapter(data));
  });

It looks good.

SORRY FOR MY POOR ENGLISH.

Pagination on reloading page

• Vue.js version: 2.0.1
• consumed using: (browserify/webpack/rollup) webpack
• FULL error message (including stack trace): n/a
• relevant code:
• steps for reproducing the issue:
  This may be a problem with the pagination plugin. If you create a table, navigate away with vue-router (no page refresh), and navigate back the pagination now triggers 2 get requests on each pagination change. This will grow infinitely.

It seems the pagination module in vuex maybe needs to be destroyed and re-registered?

how to use `bus` when only use precompiled version

• Vue.js version: 2.x
• consumed using: only include the precompiled version dist/vue-tables.min.js using <script> tag ,
• FULL error message (including stack trace):
• relevant code: var bus = require('vue-tables-2/lib/bus');
• steps for reproducing the issue:

Hi, I'm here asking for some help or tips...

First of all, I don't use vuex, and only use dist/vue-tables.min.js with a <script> tag.

when I use the events in vue-tables-2, such as custom filters, I have no idea how to connect to the bus in the vue-tables-2 via $refs , just like your way:

var bus = require('vue-tables-2/lib/bus');

Thanks for your time~

HTML display as raw in template

I change my template like this but it just display lake Raw text. I need it display HTML

templates: {
edit: function(row) {
return <a href='#!/${row.id}/edit'><i class='glyphicon glyphicon-edit'></i></a>
}
}

• Vue.js version: 2.0.1
• consumed using: (browserify/webpack/rollup) Laravel with Gulp
• FULL error message (including stack trace):
• relevant code:
• steps for reproducing the issue:

Uncaught ReferenceError: options is not defined

- Vue.js version:: 2.0
- consumed using: (browserify/webpack/pre-compiled) webpack (Is there a precompiled version?)

• FULL error message (including stack trace):

Uncaught ReferenceError: options is not defined(anonymous function)
@ VM24703:36(anonymous function)
@ app.js:232__webpack_require__
@ app.js:20(anonymous function)
@ app.js?8b67:9(anonymous function)
@ app.js:842__webpack_require__
@ app.js:20(anonymous function)
@ app.js:64(anonymous function)
@ app.js:67

Babel Config:

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

Bootstrap.js:

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

next();

});

var VueTables = require('vue-tables-2');
Vue.use(VueTables.client, options);

• steps for reproducing the issue:

Default customFilters value and Column naming

• Vue.js version: 2.1.6
• consumed using: webpack

First of all this is a nice little library you've made. I have 2 issues that I'm not sure how to solve. I'm hoping you could provide some insight on how I might solve it.

1. I am using the customFilters with Vuex to pass in an advanced JSON filter to the server. The problem is that I want to set a default value here that is used before the table is loaded. What it seems to do now is it will load all of my records as soon as the table mounts, and then after it will have to query a 2nd time when i set the custom filter. Is there any way to pass in a default customFilter value that will be used on the initial table mount?

2. It seems columns can only be defined using an array mapped to the data. However, is it possible to set the names directly? Eg. columns: [{ name: 'id', title: 'User ID' }]

Thanks again for this library!

Pagination isn't reset when filtering table

• Vue.js version: 2.1
• consumed using: (browserify/webpack/rollup): webpack
• FULL error message (including stack trace): N/A
• relevant code: N/A
• steps for reproducing the issue:
  • Server-Side Table
  • Switch to page X
  • Add filter to the table
  • Records won't be shown, since the table will still be on page X

JSX not loading in templates

• Vue.js version: 2.0.5
• consumed using: (browserify/webpack/rollup) webpack
• relevant code:

vue tables:

            columns: ['approved', 'date', 'title', 'city', 'state', 'moderate'],
            options: {
                orderBy: { 
                    column: 'date',
                }, 
                sortable: ['approved', 'date', 'city', 'state'],
                templates: {
                    approved(h, row) {
                        if(row.approved == 1) {
                            var fa_class = 'fa fa-check inline-success';
                        } else if(row.approved == 0) {
                            var fa_class = 'fa fa-ban inline-danger';
                        } else {
                            var fa_class = 'fa fa-question';
                        }

                        return h('span', {
                                attrs:{
                                    'class': fa_class
                                }
                            });                        
                    },
                    moderate(h, row) {
                        return <moderate-link></moderate-link>
                    }
                },

here's the moderate-link

Vue.component('moderate-link', {
  render (h) { // <-- h must be in scope
    return <div id="foo">bar</div>
  }
})

Typing

<moderate-link></moderate-link> .

renders correctly in an ordinary template

It does not render in the moderate() function in the VueTable2 row template.

at a loss...

No errors.

Need to be able to customise query param keys

I have an API that I am not free to alter to suit this plugin. It has all the functionality needed by vue-tables-2, but some of the GET query parameter key names are different.

How do I go about customising the key names?

[Question] Listening to template component events

The docs example for using a component for a template shows an event being handled in the component ("erase()").

I need to handle the event on the component that the table is inside, so 2 levels up. How do you listen for a component's events and emit them on to the table's parent component?

any existing solution for CRUD functionality?

Really digging this project and am using the tables in my current project.

Doings things like delete a record is pretty easy but what about insert/update? Is there a plan to add this functionality or is there a suggested other package that can be used to make this relatively painless to add? Something that uses the existing columns schema ideally.

What's everyone else using to do this?

Thanks!

Use as a component

Is there any documentation on implementing this as a vue 2.0 component in Laravel Spark?

Thanks in advance.

render.js: "You may need an appropriate loader to handle this file type."

Getting this error:

ERROR in ./~/vue-tables-2/lib/methods/render.js
Module parse failed: C:\hawkinsCustomCode\ProductRequestForm\ProductRequestForm\node_modules\vue-tables-2\lib\methods\render.js Unexpected token (9:9)
You may need an appropriate loader to handle this file type.
|   var template = this.opts.templates[column];
|
|   return <span class='VueTables__template'>{template.apply(this.$root, [h, row])}</span>
|
| }
 @ ./~/vue-tables-2/lib/mixins/methods.js 27:14-42
 @ ./~/vue-tables-2/lib/table.js
 @ ./~/vue-tables-2/lib/v-client-table.js
 @ ./~/vue-tables-2/index.js
 @ ./Views/Test/Vue/main.js

That file is:

module.exports = function(row, column, h) {

  if (this.templatesKeys.indexOf(column)==-1)
    return row[column];

  var template = this.opts.templates[column];

  return <span class='VueTables__template'>{template.apply(this.$root, [h, row])}</span>

}

Since the file isn't .jsx, I assume webpack is having an issue with return <span.... Changing that line to the following fixes the error in the console:

return "<span class='VueTables__template'>{template.apply(this.$root, [h, row])}</span>"

Unsure if this is the proper solution, but it stopped the error in the console. Not sure if my old template is corrupt, but removing the template declaration from my main.js file allows the server table to render.

My .babelrc:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

Webpack: Module parse failed. Unexpected token.

• Vue.js version: 2.0
• consumed using: webpack
• FULL error message (including stack trace):
  ERROR in ./~/vue-tables-2/lib/template.jsx Module parse failed: /Users/sebastien/Desktop/test/node_modules/vue-tables-2/lib/template.jsx Unexpected token (15:7) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (15:7) at Parser.pp$4.raise (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseExpression (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1573:21) at Parser.pp$1.parseReturnStatement (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:839:33) at Parser.pp$1.parseStatement (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:699:34) at Parser.pp$1.parseBlock (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:981:25) at Parser.pp$3.parseFunctionBody (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:2105:24) at Parser.pp$1.parseFunction (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1065:10) at Parser.pp$3.parseExprAtom (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1810:19) at Parser.pp$3.parseExprSubscripts (/Users/sebastien/Desktop/test/node_modules/acorn/dist/acorn.js:1715:21) @ ./~/vue-tables-2/lib/v-client-table.js 7:15-40
• steps for reproducing the issue: Use the vue-cli to create a webpack project, Follow all the instructions to setup the dependencies, simply import VueTable from 'vue-tables-2'

Passing variable as a prop for child component in templates not working

I'm trying to pass a variable from row through to my child-component but it's only rendering the plain text. When I try v-bind:url="row.avatar" or any other version (have tried many versions) it's not working either. I suspect the way you explain it in the docs ( url="row.something" ) is correct - but it's not working.

• Vue.js version: 2.0.3
• consumed using: webpack
• relevant code:

´´´javascript

Vue.component('avatar', {
props: ['url', 'name'],
template: <div>{{url}}<img src="{{url}}" /></div>
})
....

templates: {
name: function(h, row) {
console.log(row.avatar);
return ''
}
},

´´´

This is only passing through the {row.avatar} as a plain string. So {{url}} is only rendering {row.avatar} despite the variable exists in row

Templates without jsx

First, thanks for making this awesome library.

I'm adding vue tables 2 to an older project that doesn't have a build process in places so JSX isn't an option. I've tried the following but it renders as raw html in the table

templates: {
    actions: function actions(h, row) {
        return `<a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> ${row.Id}</a>`;
    },
},