vue-uikit-datatable

A Simple Datatable for the UiKit 3.0 Framework.

View Demo Download Source

For npm:

npm install vue-uikit-datatable

For yarn

yarn add vue-uikit-datatable

To Use

Import the Datatable by using

import Vue from 'vue'
import Datatable from 'vue-uikit-table'
Vue.use(Datatable)

Basic Example

<template>
    <section class="uk-container uk-section">
        <Datatable :titles="titles" :itemList="usersList"></Datatable>
    </section>
</template>

<script>
const titles = [
  {
    prop: "username",
    name: "Username"
  },
  {
    prop: "email",
    name: "Email"
  },
  {
    prop: "gender",
    name: "Gender"
  }
];

const usersList = [
{
    "id": "1",
    "username": "hirthe.alyson",
    "email": "[email protected]",
    "gender": "male",
},
{
    "id": "2",
    "username": "oklein",
    "email": "[email protected]",
    "gender": "male",
},
{
    "id": "3",
    "username": "bahringer.leonel",
    "email": "[email protected]",
    "gender": "female",
}];

export default {
  name: "UserControls",
  data() {
    return {
      titles,
      usersList
    };
  },
  methods: {
  }
};
</script>

For Checkbox selection

Checkbox selection is on by default, remove it by using the prop checkbox-filter

:checkbox-filter=false

To process get the items selected, add selected-change

@selected-change='function-to-handle-selected-items'

Example

<Datatable :checkbox-filter=true @selected-change='selected'></Datatable>

data(){
    items:[]
}
methods:{
selected(items) {
      console.log(items);
    }
}

To Use Search Box

Add the prop search-attrs

:searchAttrs="columns-to-be-searched"

Example

<Datatable :search-attrs="searchAttrs"></Datatable>

<script>
export default{
    data(){
        return{
            searchAttrs: ["username","email"],
        }
    }
}
</script>

GitHub