How to create Datagrid in Bagisto

Updated 19 May 2023

Here we are going to implement how to create custom Datagrid in Bagisto. For this here are some of the steps which needed to be followed:-

Step 1 :
Assumig that you created package lets say bagisto\TestPackage in the specified directory structure. Now after this create a Datagrid folder inside the src folder of the package:-

Step 2 :
Inside Datagrid folder create file HelloWorldDatagrid.php with class name HelloWorldDatagrid same as file name. While creating your own DataGrid you need to only extends the Webkul\Ui\DataGrid\DataGrid abstract class inside your HelloWorldDatagrid.php class.

Step 3 :
In Webkul\Ui\DataGrid\DataGrid abstract class there is two abstract methods prepareQueryBuilder() and addColumns() using these two you can create datagrid. Here I am taking the example customer to fetch the data from database:-

prepareQueryBuilder() – This method is used to fetch data from the database and collections based on database query.When records are retrieved, $this->setQueryBuilder($queryBuilder)  method is called.
Inside the prepareQueryBuilder() we use following function to retrieve the data:-

setQueryBuilder($queryBuilder) – This method is written in Webkul\Ui\DataGrid\DataGrid. This method is used to set $queryBuilder.

addFilter() – This method is used to filter the data of datagrid according to the requirement.

Step 4 :
Now to add columns in datagrid we use addColumns() function. In addColumns() function the parameter is accepted in key-value pair :-

The essential key which are used is:-

index         – The value assigned to this key must be unique, so that data will be uniquely identified and operation will based on the index  value.Something like id.

label          – This key used to give datagrid column header name

type           – It defines the type of data in as :- number,boolean…

searchable – This accepts boolean values true or false to make the column searchable.

sortable     – This accepts boolean values true or false to make the column sortable.

filterable   – This accepts boolean values true or false to make the column filterable.

wrapper    – Perform action based on condition or customisation to the value.


Step 5 :
Now to make it visible on front include datagrid-plus in your blade file with the route name:-


Step 6:
Make route in Route folder:-


Step 7 :
Make controller in Controller folder :-

Here is front view of datagrid that is created:-

Some additional actions can also be performed in datagrid using prepareActions() and prepareMassActions():-

prepareMassActions() – Using this method actions can be applied to multiple data like (edit or delete…).

prepareActions()  –  Using prepareActions() you can perform single action like update or delete. In this method addAction() is called to define particular action.

addAction() – It is used to add actions like edit or delete to each row of datagrid.

Final datagrid which look like:-

Note: I’ve explored this while contributing to the Laravel-based project Bagisto, you can also learn a lot from the enterprise-level open-source Bagisto and do contribution to it.

Thanks for reading this blog. I hope you’ll get an idea of how to create Custom Datagrid. Please share your reviews on this, that will support me to write more.

Additionally, you can also hire laravel developers to help you with your project requirements and ensure the successful implementation of your ideas. If you want additional features to your e-commerce website, then you can explore our extension.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home