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	Type	Default	Description
rows	array	null	Array of objects containing the table data (required)
columns	object	null	Columns to show on the table, when null it shows all columns
tableCaption	string	null	Add table caption
tableHeader	boolean	true	Show/hide table headers
search	object	null	Enables table search and contains its options
sortableColumns	boolean	true	Make the table columns values sortable (uses sort method)
pagination	object	null	Enables table pagination and contains its options
expandable	object	null	Enables table expandable rows and contains its options

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.