vue-customizable-datatable
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 |
|
rows
|
Rows |
|
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 |
|
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>
Dependencies
@babel/core: ^7.6.4@babel/plugin-syntax-object-rest-spread: ^7.2.0@babel/plugin-transform-runtime: ^7.6.2@babel/preset-env: ^7.6.3@vue/cli-service: ^4.3.1babel-loader: ^8.0.6copy-webpack-plugin: ^5.0.4cross-env: ^6.0.3eslint: ^6.6.0eslint-plugin-vue: ^5.2.3file-loader: ^4.2.0highlight.js: ^9.15.10materialize-css: ^1.0.0mini-css-extract-plugin: ^0.8.0node-sass: ^4.13.0optimize-css-assets-webpack-plugin: ^5.0.3sass-loader: ^8.0.0terser-webpack-plugin: ^2.2.1vue-loader: ^15.7.1vue-style-loader: ^4.1.2vue-template-compiler: ^2.6.10webpack: ^4.43.0webpack-cli: ^3.3.9