a-v-datatable

What is a-v-datatable?

a-v datatable is a Vue component built to make work with tables easer and faster.

Demo

Why a-v-datatable?

When you work with tables, You may want to add options to your table (Add, Update or Delete) or you may want to add collapsible table or what ever. So, You will not create your table from the beginning. a-v-datatable gives you ability to change cells or rows and full control on your data.

Follow the Documentation

Getting started

$ npm i a-v-datatable

Global implementation

import aVDatatable from "a-v-datatable"
import "a-v-datatable/dist/a-v-datatable.css"

Vue.use(aVDatatable)

Local implementation

<script>
import { aVDatatable } from "a-v-datatable"
import "a-v-datatable/dist/a-v-datatable.css"

export default {
  components: {
    aVDatatable
  }
}
</script>

Basic usage

<template>
    <a-v-datatable
        :headers="headers"
        :items="users"
        classes="bordered cell-bordered striped"
    />
</template>
<script>
  ...
  export default {
    ...
    data: () => ({
      headers: [
        {
          label: "name",
          value: "name"
        },
        {
          label: "username",
          value: "username"
        },
        {
          label: "E-mail",
          value: "email"
        },
        {
          label: "phone number",
          value: "phone"
        }
      ],
      users: [
        {
          id: 1,
          name: "Leanne Graham",
          username: "Bret",
          email: "[email protected]",
          phone: "1-770-736-8031 x56442",
        },
        {
          id: 2,
          name: "Ervin Howell",
          username: "Antonette",
          email: "[email protected]",
          phone: "010-692-6593 x09125",
        },
        ...
      ],
    })
  }
</script>