Laravel Vue Datatable
A Vuejs datatable with search and pagination component for Laravel paginators that works with almost all frameworks.
Requirements
- Vuejs 2.x +
- Laravel 5.x +
Install
npm install lara-vue-datatable
Usage
import {DataTable, TableLength, Pagination, Search, TableStore} from "lara-vue-datatable";
export default {
components: {
TableLength,
Pagination,
SandeshVueTable,
Search,
TableStore
},
data() {
return {
tableLength: {
default: 3,
lengths: [1,2,3,4,5],
},
columns: ['Name','Slug','Phone','Email'],
dbcolumns: ['name','slug','phone','email'],
}
},
methods: {
edit(data) {
prompt('Editing ' + data.name);
},
destroy(data) {
alert('Are you sure you want to delete ' + data.name + 'from system ?' );
},
}
computed: {
action() {
return TableStore.getters.getAction;
}
},
watch: {
action() {
if (this.action.method === 'delete') {
this.destroy(this.action.data);
} else if (this.action.method === 'edit') {
this.edit(this.action.data);
}
}
},
}
Laravel Method Example
public function getUsers()
{
$length = request('per_page')??5;
$search = request('searchText') ?? request('searchText');
return User::where('name','like', '%'.$search.'%')->paginate($length);
}
Development
To work on the library locally, run the following command:
npm run dev
This will boot development server with Test component
Credits
Laravel Vue Pagination is created by Sandesh Satyal from NeoDigital Nepal Pvt Ltd. Released under the MIT license.
Keywords
Vue Vuejs component laravel datatable pagination