Vue datasource

A Vue.js server side component to create dynamic tables

Version: 2.0.7 Updated: 02/12/2018

By: coderdiaz License: MIT

Downloads Last 30 Days: 937

Vue Datasource

A Vue.js server side component to create dynamic tables. Compatible with Vue 2.x and Laravel.


forthebadge forthebadge




$ npm install vue-datasource
<div id="#app">
import Datasource from 'vue-datasource'

new Vue({
    el: '#app',
    components: {
    data() {
        return {
            information: {
                pagination: {...},
                data: [...]
            columns: [...],
            actions: [...]
    methods: {
        changePage(values) {...},
        onSearch(searchQuery) {...}

Available Props

Prop Type Default Description
table-data Array Table information
language String es Defines the table labels language
columns Array Columns to display
pagination Object Pagination information about the table data ([structure] (#pagination-structure))
actions Array Action buttons ([structure] (#action-event-sctructure))

Available Events

Event Description
change Handle show limit changed. Gets object with new show limit and current page {perpage: 10, page: 2}
searching Handles search input. Gets string as parameter

Available Languages

Language Abbr
Spanish es
English en
French fr
Chinese (Simplified) zh-CN
Catalan ca


Each column object needs a name and key attributes.

    columns: [
            name: 'Name', // Table column name to display
            key: 'name', // Key name from row object

For Laravel users, you can access relationships through the key attribute. Lets say we have the following object in our users array.

        name: 'Foo',
        last_name: 'Bar'
        role_id: 1,
        role: {
            name: 'admin'

To get the user's role we would need to define in our columns array:

    columns: [
            name: 'Role',
            key: ''

Render column

This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.

    columns: [
            name: 'Name',
            key: 'name',
            render(value) { // Render callback
                return `Enginner ${value}`;

Pagination Structure

    pagination: {
        total: 25, // Number of total rows (default 0)
        per_page: 15, // Number of rows to show (default 15)
        current_page: 1, // Actual page
        last_page: 2, // Last page
        from: 1, // Beginning of visible rows
        to: 15 // End of visible rows

Action Event Sctructure

    actions: [
            text: 'Click me', // Button label
            icon: 'glyphicon glyphicon-check', // Button icon
            class: 'btn-primary', // Button class (background color)
            event(e, row) { // Event handler callback. Gets event instace and selected row
                console.log('Click row: ', row); // If no row is selected, row will be NULL

Implementation examples


All contributions are welcome send your PR and Issues.


Vue Datasource is open-sourced software licensed under the MIT license

Created by Javier Diaz. Translation enhancement by [itsuwaribito] (




Categories: Vue js