lara-vue-datatable

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";

   <TableLength :options="tableLength"/>
          <search></search>
          <data-table
              :url="'http://neomeet.local/api/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/>

        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