Vue Customizable DataTable
A demo of the vue customizable datatable in full flow
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
}
}Basic Table
Basic example with sorting, pagination, printing, excel export turned on by default.
<data-table
title='Basic table'
:columns='tableColumns1'
:rows='tableRows1'
/>data() {
return {
tableColumns1: [
{
label: 'First name',
field: 'firstName',
numeric: false,
html: false,
},
{
label: 'Last Name',
field: 'lastName',
numeric: false,
html: false,
},
{
label: 'Company',
field: 'company',
numeric: false,
html: false,
},
{
label: 'City',
field: 'city',
numeric: false,
html: false,
},
],
tableRows1: [
{
firstName: 'Bill',
lastName: 'Gates',
company: 'Microsoft',
city: 'Seattle',
},
{
firstName: 'Steve',
lastName: 'Jobs',
company: 'Apple',
city: 'San Francisco',
},
{
firstName: 'Larry',
lastName: 'Page',
company: 'Google',
city: 'East Lansing',
},
{
firstName: 'Mark',
lastName: 'Zuckerberg',
company: 'Facebook',
city: 'White Plains',
},
],
};
},
Result
Clickable Table
Clickable table row example with sorting, pagination, printing, excel export turned on by default.
<data-table
title='Clickable table'
:columns='tableColumns1'
:rows='tableRows1'
v-on:row-click='onRowClick'
/>data() {
return {
tableColumns1: [
{
label: 'First name',
field: 'firstName',
numeric: false,
html: false,
},
{
label: 'Last Name',
field: 'lastName',
numeric: false,
html: false,
},
{
label: 'Company',
field: 'company',
numeric: false,
html: false,
},
{
label: 'City',
field: 'city',
numeric: false,
html: false,
},
],
tableRows1: [
{
firstName: 'Bill',
lastName: 'Gates',
company: 'Microsoft',
city: 'Seattle',
},
{
firstName: 'Steve',
lastName: 'Jobs',
company: 'Apple',
city: 'San Francisco',
},
{
firstName: 'Larry',
lastName: 'Page',
company: 'Google',
city: 'East Lansing',
},
{
firstName: 'Mark',
lastName: 'Zuckerberg',
company: 'Facebook',
city: 'White Plains',
},
],
};
},
methods:{
onRowClick(row) {
//row - is the row clicked on
//open a modal or do anything with the row
//for example alert firstName
alert(row.firstName);
},
},
Result
Minimal Table
Table with all possible options set to false
<data-table
title='Minimal table'
:columns='tableColumns1'
:rows='tableRows1'
:clickable='false'
:sortable='false'
:exactSearch='false'
:searchable='false'
:paginate='false'
:exportToExcel='false'
:printable='false'
/>data() {
return {
tableColumns1: [
...
],
tableRows1: [
...
],
};
},
Result
| First name | Last Name | Company | City |
|---|---|---|---|
Bill | Gates | Microsoft | Seattle |
Steve | Jobs | Apple | San Francisco |
Larry | Page | Google | East Lansing |
Mark | Zuckerberg | Facebook | White Plains |
Select Table
Table rows with checkboxes for selection
Selected: { {selectedCheckboxes} }
<data-table
title='Select table'
:columns='tableColumns1'
:rows='tableRows1'
enable-checkbox='true'
:checkbox-value-field=''firstName''
v-on:checked-boxes='updateCheckboxData'
/>data() {
return {
tableColumns1: [
...
],
tableRows1: [
...
],
selectedCheckboxes: []
};
},
methods:{
updateCheckboxData(checkedboxes) {
this.selectedCheckboxes = checkedboxes;
},
},
Result
Selected: [] ***NOTE: if you want the whole row to be return when the checkbox is clicked, just remove ":checkbox-value-field = 'firstName'"***
Customized Table
Customizing a basic table with your own css.
You can use table with bootstrap, bulma, tailwind, or even custom css.
':parent-div-classes' - refers to the classes given to the div containing the table.
Default - 'table-responsive'
Description This is where classes like 'table-responsive' (in bootstrap) to make the table responsive or 'table-container' (in bulma) are specified.
':table-classes' - refers to the classes given the table.
Default - 'table table-bordered'
Description This is where table classes are specified. For example 'table table-borderless' or 'table is-bordered'.
<data-table
title='Basic table'
:columns='tableColumns1'
:rows='tableRows1'
:table-classes=''table table-borderless''
:parent-div-classes=''table-responsive''
/>data() {
return {
tableColumns1: [
...
],
tableRows1: [
...
],
};
},
Result
Table Showing Animation
A basic table showing animation. This happens when the row is an empty array.
<data-table
title='Loading table'
:columns='tableColumns1'
:rows='tableRows1'
/>data() {
return {
tableColumns1: [
...
],
tableRows1: [],
};
},
Result
***NOTE: This animation can be disabled by setting the loadingAnimation prop to false. 'loadingAnimation: "false"' ***
Custom Paginated Table
A basic table showing how to custom paginate the table
<data-table
title='Custom Paginated table'
:columns='tableColumns1'
:rows='tableRows1'
:perPage='[3, 5, 10]'
/>data() {
return {
tableColumns1: [
...
],
tableRows1: [
...
],
};
},