bootstrap-vue-datatable

vue-datatable

// Import Package
require("bootstrap-vue-datatable");

<!-- Include Component -->
<datatable :data="[]" :columns="[]" :actions="[]"></datatable>

<!-- Using Ajax -->
<datatable :ajax="true" :url="https://demosite.com/api/users" :columns="[]" :actions="[]"></datatable>

Example

Here's how you would use it in Example.vue

<!-- Include Datatable Component -->
<datatable :data="data" :columns="columns" :actions="[]"></datatable>

<script>
  // Use only if you want to parse dates
  import "moment" from "moment";


  export default {
    data() {
      return {
        // Data to be passed to component
        data: [
          { first_name: "Antonio",
            last_name: "Okoro",
            email: "cheezytony1@gmail.com",
            date_of_birth: "1998-05-15"
          },
          {
            first_name: "Naruto",
            last_name: "Uzumaki",
            email: "narutouzumaki@gmail.com",
            date_of_birth: "1987-10-10"
          },
          {
            first_name: "Sasuke",
            last_name: "Uchiha",
            email: "sasukeuchiha@gmail.com",
            date_of_birth: "1987-07-23"
          },
          {
            first_name: "Rock",
            last_name: "Lee",
            email: "rocklee@gmail.com",
            date_of_birth: "1985-11-27"
          },
          {
            first_name: "Neji",
            last_name: "Hyuga",
            email: "nejihyuga@gmail.com",
            date_of_birth: "1985-09-22"
          },
          {
            first_name: "Shikamaru",
            last_name: "Nara",
            email: "shikamarunara@gmail.com",
            date_of_birth: "1987-09-22"
          }
        ],

        // Columns that should be displayed on The Table
        columns: [
          {name: "first_name", th: "First Name"},
          {name: "last_name", th: "Last Name"},
          {name: "email", th: "Email Address"},
          {name: "phone", th: "Phone Number"},
          {name: "date_of_birth", th: "Date Of Birth", show: false},
          {name: "age", th: "Age", render (row, cell, index) {
            // Parse date and display difference
            return moment(row.date_of_birth).fromNow();
          }},
        ],
        actions: [
          {text: "Delete", color: "danger", action: (row, index) => {
            alert(`about to delete ${row.first_name} ${row.last_name}`);
          }}
        ]
      }
    }
  }
</script>

Configuration

ajax

Whether or not to use ajax for loading data into the table

url

This sets the ajax url to fetch data from if ajax is enabled

data

Items to be displayed in the table
Should be an array of objects

[
  { first_name: "Antonio",
    last_name: "Okoro",
    email: "cheezytony1@gmail.com",
    date_of_birth: "1998-05-15"
  },
  {
    first_name: "Naruto",
    last_name: "Uzumaki",
    email: "narutouzumaki@gmail.com",
    date_of_birth: "1987-10-10"
  },
  {
    first_name: "Sasuke",
    last_name: "Uchiha",
    email: "sasukeuchiha@gmail.com",
    date_of_birth: "1987-07-23"
  }
]

actions

Action Buttons For Each Item Row
Should be an array of objects
Each button uses bootstrap button styles and classess

Action Properties

text Text to be displayed on the button

color Color of the button primary, success, danger, warning, info, dark, light, any others defined in the css

size Size of the button sm, lg, any others defined in the css

action Function to be called whenever the button is clicked
it passess three arguments to the provided function

{
  render(row, cell, index){
    return `<a href="https://github.com/cheezytony/vue-datatable/blob/HEAD/${cell}">${cell}</a>`;
  }
}

columns

Columns and Appropriate Data Assigment

Column Properties

name Name of the column for identification

th Title of the column to be displayed on the table header

render Custom function to display the columns data
it passess three arguments to the provided function

{
  render(row, cell, index){
    return `<a href="https://github.com/cheezytony/vue-datatable/blob/HEAD/${cell}">${cell}</a>`;
  }
}

index

Whether or Not Items Should Be Indexed
default: true

loading

Set Loading Status
whenever this property changes the state will as well
default: false

onClick

A function to be called whenever a cell is clicked
It passes four arguments to the provided function

<datatable :data="data" :columns="columns" :onClick="click"></datatable>

methods: {
  click(row, cell, name, index) {

  }
}

breakWords

Whether Or Not The Table Should Be Allowed To Break Text
default: false

header

Whether Or Not The Header Section Should Be Visible
i.e the page limit and search sections at the top
default: true

footer

Whether Or Not The Footer Section Should Be Visible
i.e the current page details and the pagination links at the bottom
default: true

searchable

default: true Whether Or Not Searching Should Be Available

limitable

Whether Or Not Page Limitation Should Be Changeable
default: true

pageDetails

Whether Or Not Details Should Be Visible
default: true

paginatable

Whether Or Not The Results Should Be paginatable
default: true