diff --git a/config/datagrid.php b/config/datagrid.php
index 6a64430b6..99227936b 100644
--- a/config/datagrid.php
+++ b/config/datagrid.php
@@ -27,9 +27,9 @@ return [
     /**
      * Default pagination
      *
-     * Accepted Values = integer
+     * Accepted Value = integer
      */
-    // 'pagination' => 10,
+    'pagination' => 10,
 
     'operators' => [
         'eq' => "=",
diff --git a/packages/Webkul/Admin/src/DataGrids/TestDataGrid.php b/packages/Webkul/Admin/src/DataGrids/TestDataGrid.php
index 9a9f9b3bb..ee9985354 100644
--- a/packages/Webkul/Admin/src/DataGrids/TestDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/TestDataGrid.php
@@ -17,7 +17,7 @@ class TestDataGrid extends AbsGrid
 
     public function prepareQueryBuilder()
     {
-        $queryBuilder = DB::table('products_grid')->addSelect($this->columns)->leftJoin('products', 'products_grid.product_id', '=', 'products.id')->where('products.parent_id', '=', null);
+        $queryBuilder = DB::table('products_grid')->select('product_id as id')->addSelect($this->columns)->leftJoin('products', 'products_grid.product_id', '=', 'products.id')->where('products.parent_id', '=', null);
 
         $this->setQueryBuilder($queryBuilder);
     }
@@ -95,12 +95,49 @@ class TestDataGrid extends AbsGrid
         ]);
     }
 
+    public function prepareActions() {
+        $this->prepareAction([
+            'type' => 'Edit',
+            'route' => 'admin.catalog.products.edit',
+            'icon' => 'icon pencil-lg-icon'
+        ]);
+
+        $this->prepareAction([
+            'type' => 'Delete',
+            'route' => 'admin.catalog.products.delete',
+            'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
+            'icon' => 'icon trash-icon'
+        ]);
+    }
+
+    public function prepareMassActions() {
+        $this->prepareMassAction([
+            'type' => 'delete',
+            'action' => route('admin.catalog.products.massdelete'),
+            'method' => 'DELETE'
+        ]);
+
+        $this->prepareMassAction([
+            'type' => 'update',
+            'action' => route('admin.catalog.products.massupdate'),
+            'method' => 'PUT',
+            'options' => [
+                0 => true,
+                1 => false,
+            ]
+        ]);
+    }
+
     public function render()
     {
         $this->addColumns();
 
+        $this->prepareActions();
+
+        $this->prepareMassActions();
+
         $this->prepareQueryBuilder();
 
-        return view('ui::testgrid.table')->with('results', ['records' => $this->getCollection(), 'columns' => $this->allColumns]);
+        return view('ui::testgrid.table')->with('results', ['records' => $this->getCollection(), 'columns' => $this->allColumns, 'actions' => $this->actions, 'massactions' => $this->massActions]);
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Http/Controllers/ProductController.php b/packages/Webkul/Product/src/Http/Controllers/ProductController.php
index 2981fe093..619da0939 100644
--- a/packages/Webkul/Product/src/Http/Controllers/ProductController.php
+++ b/packages/Webkul/Product/src/Http/Controllers/ProductController.php
@@ -203,6 +203,7 @@ class ProductController extends Controller
      */
     public function massDestroy()
     {
+        dd(request()->input());
         $productIds = explode(',', request()->input('indexes'));
 
         foreach ($productIds as $productId) {
@@ -221,12 +222,17 @@ class ProductController extends Controller
      */
     public function massUpdate()
     {
+        dd(request()->input());
         $data = request()->all();
 
         if (!isset($data['massaction-type'])) {
             return redirect()->back();
         }
 
+        if(!$data['massaction-type'] == 'update') {
+            return redirect()->back();
+        }
+
         $productIds = explode(',', $data['indexes']);
 
         foreach ($productIds as $productId) {
diff --git a/packages/Webkul/Ui/src/DataGrid/AbsGrid.php b/packages/Webkul/Ui/src/DataGrid/AbsGrid.php
index 939f9a57e..a54542629 100644
--- a/packages/Webkul/Ui/src/DataGrid/AbsGrid.php
+++ b/packages/Webkul/Ui/src/DataGrid/AbsGrid.php
@@ -19,10 +19,18 @@ abstract class AbsGrid
 
     protected $collection = [];
 
+    protected $actions = [];
+
+    protected $massActions = [];
+
     protected $request;
 
     protected $parse;
 
+    abstract public function prepareMassActions();
+
+    abstract public function prepareActions();
+
     abstract public function prepareQueryBuilder();
 
     abstract public function addColumns();
@@ -68,6 +76,14 @@ abstract class AbsGrid
         $this->queryBuilder = $queryBuilder;
     }
 
+    public function prepareAction($action) {
+        array_push($this->actions, $action);
+    }
+
+    public function prepareMassAction($massAction) {
+        array_push($this->massActions, $massAction);
+    }
+
     public function getCollection()
     {
         $p = $this->parse();
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/components.scss b/packages/Webkul/Ui/src/Resources/assets/sass/components.scss
index 5928b1607..980448fc8 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/components.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/components.scss
@@ -85,11 +85,10 @@
     align-items: center;
     font-size: 14px;
     height: 28px;
-    width: 98px;
     border-radius: 2px;
 
     .wrapper {
-        margin-left: 10px;
+        margin-left: 5px;
         padding: 0px 5px 0px 5px;
         display: flex;
         flex-direction: row;
@@ -100,4 +99,8 @@
         color: #000311;
         letter-spacing: -0.22px;
     }
+}
+
+.filter-tag:not(first-child) {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
index 5dffa79eb..1e349aa7d 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
@@ -2,6 +2,7 @@
     <div class="filter-row-one">
         <div class="search-filter" style="display: inline-flex; align-items: center;">
             <input type="search" id="search-field" class="control" placeholder="Search Here..." value="" />
+
             <div class="ic-wrapper">
                 <span class="icon search-icon search-btn"></span>
             </div>
diff --git a/packages/Webkul/Ui/src/Resources/views/testgrid/body.blade.php b/packages/Webkul/Ui/src/Resources/views/testgrid/body.blade.php
index e68b59ad1..e4c0a932b 100644
--- a/packages/Webkul/Ui/src/Resources/views/testgrid/body.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/testgrid/body.blade.php
@@ -1,16 +1,33 @@
 <tbody>
     @foreach($records as $key => $record)
-
         <tr>
-            <td>
-                <span class="checkbox">
-                    <input type="checkbox" class="indexers" name="checkbox[]">
-                    <label class="checkbox-view" for="checkbox1"></label>
-                </span>
-            </td>
+            <?php $i=0 ?>
             @foreach($record as $key => $column)
-                <td>{{ $column }}</td>
+                @if($i == 0)
+                    <td>
+                        <span class="checkbox">
+                            <input type="checkbox" v-model="dataIds" @change="select" :value="{{ $column }}">
+                            <label class="checkbox-view" for="checkbox1"></label>
+                        </span>
+                    </td>
+                @endif
+
+                @if($i > 0)
+                    <td>{{ $column }}</td>
+                @endif
+
+                <?php $i++ ?>
             @endforeach
+
+            <td style="width: 50px;">
+                <div class="actions">
+                    @foreach($actions as $action)
+                        <a href="{{ route($action['route'], $record->id) }}">
+                            <span class="{{ $action['icon'] }}"></span>
+                        </a>
+                    @endforeach
+                </div>
+            </td>
         </tr>
     @endforeach
 </tbody>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/testgrid/pagination.blade.php b/packages/Webkul/Ui/src/Resources/views/testgrid/pagination.blade.php
new file mode 100644
index 000000000..90116cf07
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/views/testgrid/pagination.blade.php
@@ -0,0 +1,3 @@
+<div class="pagination">
+    {{ $results->links() }}
+</div>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/testgrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/testgrid/table.blade.php
index c9ac5f37f..3c2ec1c52 100644
--- a/packages/Webkul/Ui/src/Resources/views/testgrid/table.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/testgrid/table.blade.php
@@ -21,6 +21,7 @@
                                     <i class="icon arrow-down-icon active"></i>
                                 </div>
                             </div>
+
                             <div class="dropdown-list bottom-right" style="display: none;">
                                 <div class="dropdown-container">
                                     <ul>
@@ -143,11 +144,46 @@
                 </div>
 
                 <table>
-                    <thead>
+                    <thead v-if="massActionsToggle">
+                        @if(isset($results['massactions']))
+                            <tr class="mass-action" style="height: 63px;" v-if="massActionsToggle">
+                                <th colspan="100" style="width: 100%;">
+                                    <div class="mass-action-wrapper" style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
+
+                                        <span class="massaction-remove" v-on:click="removeMassActions" style="margin-right: 10px;">
+                                            <span class="icon checkbox-dash-icon"></span>
+                                        </span>
+
+                                        <form method="POST" id="mass-action-form" style="display: inline-flex;" action="">
+                                            @csrf()
+                                            <input type="hidden" id="indexes" name="indexes" v-model="dataIds">
+
+                                            <div class="control-group">
+                                                <select class="control" v-model="massActionType" @change="changeMassActionTarget" name="massaction-type">
+                                                    <option v-for="(massAction, index) in massActions" :key="index">@{{ massAction.type }}</option>
+                                                </select>
+                                            </div>
+
+                                            <div class="control-group" style="margin-left: 10px;" v-if="massActionType == 'update'">
+                                                <select class="control" v-model="massActionUpdateValue" name="update-options">
+                                                    <option v-for="(massActionValue, id) in massActionValues" :value="massActionValue">@{{ massActionValue }}</option>
+                                                </select>
+                                            </div>
+
+                                            <input type="submit" class="btn btn-sm btn-primary" style="margin-left: 10px;">
+                                        </form>
+                                    </div>
+                                </th>
+                            </tr>
+                        @endif
+                    </thead>
+
+                    <thead v-if="massActionsToggle == false">
                         <tr>
                             <th class="grid_head" id="mastercheckbox" style="width: 50px;">
                                 <span class="checkbox">
-                                    <input type="checkbox" id="mastercheckbox" v-model="massselection">
+                                    <input type="checkbox" v-model="allSelected" v-on:change="selectAll">
+
                                     <label class="checkbox-view" for="checkbox"></label>
                                 </span>
                             </th>
@@ -155,9 +191,13 @@
                             @foreach($results['columns'] as $key => $column)
                                 <th class="grid_head" data-column-alias="{{ $column['alias'] }}" data-column-name="{{ $column['column'] }}" data-column-sortable="{{ $column['sortable'] }}" data-column-type="{{ $column['type'] }}" style="width: {{ $column['width'] }}" v-on:click="sortCollection('{{ $column['alias'] }}')">{{ $column['label'] }}</th>
                             @endforeach
+                            <th>
+                                Actions
+                            </th>
                         </tr>
                     </thead>
-                    @include('ui::testgrid.body', ['records' => $results['records']])
+
+                    @include('ui::testgrid.body', ['records' => $results['records'], 'actions' => $results['actions']])
                 </table>
             </div>
         </script>
@@ -168,9 +208,18 @@
                 template: '#testgrid-filters',
 
                 data: () => ({
+                    gridCurrentData: @json($results['records']),
+                    massActions: @json($results['massactions']),
+                    massActionsToggle: false,
+                    massActionTarget: null,
+                    massActionType: null,
+                    massActionValues: [],
+                    massActionTargets: [],
+                    massActionUpdateValue: null,
                     url: new URL(window.location.href),
                     currentSort: null,
-                    massselection: [],
+                    dataIds: [],
+                    allSelected: false,
                     sortDesc: 'desc',
                     sortAsc: 'asc',
                     isActive: false,
@@ -267,7 +316,7 @@
                         this.formURL("search", 'all', searchValue);
                     },
 
-                    //function triggered to check whether the query exists or not and then call the make filters from the url
+                    // function triggered to check whether the query exists or not and then call the make filters from the url
                     setParamsAndUrl() {
                         params = (new URL(window.location.href)).search;
 
@@ -275,6 +324,20 @@
                             this.arrayFromUrl();
                         }
 
+                        for(id in this.massActions) {
+                            targetObj = {
+                                'type': this.massActions[id].type,
+                                'action': this.massActions[id].action
+                            };
+
+                            this.massActionTargets.push(targetObj);
+
+                            targetObj = {};
+
+                            if(this.massActions[id].type == 'update') {
+                                this.massActionValues = this.massActions[id].options;
+                            }
+                        }
                     },
 
                     findCurrentSort() {
@@ -285,6 +348,30 @@
                         }
                     },
 
+                    changeMassActionTarget() {
+                        if(this.massActionType == 'delete') {
+                            for(i in this.massActionTargets) {
+                                if(this.massActionTargets[i].type == 'delete') {
+                                    this.massActionTarget = this.massActionTargets[i].action;
+
+                                    break;
+                                }
+                            }
+                        }
+
+                        if(this.massActionType == 'update') {
+                            for(i in this.massActionTargets) {
+                                if(this.massActionTargets[i].type == 'update') {
+                                    this.massActionTarget = this.massActionTargets[i].action;
+
+                                    break;
+                                }
+                            }
+                        }
+
+                        document.getElementById('mass-action-form').action = this.massActionTarget;
+                    },
+
                     //make array of filters, sort and search
                     formURL(column, condition, response) {
                         var obj = {};
@@ -296,7 +383,7 @@
                         } else {
                             if(this.filters.length > 0) {
                                 if(column != "sort" && column != "search") {
-                                    filter_repeated = 0;
+                                    filterRepeated = 0;
 
                                     for(j = 0; j < this.filters.length; j++) {
                                         if(this.filters[j].column == column) {
@@ -304,7 +391,7 @@
                                                 return false;
                                             }
 
-                                            filter_repeated = 1;
+                                            filterRepeated = 1;
 
                                             this.filters[j].cond = condition;
                                             this.filters[j].val = response;
@@ -313,7 +400,7 @@
                                         }
                                     }
 
-                                    if(filter_repeated == 0) {
+                                    if(filterRepeated == 0) {
                                         obj.column = column;
                                         obj.cond = condition;
                                         obj.val = response;
@@ -345,8 +432,6 @@
                                                     this.filters[j].cond = condition;
                                                     this.filters[j].val = this.sortAsc;
 
-                                                    console.log(this.filters[j].val, 2);
-
                                                     this.makeURL();
                                                 }
                                             } else {
@@ -468,8 +553,6 @@
 
                             obj = {};
                         }
-
-                        console.log(this.filters);
                     },
 
                     removeFilter(filter) {
@@ -480,6 +563,46 @@
                                 this.makeURL();
                             }
                         }
+                    },
+
+                    //triggered when any select box is clicked in the datagrid
+                    select() {
+                        console.log(this.dataIds);
+
+                        this.allSelected = false;
+
+                        this.massActionsToggle = true;
+                    },
+
+                    //triggered when master checkbox is clicked
+                    selectAll() {
+                        this.dataIds = [];
+
+                        this.massActionsToggle = true;
+
+                        if (this.allSelected) {
+                            for (currentData in this.gridCurrentData) {
+                                i = 0;
+
+                                for(currentId in this.gridCurrentData[currentData]) {
+                                    if(i==0)
+                                        this.dataIds.push(this.gridCurrentData[currentData][currentId]);
+
+                                    i++;
+                                }
+
+                            }
+                        }
+
+                        console.log(this.dataIds);
+                    },
+
+                    removeMassActions() {
+                        this.dataIds = [];
+
+                        this.massActionsToggle = false;
+
+                        this.allSelected = false;
                     }
                 }
             });