Vue Datasource is a Vue.js server side component to create tables

vue-datasource

You can use Vue Datasource as a Vue component, to create dynamic tables. The project is built to be compatible with Vue 2.x and Laravel.

Example

Install

npm install vue-datasource

`App.vue```

Script:

import Datasource from 'vue-datasource'

export default {
  data () {
    return {
      information: {
        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
        },
        data: [
          {
            'id': 0,
            'name': 'Marks Jefferson'
          },
          // more data
        ]
      },
      columns: [
        {
          key: 'name', // Key name from row object
          name: 'Name' // Table column name to display
        }
      ],
    }
  },
  components: {
    Datasource
  }
}

Template:

<datasource
    language="en"
    :table-data="information.data"
    :columns="columns"
    :pagination="information.pagination"
    :actions="actions"
    >
</datasource>

Take a look at a live example here(the repo for this can be found here) and for the available Props, Events, Languages and more visit Github. Created by Javier Diaz.