vue-table-pro v0.3.3

vue-table-pro

A Vue component for rendering tables with your datasets.

Installation

# NPM
npm install vue-table-pro

# Yarn
yarn add vue-table-pro

Usage

Import VueTablePro in the main.js file

import Vue from 'vue'
import VueTablePro from 'vue-table-pro'

Vue.use(VueTablePro)

Include VueTablePro in your Vue components

<template>
  <VueTablePro :rows="tableData"></VueTablePro>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "Patrick", age: 31 },
        { name: "Theresa", age: 25 },
        { name: "Bill", age: 19 },
        { name: "Jane", age: 44 }
      ]
    }
  }
}
</script>

Or use it directly in your pages

<!-- HTML file -->

<div id="people">
  <vue-table-pro :rows="tableData"></vue-table-pro>
</div>

// main.js file

new Vue({
    el: "#people",
    data: {
        tableData: [
            { name: "Patrick", age: 31 },
            { name: "Theresa", age: 25 },
            { name: "Bill", age: 19 },
            { name: "Jane", age: 44 }
        ]
    }
});

Attributes

Attribute examples:

Rows:

[
  {
    name: "John Doe",
    age: 21,
    description: "Lorem ipsum dolor sit amet"
  },
  {
    name: "Jane Doe",
    age: 21,
    description: "Lorem ipsum dolor sit amet"
  },
]

Columns:

{
  name: "Name",
  age: "Age",
}

Search:

{
  placeholder: 'Type your search',
  className: 'search-classname',
}

Pagination:

{
  perPage: 15,
  size: 6,
  arrows: true
}

Expandable:

{
  withColumns: ['name', 'age'],
  attachFields: {
    description: 'Description',
  }
}

Slots

Table extra columns:

<VueTablePro :columns="{ edit_column: 'Edit', delete_column: 'Delete' }">
  <a slot="edit_column">Edit</a>
  <a slot="delete_column">Delete</a>
</VueTablePro>

Table search empty results:

<VueTablePro>
  <div slot="search_empty_results">
    <p>No results found.</p>
  </div>
</VueTablePro>

License

vue-table-pro is open-sourced software licensed under the MIT license.