Vue Datasource

Demo

Donate

Install/Usage

$ npm install vue-datasource

<divid="#app"><server-datasource:source="items":total="total_of_items":columns="columns":actions="actions"></server-datasource></div>

import{ServerDatasource}from'vue-datasource'newVue({el:'#app',components:{        ServerDatasource},data(){return{items:[...],total:100,columns:[...],actions:[...]}}});

Documentation

Available Props

Available Events

Columns

{    ...,columns:[{name:'Name',// Table column name to displaykey:'name',// Key name from row object}]}

[    ...,{name:'Foo',last_name:'Bar'role_id:1,role:{name:'admin'}}]

{    ...,columns:[{name:'Role',key:'role.name'}]}

Sort column

{    ...,columns:[{name:'Name',key:'name',order:true}]}

{sort:{key:'name',order:false},type:'DESC'}

Render column

{    ...,columns:[{name:'Name',key:'name',render(value){// Render callbackreturn`Enginner${value}`;}}]}

{    ...,columns:[{name:'Name',key:'key',render(value,row){return<strong>{value}</strong>}}]}

Translation Structure

{limit:'Limit',search:'Search',placeholder_search:'Type to search..',records_not_found:'No records found',pagination:{show:'Showing',to:'to',of:'of',entries:'entries'}}

Action Event Sctructure

{    ...,actions:[{text:'Click me',// Button labelicon:'glyphicon glyphicon-check',// Button iconclass:'btn-primary',// Button class (background color)show(selectedRow){// Event to define a condition to display the button with the selected rowreturntrue},event(e,row){// Event handler callback. Gets event instace and selected rowconsole.log('Click row: ',row);// If no row is selected, row will be NULL}}]}

Development

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpmtest

Implementation examples

Contributions

License

Crafted by Javier Diaz. Translation byitsuwaribito