lara-vue-datatable/readme.md

Laravel and Vuejs based custom datatable with pagination, search and page length

<article>
    <h1>Laravel Vue Datatable</h1>
    <p>A Vuejs datatable with search and pagination component for Laravel paginators that works with almost all frameworks.</p>
    <h1> Requirements </h1>
    <ul>
        <li>Vuejs 2.x +</li>
        <li>Laravel 5.x +</li>
    </ul>
    <h1>Install</h1>
    
        npm install lara-vue-datatable
<h1> Usage</h1>

        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);
                          }
                      }
                },
            }

<h1>Laravel Method Example</h1>

        public function getUsers()
        {
            $length = request('per_page')??5;
            $search = request('searchText') ?? request('searchText');
            return User::where('name','like', '%'.$search.'%')->paginate($length);
        }
<h1>Development</h1>
<p>To work on the library locally, run the following command:</p>

        npm run dev
<p>This will boot development server with Test component </p>

<h1>Credits</h1>
<p>Laravel Vue Pagination is created by Sandesh Satyal from NeoDigital Nepal Pvt Ltd. Released under the MIT license.</p>

<h1> Keywords </h1>
<p>Vue Vuejs component laravel datatable pagination</p>
</article>