Package LarGridView

LarGridView package for working with grid view in Laravel with Vue.js

A simple package to view the data table on Vue with the Laravel web framework. Easy to configure and easy to operate. The main task of the grid package takes on. You do the rest.

Installation

npm install largridview

Usage

  import Vue from 'vue'
  
  import * as LarGridView from 'largridview'
  Vue.use(LarGridView)

...

  <LarGridView :url="'api/all'"
        :fields="[{width: '10%', name: 'id', label: '', isSort: true}, {width: null, name: 'action', label: 'Actions', isAction: true}]"
        @response="onResponse"
        :isBusy="loadingSendingStatus"
        sort-key='id'>
        <tr v-for="(item, index) in items" :key="index">
            ...
        </tr>
  </LarGridView>

Props

Stack

| Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | url | String | Yes | '/' | URL to get the required data. If the line is empty, then data will not be sent. | | fields | Array | Yes | [] | Fields to display. Example: [{width: '10%', name: 'id', label: '', isSort: true}, {width: null, name: 'action', label: 'Actions', isAction: true}]. | | dataPath | String | No | data.list | The path to receiving data from a pagination request response. | | data | Object | No | {} | It is necessary in cases when you need to control some data for sending. | | isSend | Boolean | No | true | Enable automatic data sending. | | isBusy | Boolean | No | false | Loading data into a table. | | isLoadingOn | Boolean | No | true | Enable basic data loading. | | isSearch | Boolean | No | false | Enable table search. | | isPerPageOn | Boolean | No | true | Enable selection of the number of table rows per page. | | isPaginateOn | Boolean | No | true | Enable pagination. | | isPaginateSimple | Boolean | No | false | Simple pagination. | | isPaginateAuto | Boolean | No | true | Enable automatic pagination detection - simple pagination or not. | | sortKey | String | No | null | Default Sort Column. | | perPage | Array | No | [20, 50, 100, 200] | The number of rows for the table. | | perPageDefault | Number | No | 20 | Default row count for table. | | idTable | String | No | tableID | Table id for better control. | | classTable | String | No | | Class for the table itself. | | `classBlock` | String | No | | Class for the block itself. | | placeholderFilterSearch | String | No | Search... | Placeholder for search input. | | textFromTo | String | No | Showing :from to :to | | | textTotal | String | No | of :total | | | textNext | String | No | Next › | | | textPrev | String | No | ‹ Prev | | | paginateDeltaLeft | Number | No | 2 | The number of pages to the left of the current page. | | paginateDeltaRight | Number | No | 2 | The number of pages to the right of the current page. |

Events

| Name | Type | Description | | --- | --- | --- | | loading | Boolean | Data load status change event. | | response | Object | Event when receiving data from the server. | | filter:select | Number | The event of selecting the number of lines displayed on the page. | | filter:sort | Object | Column sort selection event. | | filter:search | String | The event of entering text into the search string. | | page:select | String | The event of clicking on the pagination button on. | | page:next | String | Pagination forward button click event. | | page:prev | String | Pagination back button click event. |