DataGrid

edit on github

DataGrid is just a concept of displaying your database records in tabular format. We have implemented this system in Bagisto either you can use it to display data in tabular format or write code from scratch to display data in tabular format. In addition to datagrid, we have implemented additional features such as - sorting, filter, massAction . You may refer to below table for detailed information about the features.

class AttributeDataGrid extends DataGrid
{
    protected $index = 'id'; //the column that needs to be treated as index column

    protected $sortOrder = 'desc'; //asc or desc

    public function prepareQueryBuilder()
    {
        $queryBuilder = DB::table('attributes')
                ->select('id')
                ->addSelect('id', 'code', 'admin_name', 'type', 'is_required', 'is_unique', 'value_per_locale', 'value_per_channel');

        $this->setQueryBuilder($queryBuilder);
    }

    public function addColumns()
    {
        $this->addColumn([
            'index' => 'id',
            'label' => trans('admin::app.datagrid.id'),
            'type' => 'number',
            'searchable' => false,
            'sortable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'code',
            'label' => trans('admin::app.datagrid.code'),
            'type' => 'string',
            'searchable' => true,
            'sortable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'admin_name',
            'label' => trans('admin::app.datagrid.admin-name'),
            'type' => 'string',
            'searchable' => true,
            'sortable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'type',
            'label' => trans('admin::app.datagrid.type'),
            'type' => 'string',
            'sortable' => true,
            'searchable' => true,
            'filterable' => true
        ]);

        $this->addColumn([
            'index' => 'is_required',
            'label' => trans('admin::app.datagrid.required'),
            'type' => 'boolean',
            'sortable' => true,
            'searchable' => false,
            'wrapper' => function($value) {
                if ($value->is_required == 1)
                    return 'True';
                else
                    return 'False';
            }
        ]);

        $this->addColumn([
            'index' => 'is_unique',
            'label' => trans('admin::app.datagrid.unique'),
            'type' => 'boolean',
            'sortable' => true,
            'searchable' => false,
            'filterable' => true,
            'wrapper' => function($value) {
                if ($value->is_unique == 1)
                    return 'True';
                else
                    return 'False';
            }
        ]);

        $this->addColumn([
            'index' => 'value_per_locale',
            'label' => trans('admin::app.datagrid.per-locale'),
            'type' => 'boolean',
            'sortable' => true,
            'searchable' => false,
            'filterable' => true,
            'wrapper' => function($value) {
                if ($value->value_per_locale == 1)
                    return 'True';
                else
                    return 'False';
            }
        ]);

        $this->addColumn([
            'index' => 'value_per_channel',
            'label' => trans('admin::app.datagrid.per-channel'),
            'type' => 'boolean',
            'sortable' => true,
            'searchable' => false,
            'filterable' => true,
            'wrapper' => function($value) {
                if ($value->value_per_channel == 1)
                    return 'True';
                else
                    return 'False';
            }
        ]);
    }

    public function prepareActions()
    {
        $this->addAction([
            'type' => 'Edit',
            'method' => 'GET', //use post only for redirects only
            'route' => 'admin.catalog.attributes.edit',
            'icon' => 'icon pencil-lg-icon'
        ]);

        $this->addAction([
            'type' => 'Delete',
            'method' => 'POST', //use post only for requests other than redirects
            'route' => 'admin.catalog.attributes.delete',
            'icon' => 'icon trash-icon'
        ]);
    }

    public function prepareMassActions()
    {
        $this->addMassAction([
            'type' => 'delete',
            'action' => route('admin.catalog.attributes.massdelete'),
            'label' => 'Delete',
            'method' => 'DELETE'
        ]);
    }
}

datagrid

Global Properties of DataGrid

Name functionality
index This variable is defined in grid, and the value assigned to this variable must be unique i.e., id so that data will be uniquely identified and operations performed will be based on your index variable
sortOrder sortOrder is used to arrange the order in ascending/descending in the dataGrid file, we have to set sortOrder variable to asc/desc
queryBuilder It can be used to perform most database operations in your application
enableMassAction This accepts boolean values true/false to enable/disable the mass action on datagrid
enableAction This accepts boolean values true/false to enable/disable the action column of datagrid
paginate While creating your grid file you have to declare paginate variable and set it to true to allow pagination on your page
itemsPerPage In itemsPerPage, a numeric value is assigned to itemsPerPage variable to display items per page
enableFilterMap this accepts boolean values true/false to enable/disable the filter on the basis of columns

Steps for how to create DataGrid

  1. Create a folder ‘DataGrid’ in your package, inside it create a file for your datagrid folder.

  2. We have created DataGrid abstract class in UI package. In DataGrid file, a list of properties and methods are declared. So, while creating datagrid only you have to extend the DataGrid abstract class and use it in your datagrid file.

  3. In DataGrid abstract class, two abstract methods are declared prepareQueryBuilder() and addColumns() . We can prepare grid by defining these two methods

    • prepareQueryBuilder() : In this method, records are retrieved through queries that is applicable on database and stored in a array. When records are retrieved, $this->setQueryBuilder($queryBuilder) setQueryBuilder method is called

      • setQueryBuilder() : This method is written in DataGrid file of UI package. This is used for setting the $queryBuilder array
    • addColumns() : In this method, the columns are created to be displayed in grid. Inside this method, addColumn() is called to create single column. Inside this function, parameter accepts the array in "key" => "value" pairs. Some of the essential keys are described below :

    Name functionality
    index This variable is defined in grid, and the value assign to this variable must be unique i.e., id so that data will be uniquely identified and operation perform will be based on your index variable
    label In this key, the name of column is defined
    type This key accepts the type of data in column
    searchable This accepts boolean values true/false to make the column searchable
    sortable This accepts boolean values true/false to make the column sortable
    filterable This accepts boolean values true/false to make the column filterable
    wrapper perform actions on basis of condition satisfied
    • prepareActions() : Additionally, this method is defined when there is need to perform any action such as edit or delete on grid. Inside it, addAction() is called to define particular action

      • addAction() : It is defined when you want to add action a number of times for individual action to be performed on grid
    Name functionality
    type Edit/delete
    method HTTP methods are declared
    route This key accepts the route of icon
    icon class of icon to be displayed in action column you may prefer text also
    confirm_text A confirm box is open on clicking action icon if you want the user to verify or accepts something. you can include message here
    label The text to be displayed in written here, you may use translation also here

add-action

Warning

  • Use JavaScript with wrapper perperty set to true when really needed

  • Return static blade files loaded with scripts in it with caution