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} from "lara-vue-datatable";

    <TableLength :options="tableLength" @paginate="getUsers()"/>
          <search @get-users="getUsers($event)"></search>
          <data-table
              :dataList="users"
              :columns="columns"
              :dbcolumns="dbcolumns"
              :styles="'table-striped table-responsive'"
              :buttons="[
            {
              label: 'Edit',
              class: 'btn btn-success btn-sm',
              action: 'edit'
            },{
              label: 'Delete',
              class: 'btn btn-danger btn-sm',
              action: 'delete'
            },

        ]"
          >
          </data-table>

          <Pagination :pagination="users"
                      @paginate="getUsers()"
                      :offset="4"/>

        export default {
            components: {
                TableLength,
                Pagination,
                SandeshVueTable,
                Search
            },
            data() {
                return {
                    users: {},
                    tableLength: {
                        default: 3,
                        lengths: [1,2,3,4,5],
                    },
                    columns: ['Name','Slug','Phone','Email'],
                    dbcolumns: ['name','slug','phone','email'],
                }
            },
            methods: {
                getUsers(search) {
                      console.log('search data', search);
                      axios.get('your api url?per_page='+this.tableLength.default+'&page='
                          +this.users.current_page+'&searchText='+search)
                          .then((response) => {
                              this.users = response.data;
                          });
                  },
            }
        }

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