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.