vue-customizable-datatable

A flexible and customizable datatable VueJS component

Demo

https://vue-customizable-datatable.netlify.app/

Requirements

• VueJS
• Any css library or your custom css to give the table your desired style and classes. (It is a very customizable datatable)

Installation

npm i vue-customizable-datatable --save

Usage

Include the component,

import DataTable from "vue-customizable-datatable";

Then, register the component, however you like:

{
    ...
    components: {
        ...
        DataTable
    }
}

And then.. use the component:

<data-table></data-table>

Of course, code above won't render anything. Here are the props it accepts to render some sensible data:

Adding buttons to Rows

<datatable title="People" ...>
  <th slot="thead-tr">
    Actions
  </th>
  <template slot='tbody-tr'>
        <td>
            <button
            class='btn btn-default'
            >
            Edit
            </button>

            <button
            class='btn btn-danger'
            >
            Delete
            </button>
            <button
            class='btn btn-info'
            >
            View Holdings
            </button>
        </td>
    </template>
</datatable>