Vue Datasource

Demo

Install/Usage

$ npm install vue-datasource

<divid="#app"><datasourcelanguage="en":table-data="information.data":columns="columns":pagination="information.pagination":actions="actions"v-on:change="changePage"v-on:searching="onSearch"></datasource></div>

importDatasourcefrom'vue-datasource'newVue({el:'#app',components:{        Datasource},data(){return{information:{pagination:{...},data:[...]},columns:[...],actions:[...]}},methods:{changePage(values){...},onSearch(searchQuery){...}}});

Available Props

Available Events

Available Languages

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'}]}

Render column

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

Pagination Structure

{    ...,pagination:{total:25,// Number of total rows (default 0)per_page:15,// Number of rows to show (default 15)current_page:1,// Actual pagelast_page:2,// Last pagefrom:1,// Beginning of visible rowsto:15// End of visible rows}}

Action Event Sctructure

{    ...,actions:[{text:'Click me',// Button labelicon:'glyphicon glyphicon-check',// Button iconclass:'btn-primary',// Button class (background color)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}}]}

Implementation examples

Contributions

License

Created by Javier Diaz. Translation enhancement by [itsuwaribito] (https://github.com/itsuwaribito)