Usage

How to use

Columns

Declare field required to be display as an array.

'field' Name of the field or append attribute from eloquent model

'title' Description of the displayed data

'style' Styling you would like to use in columns

		$columns = [
		   [ 'field' => 'name',
		   'title' => __('product.product').' '.__('global.name') ,
		   'style' => 'text-xs-left text-capitalize'],
		   [ 'field' => 'description',
		   'title' => __('product.product').' '.__('global.desc') ,
		   'style' => 'text-xs-left']
		];

Init The Grid

		$grid = new VueGrid;

Set Grid Title

		// Set tabel title 
		$grid->setTitle(__('product.product'));

Register Columns To Grid

		// Set the header & column field   
		$grid->setColumns($columns);

Define Data Source Route

Define where vuegrid can retrieve source data using ajax request

		// Set Data API URL
		$grid->apiUrl( route('product.api.list') );

Data Source can be preload for immediate display

		// Preload data when page load : optional
		$grid->setModel($this->product->productListing($request));

On Page Filter

By default on page filtering are disabled. Initiate the function will automatically set to TRUE

		// Display Search Input : optional
		$grid->autoFilter();

Declare All Action Required

'action' Descriptions for action.

'delete' Using this will init the delete action

'icons' Choose Your icon to represent the action

'url' Where the action will go

'key' field id if data referring are needed

		// Declare action available to data grid
		$grid->action([
		// define action taken for each row of data
		[ 'action' => trans('joesama/vuegrid::datagrid.buttons.edit') , // Action Description
		    'url' => '', // URL for action
		    'icons' => 'fas fa-pencil-alt', // Icon for action : optional
		    'key' => 'id'  ],
		[ 'action' => trans('joesama/vuegrid::datagrid.buttons.edit') , // Action Description
		    'url' => '', // URL for action
		    'icons' => 'fas fa-info', // Icon for action : optional
		    'key' => 'id'  ],  
		[ 'action' => trans('joesama/vuegrid::datagrid.buttons.edit') , // Action Description
		    'url' => '', // URL for action
		    // 'icons' => 'fas fa-info', // Icon for action : optional
		    'key' => 'id'  ],  
		[ 'delete' => trans('joesama/vuegrid::datagrid.buttons.edit') , // Action Description
		    'url' => route('product.api.delete'), // URL for action
		    // 'icons' => 'fa fa-search', // Icon for action : optional
		    'key' => 'id'  ], 
		]);

Build The Table

		// Build Vuegrid Table
		$table = $grid->build();

Pass The Table To Your View

		return view('component.product.list',compact('table'));