1. largridview

largridview

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.