So in this article, we will learn how to customize DataGrid in Bagisto.
The DataGrid is a powerful tool in Bagisto, designed to help visualize and manage data within your application. It enables you to create visually appealing displays for various types of information, such as product listings, order details, customer lists, and more. Additionally, the DataGrid offers the ability to effortlessly update or delete records.
If you prefer not to use the default DataGrid and wish to customize its appearance and actions, you can do it very easily. So, if you wish to customize the DataGrid then you can follow these below steps.
#1 Create a DataGrid
Okay, then let’s create a fresh new DataGrid something like below. Here You can add more columns as you want.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?php namespace Webkul\Marketplace\DataGrids\Admin; use Illuminate\Support\Facades\DB; use Webkul\DataGrid\DataGrid; class ReviewDataGrid extends DataGrid { /** * Primary column. * * @var string */ protected $primaryColumn = 'id'; /** * Prepare query builder. * * @return \Illuminate\Database\Query\Builder */ public function prepareQueryBuilder() { $table_prefix = DB::getTablePrefix(); $queryBuilder = DB::table('marketplace_seller_reviews') ->leftJoin('customers', 'marketplace_seller_reviews.customer_id', '=', 'customers.id') ->leftJoin('marketplace_sellers', 'marketplace_seller_reviews.marketplace_seller_id', '=', 'marketplace_sellers.id') ->leftJoin('customers as seller_customers', 'marketplace_sellers.customer_id', '=', 'seller_customers.id') ->select( 'rating', 'comment' ) ->addSelect( DB::raw('CONCAT(' . $table_prefix . 'customers.first_name, " ", ' . $table_prefix . 'customers.last_name) as customer_name') ); return $queryBuilder; } /** * Prepare columns. * * @return void */ public function prepareColumns() { $this->addColumn([ 'index' => 'customer_name', 'label' => trans('marketplace::app.admin.seller-reviews.index.datagrid.customer-name'), 'type' => 'string', 'searchable' => true, 'sortable' => true, 'filterable' => true ]); $this->addColumn([ 'index' => 'rating', 'label' => trans('marketplace::app.admin.seller-reviews.index.datagrid.rating'), 'type' => 'string', 'searchable' => true, 'sortable' => true, 'filterable' => true ]); $this->addColumn([ 'index' => 'comment', 'label' => trans('marketplace::app.admin.seller-reviews.index.datagrid.comment'), 'type' => 'string', 'sortable' => true, 'searchable' => false, 'filterable' => true ]); } } |
#2 DataGrid to JSON
Here you have to create routes and controllers to index the blade file. And, Here you have to add the below code inside your controller’s method that is used to display the blade file. So, We can use the same method to get DataGrid records. Do not forget to import the same DataGrid Class on your controller before this.
|
1 2 3 |
if (request()->ajax()) { return app(ReviewDataGrid::class)->toJson(); } |
#3 Using Default DataGrid
If you still want to use the default Bagisto DataGrid then you can use something like below.
|
1 2 3 4 5 6 7 |
<!-- For admin --> <x-shop::datagrid :src="route('shop.sellers.reviews.index')"> </x-shop::datagrid> <!-- For admin --> <x-admin::datagrid :src="route('admin.sellers.reviews.index')"> </x-admin::datagrid> |
#4 Override the DataGrid
Here we are going to change the UI of the DataGrid to look better than the default DataGrid. Here we are going to add star icons to show the seller ratings.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!-- Datagrid --> <x-shop::datagrid src="{{ route('shop.sellers.reviews.index') }}" :isMultiRow="true" > <!-- Datagrid Header --> <template #header="{ columns, records, sortPage, selectAllRecords, applied }"> <template v-if="! isLoading"> <div class="row grid grid-cols-[1fr_1fr_2fr] grid-rows-1 items-center px-[16px] py-[10px] border-b-[1px]"> <div class="flex gap-[10px] items-center" v-for="(columnGroup, index) in [['customer_name'], ['rating', 'comment']]" > <p class="text-[14px] leading-[22px] font-medium"> <span class="[&>*]:after:content-['_/_']"> <template v-for="column in columnGroup"> <span class="after:content-['/'] last:after:content-['']" :class="{ 'text-gray-800 dark:text-white font-medium': applied.sort.column == column, 'cursor-pointer hover:text-gray-800 dark:hover:text-white': columns.find(columnTemp => columnTemp.index === column)?.sortable, }" @click=" columns.find(columnTemp => columnTemp.index === column)?.sortable ? sortPage(columns.find(columnTemp => columnTemp.index === column)): {} " > @{{ columns.find(columnTemp => columnTemp.index === column)?.label }} </span> </template> </span> <i class="ltr:ml-[5px] rtl:mr-[5px] text-[16px] text-gray-800 dark:text-white align-text-bottom" :class="[applied.sort.order === 'asc' ? 'icon-down-stat': 'icon-up-stat']" v-if="columnGroup.includes(applied.sort.column)" ></i> </p> </div> </div> </template> </template> <template #body="{ columns, records, setCurrentSelectionMode, applied, isLoading, performAction }"> <template v-if="! isLoading"> <div class="row grid grid-cols-[1fr_1fr_2fr] grid-rows-1 items-center px-[16px] py-[10px] border-b-[1px]" v-for="record in records" > <!-- Customer Name --> <div class="flex gap-[10px]"> <div class="flex flex-col gap-[6px]"> <p class="text-[14px] leading-[22px] text-gray-800 font-semibold" v-text="record.customer_name" > </p> </div> </div> <!-- Rating, Comment --> <div class="flex flex-col gap-[6px]"> <div class="flex"> <x-shop::products.star-rating :is-editable="false" ::value="record.rating" > </x-shop::products.star-rating> </div> <p class="text-[14px] leading-[22px] text-gray-600" v-text="record.comment" > </p> </div> </div> </template> </template> </x-shop::datagrid> |
Here you can write your additional Vue.js code or Tailwind CSS to improve DataGrid Functionality and its User Interface.
Thank you for reading this tutorial. We hope you found it helpful. If you have any questions or encounter any issues, please feel free to leave a comment below.
Additionally, if you’re looking to hire Laravel developers, you can visit the Hire Laravel Developer page. This platform provides a pool of experienced Laravel developers who can help you with your project requirements and ensure the successful implementation of your ideas.
Furthermore, if you’re interested in enhancing the functionality of Bagisto, you can check out the Extensions page on the official Bagisto website. This page showcases a wide range of extensions that can be integrated into your Bagisto e-commerce platform to add new features, improve user experience, and optimize your online store’s performance.
