Data Grid Vuetify: A Vue Component for Laravel Grids

Data Grid Vuetify

Data grid package used to render advanced grids with a matching back-end package.

Allows for searching, filtering, paging & some other advanced features.


You can install the package via composer:

npm install data-grid-vuetify

Please also note that a companion back-end package is required to use this package to it's fullest:

composer require eawardie/data-grid-laravel


In you main.js or app.js register this package as a Vue plugin.

import DataGrid from 'data-grid-vuetify';


After registering the package the main component can be used as such.

<data-grid :data="data"></data-grid>

The data property here receives its data from the data-grid-laravel package on the back-end.



The selectable property allows for row selection by checkboxes on the data grid itself. Using this property also requires the use of the item-value property.


The item-value property is used to indicate a unique item identifier. The property is only intended for use with the seectable property.


The return-object property returns the entire item object on select instead on the associated item value from the item-value property.


The actions property is used to pass actions to the actions to each data grid item row. Actions consist of an array of objects that build actions with a series of properties. these are covered below:

  • color - Sets the color of the action
  • label - Sets the action label
  • icon - Sets the icon - takes a string or callback for dynamic icons - bind(this)
  • confimation - Apply a confirmation dialog on action event using this string - more info below
  • disabled - Sets whether the action should be disabled
  • show - Evaluates if the action should be displayed, receives a callback - bind(this)
  • closure - Callback function called by the action event itself - bind(this)

The confirmation property can be used in a more advanced way to edit the look and feel of the confirmation dialog. Either pass a string for the confirmation message, or a set of options via object notation. The example below shows all available options.

confirmation: {
   title: '<title>',
      text: '<text>',
      buttons: {
      cancel: {
          text: '<cancel button text>',
          color: '<cancel button color>',
      confirm: {
          text: '<confirm button text>',
          color: '<confirm button color>',


The aditional-actions property is used to pass additional actions to the actions drawer for the data-grid. These actions operate the same as the actions property.


The hide-additional-actions hides the action's drawer if it is not being used.

value / v-model

The value property is used to get the current selected items on the data-grid. For auto synced values use v-model instead.


The drawer property can be used to mutate the additional actions drawer state from outside. Simply pass a data property to this property and change it as needed.


The close-drawer-on-data-changes property can be used to force close the drawer when any data changes occur. Data changes can include but are not limited to:

  • Applying a search query
  • Applying a filter
  • Sorting data
  • Changing pages



The @click:row event can be used to enable clicking on data grid rows. The event payload will be the row item itself.

Download Details:

Author: EA-Wardie
Source Code: 
License: MIT license

#laravel #data #grid #vue

Data Grid Vuetify: A Vue Component for Laravel Grids
1.55 GEEK