FEATURES

DEMO

GETTING STARTED

Installation

npm install @uwlajs/vue-data-table

Set up

importVueDataTablefrom"@uwlajs/vue-data-table";Vue.component("vue-data-table",VueDataTable);

import"@uwlajs/vue-data-table/dist/VueDataTable.css";

Usage

<template>    <div>        <data-tablev-bind="bindings"/>    </div></template><script>exportdefault {    computed: {bindings() {return {                columns: [/*the columns*/]                data: [/*the data*/]/* other props...*/            }        }    },}</script>

Nuxt integration

importVueDataTablefrom'@uwlajs/vue-data-table'import'@uwlajs/vue-data-table/dist/style.css'exportdefaultdefineNuxtPlugin(nuxtApp=>{nuxtApp.vueApp.use(VueDataTable)})

Laravel integration

CONFIGURATION

Columns

// we can define the columnsconfig={data:users,columns:[{key:"name",},{key:"email",title:"Email Address",sortable:false,},{key:"phone",sortable:false,searchable:false,index:1,// smaller indexes means the column is shift to the left},{key:"permissions",/* custom function sort users by which user has more permissions */compareFunction:function(a,b){// permissions is an arrayreturna.permissions.length-b.permissions.length;},/* custom function to allow searching the permission array */searchFunction:function(search,data){returndata.permissions.some(permission=>permission.includes(search))},searchable:true,/* custom component to display the permissions */component:UserPermissionList,}]}// or use columnKeys shortcutconfig={data:user,columnKeys:["name","email","registered_at","last_access_at"]},// which will take the default column and map the array into this[{key:"name",title:"Name",sortable:true,searchable:true,index:1000},{key:"email",title:"Email",sortable:true,searchable:true,index:1000},{key:"registered_at",title:"Registered At",sortable:true,searchable:true,index:1000},{key:"last_access_at",title:"Last Access At",sortable:true,searchable:true,index:1000},]

Custom Cell Component

<template>    <div>        List of permissions for the user {{ data.name }} :        <ul>            <liv-for="(permission, i) in data.permissions":key="i">                {{ permission }}            </li>        </ul>    </div></template><script>exportdefault {    name:"UserPermissionList",    props: {        data: {            type:Object,            required:true        }    }}</script>

<template>    <inputtype="checkbox"class="form-control":checked="value"@change='toggleChecked' /></template><script>export {name: 'CheckboxCell',data() {return {value:false,        }    },    methods: {toggleChecked() {constpayload= {                id:this.data.id,                checked:this.value,            }this.$emit('userEvent', payload)        }    },    props: {        data:Object,    }}</script>

<template>    <divclass="dashboard">        <h1>DASHBOARD</h1>        <buttonclass="btn btn-danger">            DELETE SELECTED ROWS        </button>        <vue-data-table:data="data":columns="columns"@userEvent="handleEvent" />    </div></template><script>exportdefault {data() {return {            data: [/**/],            columns: [/**/],            selectedRows: [],        }    },    methods: {handleEvent(payload) {const {checked,id }= payloadif (checked===true) {if (!this.selectedRows.includes(id))this.selectedRows.push(id)            }else {this.selectedRows=this.selectedRows.filter(rowId=> rowId!== id)            }        },deleteRows() {this.data=this.data.filter(row=>!this.selectedRows.includes(row.id))this.selectedRows= []        }    }}</script>

Action Buttons

<template>    <main>        <h1>DASHBOARD</h1>        <vue-data-tablev-bind="params"@userEvent="handleUserEvent"/>    </main></template><script>import {VdtActionButtons }from'@uwlajs/vue-data-table'exportdefault {data() {return {            params: {                data: users,                columns: [                    { key:'name' },                    { key:'job' },                    { component: VdtActionButtons, title:"actions" },                ],            },        }    },    methods: {handleUserEvent(payload) {console.log(payload.action,payload.data.name)        }    }}</script>

<template>    <main>        <h1>DASHBOARD</h1>        <vue-data-tablev-bind="params"@userEvent="handleUserEvent"/>    </main></template><script>import {VdtActionButtons }from'@uwlajs/vue-data-table'exportdefault {data() {return {            params: {                data: users,                columns: [                    { key:'name' },                    { key:'job' },                    {                        title:"view"                        component: VdtActionButtons,                        componentProps: { actions: ["view"] },                    },                    {                        title:"edit"                        component: VdtActionButtons,                        componentProps: { actions: ["edit"] },                    },                    {                        title:"delete"                        component: VdtActionButtons,                        componentProps: { actions: ["delete"] },                    },                ],            },        }    },    methods: {handleUserEvent(payload) {console.log(payload.action,payload.data.name)        }    }}</script>

Editable cells

columns:{['key':name,editable:true],['key':email,editable:true],['key':phone,editable:true],// ...}

{action:'updateCell',key:'<key String>',data:'<data Object>',value:'<value String>',}

<template>  <vue-data-table:data="data":columns="columns"@userEvent="handleUserEvent"/></template><script>exportdefault {/* ...*/    methods: {handleUserEvent(payload) {if (payload.action==='updateCell')            {// send some ajax request// ...// then update the cellthis.updateDataCell(payload.data,payload.key,payload.value)            }else {// some other event            }        },updateDataCell(row,field,value) {let ind=this.data.findIndex(r=>r.id===row.id)if (ind<0)returnlet newRow= {...this.data[ind]}            newRow[field]= valuethis.data.splice(ind,1, newRow)        },    }}</script>

Selectable rows

constprops={    columns=[{title:"",component:"vdt-cell-selectable"// <-- ADD THIS},{key:"name"},{key:"email"},/* ... */],    vKey="id",};constdata=[{id:1,name:"joe",email:"joe@example.com"},/* ... */]

{action:"select",selected:true||false,// this is the current value of the checkboxdata:{},// this is the current row (example, a user from an users array)}

constselected=ref([]);consthandleSelect(payload){constitem=payload.data;if(payload.selected){selected.value.push(item);}else{selected.value=selected.value.filter((x)=>x.id!==item.id);}}

Text

parameters(){return{data:[/**/],columns:[/**/],text:{PerPageText:"Number of users per page :entries",infoText:"Displaying :first to :last of :total users",emptyTableText:"No users found :(",}}}

Adding Language

import{languageServiceProvider}from"@uwlajs/vue-data-table";constloremIpsumLanguage={perPageText:"lorem ipsum",nextButtonText:"labore ipsum",/* more ... */};languageServiceProvider.setLang("lorem",loremIpsumLanguage)

// the default text for the download button in the export component is "export as"// we may want change that to "download as"languageServiceProvider.setLangText("en","downloadText","download as:")

Async data

<template>    <h1>Users</h1>    <vue-data-tablev-bind="vdtProps" /></template><script setup>constvdtProps= {    columns: [        { key:'name' },        { key:"email", title:"Email address" },    ],    fetchUrl:"http://app.test/api/users",    fetchCallback:async (url)=>fetch(url).then(response=>response.json())}</script>

{"data": [    {"id":1,"name":"Miss Juliet Heidenreich","email":"alvera13@example.org"},    {"id":2,"name":"Heloise Boehm","email":"joany.feil@example.net"},    {"id":3,"name":"Antwon Collins","email":"xhills@example.com},    /* ... */  ],"current_page": 1,"first_page_url":"http://app.test/api/users?page=1","from":1,"last_page":23,"last_page_url":"http://app.test/api/users?page=23","links": [    {"url":null,"label":"« Previous","active":false },    {"url":"http://app.test/api/users?page=1","label":"1","active":true },    {"url":"http://app.test/api/users?page=2","label":"2","active":false },    {"url":"http://app.test/api/users?page=3","label":"3","active":false },/* ...*/    {"url":"http://app.test/api/users?page=23","label":"23","active":false },    {"url":"http://app.test/api/users?page=2","label":"Next »","active":false }  ],"next_page_url":"http://app.test/api/users?page=2","path":"http://app.test/api/users","per_page":15,"prev_page_url":null,"to":15,"total":340}

<?phpuseApp\Models\User;useIlluminate\Support\Facades\Route;Route::get('users',function () {return User::paginate();});

<?phpuseApp\Models\User;useIlluminate\Support\Facades\Route;useSpatie\QueryBuilder\QueryBuilder;Route::get('users',function () {return QueryBuilder::for (User::class)        ->allowedSorts(['name','email'])        ->allowedFilters(['name','email'])        ->paginate();});

<?php// routes/app.phpuseApp\Http\Filters\FilterOrWhere;useApp\Models\User;useIlluminate\Support\Facades\Route;useSpatie\QueryBuilder\QueryBuilder;useSpatie\QueryBuilder\AllowedFilter;Route::get('users',function () {return QueryBuilder::for (User::class)        ->allowedSorts(['name','email'])        ->allowedFilters([            AllowedFilter::custom('name',newFilterOrWhere),            AllowedFilter::custom('email',newFilterOrWhere)        ])        ->paginate();});// app/Http/Filters/FilterOrWhere.phpnamespaceApp\Http\Filters;useSpatie\QueryBuilder\Filters\Filter;useIlluminate\Database\Eloquent\Builder;class FilterOrWhereimplements Filter{publicfunction__invoke(Builder$query,$value,string$property)    {$query->orWhere($property,'LIKE','%' .$value .'%');    }}

Layout

.data-table {display:grid;width:100%;grid-template-columns:25%25%25%25%;&>div {margin-top:1rem;max-width:100%;    }& >.data-table-search-filter,.data-table-pagination,.data-table-export-data {margin-left:auto    }@media (min-width:1401px) {grid-template-areas:"perPage search search search""table table table table""info pagination pagination download";    }@media (min-width:1051px) AND (max-width:1400px) {grid-template-areas:"perPage search search search""table table table table""info pagination pagination pagination"". . download download";    }@media (min-width:851px) AND (max-width:1050px) {grid-template-areas:"perPage search search search""table table table table""pagination pagination pagination pagination""info info download download";    }@media (max-width:800px) {& >.data-table-pagination {flex-wrap:wrap;        }    }@media (min-width:651px) AND (max-width:850px) {grid-template-areas:"perPage search search search""table table table table""pagination pagination pagination pagination""info info info info""download download download download";    }@media (max-width:650px) {grid-template-areas:"search search search search""perPage perPage perPage perPage""table table table table""pagination pagination pagination pagination""info info info info""download download download download";& >.data-table-per-page {margin-left:auto        }    }}

Custom Components

Footer

<template>  <tfootv-show="dataDisplayed.length > 0">    <td>Total</td>    <td></td>    <td>{{ totalAmount }}</td>    <td>{{ totalPrice }}</td>  </tfoot></template><script>exportdefault {  name:"TableFooter",  computed: {totalPrice() {let s=0;for (let fofthis.dataDisplayed)        s+=f.price*f.amount;return s;    },totalAmount() {let s=0;for (let fofthis.dataDisplayed)        s+=f.amount;return s;    }  },  props: {    data:Array,    dataDisplayed:Array,    dataFiltered:Array,  }}</script>

<template>    <data-tablev-bind="tableProps"/></template><script>importTableFooterfrom'./TableFooter.vue'exportdefault {/* ... some code*/data() {return {            tableProps: {                columns: [/* ... code*/ ],                data: [/* ... more code*/ ],                footerComponent: TableFooter,            }        }    }}</script>

/* early on */importTableFooterfrom'./TableFooter.vue'Vue.component("table-footer",TableFooter)/* later on */    footerComponent:"table-footer"

Sort Icon

<template>    <spanclass="data-table-sorting-icon">&nbsp;</span></template><style lang="scss" scoped>.data-table-sorting-icon {&::after {content:"\2193";    }&::before {content:"\2191";    }&::after,&::before {opacity:0.5;    }    [data-sorting="asc"]&::before, [data-sorting="desc"]&::after {opacity:1;    }}</style>

importSortingIconfrom"./path/to/SortIcon.vue";exportdefault{computed:{bindings(){return{SortingIconComponent:SortingIcon,data:[],/**/};}}}

Sorting Index Icon

<template>    <spanclass="data-table-sort-index">        {{ index }}    </span></template>

importSortingIndexfrom"./path/to/SortingIndex.vue";exportdefault{computed:{bindings(){return{SortingIndexComponent:SortingIndex,data:[],/**/};}}};

exportdefault{name:"SortingIndex",props:{index:{type:Number,required:true}}};

ROADMAP

LICENSE

CONTRIBUTING