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:

Prop name	Description	Example
title	The title of the datatable	"Basic Table"
columns	Columns	[ // Array of objects { label: "Name", // Column name field: "name", // Field name from row numeric: false,// Affects sorting html: false // Escapes output if false. } ];
rows	Rows	[ // Array of objects { //check demo for examples name: 'Timothy', ... } ];
perPage	Numbers of rows per page (pagination)	[10, 20, 30, 40, 50] (default)
defaultPerPage	Default rows per page	10 (default) // Default row per page
initSortCol	Default column for sorting on component initialization	-1 (default) // By default table is not sorted by any column
row-click	Function to execute on click. // Check 'Clickable Table' in demo for more details	alert('hey') // Function, row 1st param
clickable	Clickable rows. Will fire row-click event	true (default) // Row is passed in the event payload
sortable	Cause column-click to sort	true (default) // Whether sortable
searchable	Add fuzzy search functionality	true (default) // Whether searchable
exactSearch	Disable fuzzy search	true (default) // Whether only exact matches are returned
paginate	Add footer next/prev. buttons	true (default) // Whether paginated
exportToExcel	Add button to export to Excel	true (default)
printable	Add printing functionality	true (default)
customButtons	Custom buttons	// Array of objects [ { hide: false, // Whether to hide the button icon: "search", // Materialize icon onclick: aFunc() // Click handler } ];
parentDivClasses	Add classes for table parent div	'table-responsive' (default)
tableClasses	Add classes for table	'table table-bordered' (default)
enableCheckbox	Enable checkbox for selection	false (default)
checkboxValueField	Field value to return once checkbox is checked // Check 'Select Table' in demo.
checked-boxes	Function to execute on check of checkbox. // Check 'Select Table' in demo for more details

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>