From 91a4fabcfb5b6814251499e7786cd1cb6ae73eae Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Tue, 16 Oct 2018 17:18:45 +0530
Subject: [PATCH] Grid Sort Fixes

---
 .../Admin/src/DataGrids/CustomerDataGrid.php  |  20 +-
 packages/Webkul/Shop/src/Http/routes.php      |   3 +-
 .../Shop/src/Resources/views/error.blade.php  |  19 ++
 packages/Webkul/Ui/src/DataGrid/DataGrid.php  |   2 +-
 .../Ui/src/Providers/UiServiceProvider.php    |   2 +
 .../Resources/assets/images/Icon-Sort-Up.svg  |  23 ++
 .../Resources/assets/images/sort-up-icon.png  | Bin 0 -> 106 bytes
 .../Ui/src/Resources/assets/sass/app.scss     | 258 +-----------------
 .../src/Resources/assets/sass/components.scss | 258 ++++++++++++++++++
 .../Ui/src/Resources/assets/sass/icons.scss   |  10 +
 .../Webkul/Ui/src/Resources/lang/en/app.php   |   6 +
 .../default.blade.php => filters.blade.php}   |   1 -
 .../Resources/views/datagrid/index.blade.php  | 173 ++----------
 .../datagrid/{ => notused}/column.blade.php   |   0
 .../views/datagrid/pagination.blade.php       |   3 +
 .../Resources/views/datagrid/table.blade.php  |   7 +
 .../views/datagrid/table/body.blade.php       |  32 +++
 .../views/datagrid/table/default.blade.php    | 162 -----------
 .../views/datagrid/table/head.blade.php       | 105 +++++++
 19 files changed, 501 insertions(+), 583 deletions(-)
 create mode 100644 packages/Webkul/Shop/src/Resources/views/error.blade.php
 create mode 100644 packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Up.svg
 create mode 100644 packages/Webkul/Ui/src/Resources/assets/images/sort-up-icon.png
 create mode 100644 packages/Webkul/Ui/src/Resources/assets/sass/components.scss
 create mode 100644 packages/Webkul/Ui/src/Resources/lang/en/app.php
 rename packages/Webkul/Ui/src/Resources/views/datagrid/{filters/default.blade.php => filters.blade.php} (99%)
 rename packages/Webkul/Ui/src/Resources/views/datagrid/{ => notused}/column.blade.php (100%)
 create mode 100644 packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php
 create mode 100644 packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
 create mode 100644 packages/Webkul/Ui/src/Resources/views/datagrid/table/body.blade.php
 delete mode 100644 packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
 create mode 100644 packages/Webkul/Ui/src/Resources/views/datagrid/table/head.blade.php

diff --git a/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php b/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
index 592b0f5b4..6703c3544 100644
--- a/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/CustomerDataGrid.php
@@ -37,7 +37,7 @@ class CustomerDataGrid
                     'route' => route('admin.datagrid.delete'),
                     'method' => 'DELETE',
                     'label' => 'Delete',
-                    'type' => 'button',
+                    'type' => 'button', //select || button only
                 ],
             ],
 
@@ -55,20 +55,10 @@ class CustomerDataGrid
                 ],
             ],
 
-            'join' => [
-                // [
-                //     'join' => 'leftjoin',
-                //     'table' => 'roles as r',
-                //     'primaryKey' => 'u.role_id',
-                //     'condition' => '=',
-                //     'secondaryKey' => 'r.id',
-                // ]
-            ],
+            'join' => [],
 
             //use aliasing on secodary columns if join is performed
-
             'columns' => [
-
                 [
                     'name' => 'id',
                     'alias' => 'customerId',
@@ -81,14 +71,14 @@ class CustomerDataGrid
                     'alias' => 'customerFirstName',
                     'type' => 'string',
                     'label' => 'Name',
-                    'sortable' => true,
+                    'sortable' => false,
                 ],
                 [
                     'name' => 'email',
                     'alias' => 'customerEmail',
                     'type' => 'string',
                     'label' => 'Email',
-                    'sortable' => true,
+                    'sortable' => false,
                 ],
                 [
                     'name' => 'phone',
@@ -102,7 +92,7 @@ class CustomerDataGrid
                     'alias' => 'customerGroupId',
                     'type' => 'number',
                     'label' => 'Customer Group',
-                    'sortable' => true,
+                    'sortable' => false,
                 ],
             ],
 
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index ffdd15983..5445c09db 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -1,6 +1,7 @@
 <?php
 
 Route::group(['middleware' => ['web']], function () {
+
     Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
         'view' => 'shop::home.index'
     ])->name('shop.home.index');
@@ -167,7 +168,6 @@ Route::group(['middleware' => ['web']], function () {
                 Route::post('address/edit', 'Webkul\Customer\Http\Controllers\AddressController@edit')->defaults('_config', [
                     'redirect' => 'customer.address.index'
                 ])->name('customer.address.edit');
-
                 /*    Routes for Addresses ends here   */
 
                 /* Wishlist route */
@@ -188,5 +188,4 @@ Route::group(['middleware' => ['web']], function () {
         });
     });
     //customer routes end here
-
 });
diff --git a/packages/Webkul/Shop/src/Resources/views/error.blade.php b/packages/Webkul/Shop/src/Resources/views/error.blade.php
new file mode 100644
index 000000000..d78938fdb
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/error.blade.php
@@ -0,0 +1,19 @@
+@extends('shop::layouts.master')
+@section('content-wrapper')
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+        <div class="wrapper" style="display: flex; height: 100vh; width: 80vw;
+    justify-content: space-between; align-items: center;">
+            <div class="error-box">
+                <div class="error-title">404</div>
+                <div class="error-messgae">Page Not Found</div>
+                <div class="error-description"></div>
+                <a href="url()->to('/')">GO TO HOME</a>
+                {{-- pass the content dynamically --}}
+                Show the exception here or error message here.
+            </div>
+
+        <div class="error-graphic" style="height: 236px; width: 255px; border: 1px solid red; background-image: url('.{{ asset('images.error') }}.')">
+        </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/DataGrid/DataGrid.php b/packages/Webkul/Ui/src/DataGrid/DataGrid.php
index bd212bdf2..c61c7c5aa 100644
--- a/packages/Webkul/Ui/src/DataGrid/DataGrid.php
+++ b/packages/Webkul/Ui/src/DataGrid/DataGrid.php
@@ -596,7 +596,7 @@ class DataGrid
                             array_values($value)[0]
                         );
                     } else {
-                        throw new \Exception('Multiple Sort keys Found, Please Resolve the URL Manually.');
+                        throw new \Exception('Multiple Sort keys Found, Please Resolve the URL Manually');
                     }
                 } elseif ($key=="search") {
 
diff --git a/packages/Webkul/Ui/src/Providers/UiServiceProvider.php b/packages/Webkul/Ui/src/Providers/UiServiceProvider.php
index 6229e49c5..5f6c0256a 100644
--- a/packages/Webkul/Ui/src/Providers/UiServiceProvider.php
+++ b/packages/Webkul/Ui/src/Providers/UiServiceProvider.php
@@ -20,6 +20,8 @@ class UiServiceProvider extends ServiceProvider
             __DIR__ . '/../../publishable/assets' => public_path('vendor/webkul/ui/assets'),
         ], 'public');
 
+        $this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'ui');
+
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'ui');
 
         Paginator::defaultView('ui::partials.pagination');
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Up.svg b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Up.svg
new file mode 100644
index 000000000..1c9462c2b
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Up.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="14px" viewBox="0 0 10 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sort-Down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Settings-Users-Roles" transform="translate(-451.000000, -218.000000)" stroke="#979797">
+            <g id="Paper" transform="translate(344.000000, 145.000000)">
+                <g id="Table" transform="translate(0.000000, 61.000000)">
+                    <g id="Strip-Head">
+                        <g id="Icon-Sort-Up" transform="translate(103.000000, 10.000000)">
+                            <g id="Icon-Sort-Down" transform="translate(9.000000, 9.000000) scale(1, -1) rotate(90.000000) translate(-9.000000, -9.000000) translate(3.000000, 5.000000)">
+                                <path d="M1.13686838e-12,4 L10.068125,4" id="Path-3" stroke-width="2"></path>
+                                <polyline id="Path-4" stroke-width="2" points="8 0 12 4.08548298 8 8"></polyline>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/sort-up-icon.png b/packages/Webkul/Ui/src/Resources/assets/images/sort-up-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2578e18db0abc03e96405daef64f19e5d29f42ad
GIT binary patch
literal 106
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnL3?x0byx0z;*aCb)T!AzYEKT2e9!N2j1o;Is
y1bzPY_W_V6=;`7Z!f`!$flz{7gI@qU1H-3h%)A#rtP%%GGI+ZBxvX<aXaWGkn;TRB

literal 0
HcmV?d00001

diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index 58e16a504..648b2b01a 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -1,6 +1,7 @@
 // Icon scss
 @import "icons";
 @import "variables";
+@import "components";
 @import "mixins";
 @import "animations";
 
@@ -671,263 +672,6 @@ h2 {
     }
 }
 
-/*  Data grid css starts here  */
-.grid-container {
-    user-select: none;
-
-    .filter-wrapper {
-        display: block;
-        box-sizing: border-box;
-
-        .filter-row-one,
-        .filter-row-two {
-            display: flex;
-            flex-direction: row;
-        }
-        .filter-row-one {
-            height: 40px;
-            align-items: center;
-            justify-content: space-between;
-
-            .search-filter {
-                .control {
-                    font-family: "montserrat", sans-serif;
-                    padding-left: 5px;
-                    width: 380px;
-                    height: 36px;
-                    border: 2px solid $control-border-color;
-                    border-radius: 3px;
-                    border-right: 0px;
-                    border-top-right-radius: 0px;
-                    border-bottom-right-radius: 0px;
-                    font-size: 14px;
-                }
-                .ic-wrapper {
-                    display: block;
-                    height: 36px;
-                    width: 36px;
-                    border: 2px solid $control-border-color;
-                    border-left: none;
-                    border-radius: 2px;
-
-                    .search-icon {
-                        margin-left: 4px;
-                        margin-top: 4px;
-                        height: 24px;
-                        width: 24px;
-                    }
-                }
-            }
-
-            .dropdown-filters {
-                display: inline-flex;
-
-                .more-filters {
-                    margin-right: 5px;
-
-                    .dropdown-toggle {
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        justify-content: center;
-                        font-family: "montserrat", sans-serif;
-                        padding-left: 5px;
-                        height: 36px;
-                        width: 150px;
-                        border: 2px solid $control-border-color;
-                        border-radius: 2px;
-                        background-color: $color-white;
-                        color: $filter-toggle-color;
-                        font-size: 14px;
-
-                        .dropdown-header {
-                            width: 100%;
-                            display: flex;
-                            flex-direction: row;
-                            align-items: center;
-                            justify-content: space-between;
-
-                            .arrow-down-icon {
-                                margin-right: 5px;
-                            }
-                        }
-                    }
-                    .dropdown-list {
-                        .dropdown-container {
-                            ul {
-                                li.filter-column-dropdown {
-                                    .filter-column-select {
-                                        width: 100%;
-                                        background: $color-white;
-                                        border: 2px solid $control-border-color;
-                                        border-radius: 3px;
-                                        height: 36px;
-                                        display: inline-block;
-                                        vertical-align: middle;
-                                        -webkit-transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        padding: 0px 5px;
-                                        font-family: "montserrat", sans-serif;
-                                        margin-top: 10px;
-                                        margin-bottom: 5px;
-                                    }
-                                }
-                                li {
-                                    select {
-                                        background: $color-white;
-                                        border: 2px solid $control-border-color;
-                                        border-radius: 3px;
-                                        height: 36px;
-                                        max-width: 100%;
-                                        display: inline-block;
-                                        vertical-align: middle;
-                                        -webkit-transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        padding: 0px 5px;
-                                        font-family: "montserrat", sans-serif;
-                                        margin-top: 10px;
-                                        margin-bottom: 5px;
-                                    }
-                                    input {
-                                        background: #fff;
-                                        border: 2px solid #c7c7c7;
-                                        border-radius: 3px;
-                                        height: 36px;
-                                        max-width: 100%;
-                                        display: inline-block;
-                                        vertical-align: middle;
-                                        -webkit-transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        transition: 0.2s
-                                            cubic-bezier(0.4, 0, 0.2, 1);
-                                        padding: 0px 5px;
-                                        font-family: "montserrat", sans-serif;
-                                        margin-top: 10px;
-                                        margin-bottom: 5px;
-                                    }
-                                }
-                                .filter-condition-dropdown-string {
-                                    display: none;
-                                }
-                                .filter-condition-dropdown-number {
-                                    display: none;
-                                }
-                                .filter-condition-dropdown-datetime {
-                                    display: none;
-                                }
-
-                                .filter-response-string {
-                                    display: none;
-                                }
-                                .filter-response-boolean {
-                                    display: none;
-                                }
-                                .filter-response-datetime {
-                                    display: none;
-                                }
-                                .filter-response-number {
-                                    display: none;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .filter-row-two {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            margin-top: 6px;
-            margin-bottom: 6px;
-
-            .filter-one {
-                margin-right: 10px;
-
-                .filter-name {
-                    margin-right: 5px;
-                }
-
-                .filter-value {
-                    display: inline-flex;
-                    background: #e7e7e7;
-                    padding-left: 5px;
-                    color: $color-black-shade;
-                    vertical-align: middle;
-
-                    .f-value {
-                        margin: auto;
-                    }
-
-                    .cross-icon {
-                        margin: 5px;
-                        height: 18px !important;
-                        width: 18px !important;
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
-    }
-    .table {
-        thead {
-            .mass-action-wrapper {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-start;
-                align-items: center;
-
-                .massaction-remove {
-                    margin-top: 10px;
-                    margin-right: 10px;
-                }
-
-                form {
-                    margin-top: 8px;
-                }
-
-                .selected-items {
-                    margin-right: 15px;
-                }
-            }
-            tr {
-                th.grid_head {
-                    cursor:pointer;
-
-                    .sort-down-icon {
-                        margin-left: 5px;
-                        margin-top: -3px;
-                        vertical-align: middle;
-                        cursor: pointer;
-                    }
-                }
-
-                th {
-                    text-transform: capitalize;
-                }
-            }
-        }
-
-        tbody {
-            td.action {
-                a:first-child {
-                    margin-right: 10px;
-                }
-            }
-        }
-
-        .pagination {
-            margin-top:20px;
-        }
-    }
-}
-
-/*   DataGrid css ends in here   */
-
 .modal-open {
     overflow: hidden;
 }
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/components.scss b/packages/Webkul/Ui/src/Resources/assets/sass/components.scss
new file mode 100644
index 000000000..caf0c47aa
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/components.scss
@@ -0,0 +1,258 @@
+/*  Data grid css starts here  */
+.grid-container {
+    user-select: none;
+
+    .filter-wrapper {
+        display: block;
+        box-sizing: border-box;
+
+        .filter-row-one,
+        .filter-row-two {
+            display: flex;
+            flex-direction: row;
+        }
+        .filter-row-one {
+            height: 40px;
+            align-items: center;
+            justify-content: space-between;
+
+            .search-filter {
+                .control {
+                    font-family: "montserrat", sans-serif;
+                    padding-left: 5px;
+                    width: 380px;
+                    height: 36px;
+                    border: 2px solid $control-border-color;
+                    border-radius: 3px;
+                    border-right: 0px;
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    font-size: 14px;
+                }
+                .ic-wrapper {
+                    display: block;
+                    height: 36px;
+                    width: 36px;
+                    border: 2px solid $control-border-color;
+                    border-left: none;
+                    border-radius: 2px;
+
+                    .search-icon {
+                        margin-left: 4px;
+                        margin-top: 4px;
+                        height: 24px;
+                        width: 24px;
+                    }
+                }
+            }
+
+            .dropdown-filters {
+                display: inline-flex;
+
+                .more-filters {
+                    margin-right: 5px;
+
+                    .dropdown-toggle {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: center;
+                        font-family: "montserrat", sans-serif;
+                        padding-left: 5px;
+                        height: 36px;
+                        width: 150px;
+                        border: 2px solid $control-border-color;
+                        border-radius: 2px;
+                        background-color: $color-white;
+                        color: $filter-toggle-color;
+                        font-size: 14px;
+
+                        .dropdown-header {
+                            width: 100%;
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            justify-content: space-between;
+
+                            .arrow-down-icon {
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                    .dropdown-list {
+                        .dropdown-container {
+                            ul {
+                                li.filter-column-dropdown {
+                                    .filter-column-select {
+                                        width: 100%;
+                                        background: $color-white;
+                                        border: 2px solid $control-border-color;
+                                        border-radius: 3px;
+                                        height: 36px;
+                                        display: inline-block;
+                                        vertical-align: middle;
+                                        -webkit-transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        padding: 0px 5px;
+                                        font-family: "montserrat", sans-serif;
+                                        margin-top: 10px;
+                                        margin-bottom: 5px;
+                                    }
+                                }
+                                li {
+                                    select {
+                                        background: $color-white;
+                                        border: 2px solid $control-border-color;
+                                        border-radius: 3px;
+                                        height: 36px;
+                                        max-width: 100%;
+                                        display: inline-block;
+                                        vertical-align: middle;
+                                        -webkit-transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        padding: 0px 5px;
+                                        font-family: "montserrat", sans-serif;
+                                        margin-top: 10px;
+                                        margin-bottom: 5px;
+                                    }
+                                    input {
+                                        background: #fff;
+                                        border: 2px solid #c7c7c7;
+                                        border-radius: 3px;
+                                        height: 36px;
+                                        max-width: 100%;
+                                        display: inline-block;
+                                        vertical-align: middle;
+                                        -webkit-transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        transition: 0.2s
+                                            cubic-bezier(0.4, 0, 0.2, 1);
+                                        padding: 0px 5px;
+                                        font-family: "montserrat", sans-serif;
+                                        margin-top: 10px;
+                                        margin-bottom: 5px;
+                                    }
+                                }
+                                .filter-condition-dropdown-string {
+                                    display: none;
+                                }
+                                .filter-condition-dropdown-number {
+                                    display: none;
+                                }
+                                .filter-condition-dropdown-datetime {
+                                    display: none;
+                                }
+
+                                .filter-response-string {
+                                    display: none;
+                                }
+                                .filter-response-boolean {
+                                    display: none;
+                                }
+                                .filter-response-datetime {
+                                    display: none;
+                                }
+                                .filter-response-number {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .filter-row-two {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            margin-top: 6px;
+            margin-bottom: 6px;
+
+            .filter-one {
+                margin-right: 10px;
+
+                .filter-name {
+                    margin-right: 5px;
+                }
+
+                .filter-value {
+                    display: inline-flex;
+                    background: #e7e7e7;
+                    padding-left: 5px;
+                    color: $color-black-shade;
+                    vertical-align: middle;
+
+                    .f-value {
+                        margin: auto;
+                    }
+
+                    .cross-icon {
+                        margin: 5px;
+                        height: 18px !important;
+                        width: 18px !important;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+    .table {
+        thead {
+            .mass-action-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                .massaction-remove {
+                    margin-top: 10px;
+                    margin-right: 10px;
+                }
+
+                form {
+                    margin-top: 8px;
+                }
+
+                .selected-items {
+                    margin-right: 15px;
+                }
+            }
+            tr {
+                th.grid_head {
+
+                    .sort-down-icon, .sort-up-icon {
+                        margin-left: 5px;
+                        margin-top: -3px;
+                        vertical-align: middle;
+                    }
+                }
+
+                th.grid_head.sortable {
+                    cursor: pointer;
+                }
+
+                th {
+                    text-transform: capitalize;
+                }
+            }
+        }
+
+        tbody {
+            td.action {
+                a:first-child {
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        .pagination {
+            margin-top:20px;
+        }
+    }
+}
+
+/*   DataGrid css ends in here   */
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
index 4b9536212..33d589816 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
@@ -117,6 +117,16 @@
     height: 18px;
 }
 
+.sort-up-icon {
+    // background-image: url("../images/Icon-Sort-Up.svg");
+    // width: 18px;
+    // height: 18px;
+    background-image: url("../images/Icon-Sort-Down.svg");
+    width: 18px;
+    height: 18px;
+    transform: rotate(180deg);
+}
+
 .primary-back-icon {
     background-image: url("../images/Icon-Back-Primary.svg");
     width: 24px;
diff --git a/packages/Webkul/Ui/src/Resources/lang/en/app.php b/packages/Webkul/Ui/src/Resources/lang/en/app.php
new file mode 100644
index 000000000..ab0c53687
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/lang/en/app.php
@@ -0,0 +1,6 @@
+<?php
+return [
+    'datagrid' => [
+        'actions' => 'Actions'
+    ]
+];
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
similarity index 99%
rename from packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php
rename to packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
index 868c5906e..f555a009c 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/filters/default.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/filters.blade.php
@@ -1,5 +1,4 @@
 <div class="{{ $css->filter }}filter-wrapper">
-    {{-- for loading the filters from another file --}}
     <div class="filter-row-one">
         <div class="search-filter" style="display: inline-flex; align-items: center;">
             <input type="search" class="control search-field" placeholder="Search Users" value="" />
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
index 3675dbc66..34cf664f3 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
@@ -1,73 +1,53 @@
-<div class="grid-container {{-- $css->datagrid --}}">
-
+<div class="grid-container">
     {{-- For loading the filters from includes directory file --}}
-    @include('ui::datagrid.filters.default')
+    @include('ui::datagrid.filters')
 
     {{-- for generating the table and its content --}}
-    @include('ui::datagrid.table.default')
+    @include('ui::datagrid.table')
 
     {{-- Section for datagrid javascript --}}
     @push('scripts')
         <script type="text/javascript">
-
             var columns = @json($columns); //referential
-
             var allFilters = [];
-
             var search_value;
-
             var filter_column;
-
             var filter_condition;
-
             var filter_range;
-
             var count_filters = parseInt(0);
-
             var url;
-
             var array_start = '[';
-
             var array_end = ']';
-
             var typeValue;
-
             var selectedColumn = '';
-
             var myURL = document.location;
-
             let params;
 
             $(document).ready(function() {
-
                 params = (new URL(document.location)).search;
-
-                if(params.length>0) {
-
+                if(params.length > 0) {
                     if(allFilters.length == 0) {
                         //call reverse url function
-                        arrayFromUrl(params.slice(1,params.length));
+                        arrayFromUrl(params.slice(1, params.length));
                     }
                 }
 
                 $('.search-btn').click(function() {
-
                     search_value = $(".search-field").val();
-                    formURL('search','all', search_value, params);  //format for search
+                    formURL('search', 'all', search_value, params);  //format for search
                 });
 
                 //controls for header when sorting is done
                 $('.grid_head').on('click', function() {
-
                     var column = $(this).data('column-name');
-
                     var currentSort = $(this).data('column-sort');
 
-                    if(currentSort == "asc")
-                        formURL("sort",column,"desc",params);
-
-                    else if(currentSort == "desc")
-                        formURL("sort",column,"asc",params);
+                    if(currentSort == "asc") {
+                        formURL("sort", column, "desc", params);
+                    }
+                    else if(currentSort == "desc") {
+                        formURL("sort", column, "asc", params);
+                    }
                 });
 
                 $('select.filter-column-select').change(function() {
@@ -80,32 +60,22 @@
                     if(typeValue == 'string') {
                         //default behaviour for strings
                         $('.filter-condition-dropdown-number').css('display','none');
-
                         $('.filter-condition-dropdown-datetime').css('display','none');
-
                         $('.filter-response-number').css('display','none');
-
                         $('.filter-response-datetime').css('display','none');
-
                         $('.filter-response-boolean').css('display','none');
 
                         //show the two wanted
                         $('.filter-condition-dropdown-string').css('display','inherit');
-
                         $('.filter-response-string').css('display','inherit');
                     }
                     else if(typeValue == 'boolean') {
                         //hide unwanted
                         $('.filter-condition-dropdown-string').css('display','none');
-
                         $('.filter-condition-dropdown-number').css('display','none');
-
                         $('.filter-condition-dropdown-datetime').css('display','none');
-
                         $('.filter-response-string').css('display','none');
-
                         $('.filter-response-number').css('display','none');
-
                         $('.filter-response-datetime').css('display','none');
 
                         //only true or false for that column is needed as input
@@ -114,37 +84,26 @@
                     else if(typeValue == 'datetime') {
                         //hide unwanted
                         $('.filter-condition-dropdown-string').css('display','none');
-
                         $('.filter-condition-dropdown-number').css('display','none');
-
                         $('.filter-response-string').css('display','none');
-
                         $('.filter-response-number').css('display','none');
-
                         $('.filter-response-boolean').css('display','none');
 
                         //show what is wanted
                         $('.filter-condition-dropdown-datetime').css('display','inherit');
-
                         $('.filter-response-datetime').css('display','inherit');
                     }
                     else if(typeValue == 'number') {
                         //hide unwanted
                         $('.filter-condition-dropdown-string').css('display','none');
-
                         $('.filter-condition-dropdown-datetime').css('display','none');
-
                         $('.filter-response-string').css('display','none');
-
                         $('.filter-response-datetime').css('display','none');
-
                         $('.filter-response-boolean').css('display','none');
 
                         //show what is wanted
                         $('.filter-condition-dropdown-number').css('display','inherit');
-
                         $('.filter-response-number').css('display','inherit');
-
                     }
 
                     $('.apply-filter').on('click',function() {
@@ -152,26 +111,19 @@
                         params = (new URL(document.location)).search;
 
                         if(typeValue == 'number') {
-
                             var conditionUsed = $('.filter-condition-dropdown-number').find(':selected').val();
-
                             var response = $('.response-number').val();
 
                             formURL(selectedColumn,conditionUsed,response,params,col_label);
                         }
                         if(typeValue == 'string') {
-
                             var conditionUsed = $('.filter-condition-dropdown-string').find(':selected').val();
-
                             var response = $('.response-string').val();
 
                             formURL(selectedColumn,conditionUsed,response,params,col_label);
-
                         }
                         if(typeValue == 'datetime') {
-
                             var conditionUsed = $('.filter-condition-dropdown-datetime').find(':selected').val();
-
                             var response = $('.response-datetime').val();
 
                             formURL(selectedColumn,conditionUsed,response,params,col_label);
@@ -217,22 +169,17 @@
                         });
 
                         $('.mass-action').css('display','');
-
                         $('.table-grid-header').css('display','none');
                         // $('.selected-items').html(id.toString());
-
                         $('#indexes').val(id);
                     }
                     else if($("input[id=mastercheckbox]").prop('checked') == false) {
-
                         $('.indexers').each(function(){ this.checked = false; });
 
                         id = [];
 
                         $('.mass-action').css('display','none');
-
                         $('.table-grid-header').css('display','');
-
                         $('#indexes').val('');
                     }
                 });
@@ -269,25 +216,18 @@
                     }
 
                     if(id.length>0) {
-
                         $('.mass-action').css('display','');
-
                         $('.table-grid-header').css('display','none');
-
                         $('#indexes').val(id);
 
                     }else if(id.length == 0) {
 
                         $('.mass-action').css('display','none');
-
                         $('.table-grid-header').css('display','');
-
                         $('#indexes').val('');
 
                         if($('#mastercheckbox').prop('checked')) {
-
                             $('#mastercheckbox').prop('checked',false);
-
                         }
                     }
                 });
@@ -296,10 +236,8 @@
 
             //make the url from the array and redirect
             function makeURL(repetition = false) {
-
                 if(allFilters.length>0 && repetition == false)
                 {
-
                     for(i=0;i<allFilters.length;i++) {
                         if(i==0){
                             url = '?' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
@@ -310,27 +248,22 @@
                     document.location = url;
 
                 } else if(allFilters.length>0 && repetition == true) {
-
                     //this is the case when the filter is being repeated on a single column with different condition and value
                     for(i=0;i<allFilters.length;i++) {
 
-                        if(i==0){
+                        if(i==0) {
                             url = '?' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
                         }
-                        else
+                        else {
                             url = url + '&' + allFilters[i].column + '[' + allFilters[i].cond + ']' + '=' + allFilters[i].val;
+                        }
                     }
-
                     document.location = url;
-
                 } else {
-
                     var uri = window.location.href.toString();
-
                     var clean_uri = uri.substring(0, uri.indexOf("?"));
 
                     document.location = clean_uri;
-
                 }
             }
 
@@ -338,72 +271,63 @@
             function arrayFromUrl(urlstring) {
 
                 var obj={};
-
                 t = urlstring.slice(0,urlstring.length);
-
                 splitted = [];
-
                 moreSplitted = [];
-
                 splitted = t.split('&');
-
                 for(i=0;i<splitted.length;i++) {
-
                     moreSplitted.push(splitted[i].split('='));
-
                 }
                 for(i=0;i<moreSplitted.length;i++) {
-
                     col = moreSplitted[i][0].replace(']','').split('[')[0];
-
                     cond = moreSplitted[i][0].replace(']','').split('[')[1]
-
                     val = moreSplitted[i][1];
-
                     obj.column = col;
-
                     obj.cond = cond;
-
                     obj.val = val;
 
                     if(col!=undefined && cond!=undefined && val!=undefined)
                         allFilters.push(obj);
-
                     obj = {};
-
                 }
                 makeTags();
             }
 
-            //use the label to prevent the display of column name on the body
+            //Use the label to prevent the display of column name on the body
             function makeTags() {
-
                 var filterRepeat = 0;
 
                 if(allFilters.length!=0)
                 for(var i = 0;i<allFilters.length;i++) {
 
                     if(allFilters[i].column == "sort") {
-
                         col_label_tag = $('li[data-name="'+allFilters[i].cond+'"]').text();
 
                         var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
+
+                        sorted_col = allFilters[i].cond;
+
+                        var apply_on_column = $('th[data-column-name="'+sorted_col+'"]').children('.icon');
+
+                        if(allFilters[i].val == "asc") {
+                            apply_on_column.addClass('sort-down-icon');
+                        } else {
+                            apply_on_column.addClass('sort-up-icon');
+                        }
+
                         $('.filter-row-two').append(filter_card);
 
                     } else if(allFilters[i].column == "search") {
-
                         col_label_tag = "Search";
 
                         var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
                         $('.filter-row-two').append(filter_card);
 
                     } else {
-
                         col_label_tag = $('li[data-name="'+allFilters[i].column+'"]').text().trim();
 
                         var filter_card = '<span class="filter-one" id="'+ i +'"><span class="filter-name">'+ col_label_tag +'</span><span class="filter-value"><span class="f-value">'+ allFilters[i].val +'</span><span class="icon cross-icon remove-filter"></span></span></span>';
                         $('.filter-row-two').append(filter_card);
-
                     }
 
                 }
@@ -414,13 +338,11 @@
 
                 /* validate the conditions here and do the replacements and
                 push here in the all filters array */
-
                 var obj1 = {};
 
                 console.log(allFilters.length);
 
                 if(column == "" || condition == "" || response == "") {
-
                     alert("Some of the required field is null, please check column, condition and value properly.");
 
                     return false;
@@ -441,11 +363,9 @@
 
                                     return false;
                                 } else if(allFilters[j].column == column) {
-
                                     filter_repeated = 1;
 
                                     allFilters[j].cond = condition;
-
                                     allFilters[j].val = response;
 
                                     makeURL(true);
@@ -454,84 +374,55 @@
                             if(filter_repeated == 0) {
 
                                 obj1.column = column;
-
                                 obj1.cond = condition;
-
                                 obj1.val = response;
-
                                 obj1.label = clabel;
 
                                 allFilters.push(obj1);
-
                                 obj1 = {};
 
                                 makeURL();
                             }
                         }
                         if(column == "sort") {
-
                             sort_exists = 0;
-
                             for(j=0;j<allFilters.length;j++) {
-
                                 if(allFilters[j].column == "sort") {
-
                                     if(allFilters[j].column==column && allFilters[j].cond==condition && allFilters[j].val==response) {
 
                                         if(response=="asc") {
-
                                             allFilters[j].column = column;
-
                                             allFilters[j].cond = condition;
-
                                             allFilters[j].val = "desc";
-
                                             allFilters[j].label = clabel;
 
                                             makeURL();
 
                                         }
                                         else {
-
                                             allFilters[j].column = column;
-
                                             allFilters[j].cond = condition;
-
                                             allFilters[j].val = "asc";
-
                                             allFilters[j].label = clabel;
 
                                             makeURL();
-
                                         }
-
                                     }
                                     else {
-
                                         allFilters[j].column = column;
-
                                         allFilters[j].cond = condition;
-
                                         allFilters[j].val = response;
-
                                         allFilters[j].label = clabel;
 
                                         makeURL();
-
                                     }
-
-
                                 }
                             }
                         }
                         if(column == "search") {
-
                             search_found = 0;
-
                             for(j=0;j<allFilters.length;j++) {
-
                                 if(allFilters[j].column == "search") {
-
                                     allFilters[j].column = column;
                                     allFilters[j].cond = condition;
                                     allFilters[j].val = response;
@@ -539,13 +430,11 @@
                                     makeURL();
                                 }
                             }
-
                             for(j=0;j<allFilters.length;j++) {
                                 if(allFilters[j].column == "search") {
                                     search_found = 1;
                                 }
                             }
-
                             if(search_found == 0) {
                                 obj1.column = column;
                                 obj1.cond = condition;
@@ -557,27 +446,21 @@
                             }
                         }
                     } else {
-
                         obj1.column = column;
-
                         obj1.cond = condition;
-
                         obj1.val = response;
-
                         obj1.label = clabel;
 
                         allFilters.push(obj1);
-
                         obj1 = {};
 
                         makeURL();
-
                     }
                 }
             }
             function confirm_click(message){
                 if (confirm(message)) {
-
+                    //do the action required
                 } else {
                     return false;
                 }
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/column.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/notused/column.blade.php
similarity index 100%
rename from packages/Webkul/Ui/src/Resources/views/datagrid/column.blade.php
rename to packages/Webkul/Ui/src/Resources/views/datagrid/notused/column.blade.php
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/pagination.blade.php
new file mode 100644
index 000000000..90116cf07
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/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/datagrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
new file mode 100644
index 000000000..919898d73
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
@@ -0,0 +1,7 @@
+<div class="table">
+    <table class="{{ $css->table }}">
+        @include('ui::datagrid.table.head')
+        @include('ui::datagrid.table.body')
+    </table>
+    @include('ui::datagrid.pagination')
+</div>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/body.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/body.blade.php
new file mode 100644
index 000000000..b86a89991
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table/body.blade.php
@@ -0,0 +1,32 @@
+<tbody class="{{ $css->tbody }}">
+    @if(count($results) == 0)
+    <tr>
+        <td colspan="{{ count($columns)+1 }}" style="text-align: center;">
+            No Records Found.
+        </td>
+    </tr>
+    @endif
+    @foreach ($results as $result)
+    <tr>
+
+        <td class="">
+            <span class="checkbox">
+                <input type="checkbox" class="indexers" id="{{ $result->id }}" name="checkbox[]">
+                <label class="checkbox-view" for="checkbox1"></label>
+            </span>
+        </td>
+        @foreach ($columns as $column)
+            <td class="">{!! $column->render($result) !!}</td>
+        @endforeach
+
+        <td class="action">
+            @foreach($actions as $action)
+                <a @if($action['type'] == "Edit") href="{{ url()->current().'/edit/'.$result->id }}" @elseif($action['type']=="Delete") href="{{ url()->current().'/delete/'.$result->id }}" @endif  class="Action-{{ $action['type'] }}" id="{{ $result->id }}" onclick="return confirm_click('{{ $action['confirm_text'] }}');">
+                    <i class="{{ $action['icon'] }}"></i>
+                </a>
+            @endforeach
+        </td>
+
+    </tr>
+    @endforeach
+</tbody>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
deleted file mode 100644
index 200d4da56..000000000
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
+++ /dev/null
@@ -1,162 +0,0 @@
-<div class="table">
-
-    <table class="{{ $css->table }}">
-
-        <thead>
-
-            <tr class="mass-action" style="display: none; height:63px;">
-
-                <th colspan="{{ count($columns)+1 }}">
-
-                    <div class="mass-action-wrapper">
-
-                        <span class="massaction-remove">
-                            <span class="icon checkbox-dash-icon"></span>
-                        </span>
-
-                        @foreach($massoperations as $massoperation)
-
-                            @if($massoperation['type'] == "button")
-
-                            <form onsubmit="return confirm('Are You Sure?');"
-                                @if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation['method'])=="POST" )
-                                    method="{{ strtoupper($massoperation['method']) }}"
-                                @else
-                                    method="POST"
-                                @endif
-
-                                action="{{ $massoperation['route'] }}">
-
-                                {{ csrf_field() }}
-
-                                @if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
-
-                                @method($massoperation['method'])
-
-                                @endif
-
-                                <input type="hidden" id="indexes" name="indexes" value="">
-
-                                <input class="btn btn-primary btn-sm" type="submit" value="Delete">
-
-                            </form>
-
-                            @elseif($massoperation['type'] == "select")
-
-                                <form
-                                    @if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation[ 'method'])=="POST" )
-
-                                        method="{{ strtoupper($massoperation['method']) }}"
-
-                                    @else
-                                        method="POST"
-
-                                        @endif
-
-                                    action="{{ $massoperation['route'] }}">
-                                        {{ csrf_field() }}
-                                    @if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
-
-                                        @method($massoperation['method'])
-
-                                    @endif
-
-                                    <input type="hidden" id="indexes" name="indexes" value="">
-
-                                    <select name="choices">
-
-                                        @foreach($massoperation['options'] as $option)
-
-                                            <option>{{ $option }}</option>
-
-                                        @endforeach
-
-                                    </select>
-
-                                        <input class="btn btn-primary btn-sm" type="submit" value="Submit">
-
-                                </form>
-                            @endif
-                        @endforeach
-                    </div>
-                </th>
-            </tr>
-            <tr class="table-grid-header">
-                <th>
-                    <span class="checkbox">
-                        <input type="checkbox" id="mastercheckbox">
-                        <label class="checkbox-view" for="checkbox"></label>
-                    </span>
-                </th>
-                @foreach ($columns as $column)
-                    @if($column->sortable == "true")
-                        <th class="grid_head"
-                            @if(strpos($column->alias, ' as '))
-                                <?php $exploded_name = explode(' as ',$column->name); ?>
-                                data-column-name="{{ $exploded_name[0] }}"
-                            @else
-                                data-column-name="{{ $column->alias }}"
-                            @endif
-
-                            data-column-label="{{ $column->label }}"
-                                data-column-sort="asc">{!! $column->sorting() !!}<span class="icon sort-down-icon"></span>
-                        </th>
-                        @else
-                            <th class="grid_head" data-column-name="{{ $column->alias }}" data-column-label="{{ $column->label }}">{!! $column->sorting() !!}</th>
-                    @endif
-                @endforeach
-                {{-- @if(isset($attribute_columns))
-                    @foreach($attribute_columns as $key => $value)
-                        <th>
-                            {{ $value }}
-                        </th>
-                    @endforeach
-                @endif --}}
-                <th>
-                    Actions
-                </th>
-            </tr>
-        </thead>
-        <tbody class="{{ $css->tbody }}">
-            @if(count($results) == 0)
-            <tr>
-                <td colspan="{{ count($columns)+1 }}" style="text-align: center;">
-                    No Records Found.
-                </td>
-            </tr>
-            @endif
-            @foreach ($results as $result)
-            <tr>
-
-                <td class="">
-                    <span class="checkbox">
-                        <input type="checkbox" class="indexers" id="{{ $result->id }}" name="checkbox[]">
-                        <label class="checkbox-view" for="checkbox1"></label>
-                    </span>
-                </td>
-                @foreach ($columns as $column)
-                    <td class="">{!! $column->render($result) !!}</td>
-                @endforeach
-
-                {{-- @if(isset($attribute_columns))
-                @foreach ($attribute_columns as $atc)
-                    <td>{{ $result->{$atc} }}</td>
-                @endforeach
-                @endif --}}
-
-                <td class="action">
-                    @foreach($actions as $action)
-                        <a @if($action['type'] == "Edit") href="{{ url()->current().'/edit/'.$result->id }}" @elseif($action['type']=="Delete") href="{{ url()->current().'/delete/'.$result->id }}" @endif  class="Action-{{ $action['type'] }}" id="{{ $result->id }}" onclick="return confirm_click('{{ $action['confirm_text'] }}');">
-                            <i class="{{ $action['icon'] }}"></i>
-                        </a>
-                    @endforeach
-                </td>
-
-            </tr>
-            @endforeach
-        </tbody>
-    </table>
-    <div class="pagination">
-        {{ $results->links() }}
-    </div>
-</div>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/head.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/head.blade.php
new file mode 100644
index 000000000..b22d3e54e
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table/head.blade.php
@@ -0,0 +1,105 @@
+<thead>
+    <tr class="mass-action" style="display: none; height:63px;">
+        <th colspan="{{ count($columns)+1 }}">
+            <div class="mass-action-wrapper">
+
+                <span class="massaction-remove">
+                    <span class="icon checkbox-dash-icon"></span>
+                </span>
+
+                {{-- Mass operation implementation --}}
+                @foreach($massoperations as $massoperation)
+                    @if($massoperation['type'] == "button")
+
+                    <form onsubmit="return confirm('Are You Sure?');"
+                        @if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation['method'])=="POST" )
+                            method="{{ strtoupper($massoperation['method']) }}"
+                        @else
+                            method="POST"
+                        @endif
+
+                        action="{{ $massoperation['route'] }}">
+
+                        {{ csrf_field() }}
+
+                        @if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
+
+                        @method($massoperation['method'])
+
+                        @endif
+
+                        <input type="hidden" id="indexes" name="indexes" value="">
+
+                        <input class="btn btn-primary btn-sm" type="submit" value="Delete">
+
+                    </form>
+
+                    @elseif($massoperation['type'] == "select")
+
+                        <form
+                            @if(strtoupper($massoperation[ 'method'])=="GET" || strtoupper($massoperation[ 'method'])=="POST" )
+
+                                method="{{ strtoupper($massoperation['method']) }}"
+
+                            @else
+                                method="POST"
+
+                                @endif
+
+                            action="{{ $massoperation['route'] }}">
+                                {{ csrf_field() }}
+                            @if(strtoupper($massoperation['method'])!= "GET" && strtoupper($massoperation['method'])!= "POST")
+
+                                @method($massoperation['method'])
+
+                            @endif
+
+                            <input type="hidden" id="indexes" name="indexes" value="">
+
+                            <select name="choices">
+                                @foreach($massoperation['options'] as $option)
+                                    <option>{{ $option }}</option>
+                                @endforeach
+                            </select>
+
+                            <input class="btn btn-primary btn-sm" type="submit" value="Submit">
+                        </form>
+                    @endif
+                @endforeach
+            </div>
+        </th>
+    </tr>
+    <tr class="table-grid-header">
+        <th>
+            <span class="checkbox">
+                <input type="checkbox" id="mastercheckbox">
+                <label class="checkbox-view" for="checkbox"></label>
+            </span>
+        </th>
+        @foreach ($columns as $column)
+            @if($column->sortable == "true")
+                <th class="grid_head sortable"
+                    @if(strpos($column->alias, ' as '))
+                        <?php $exploded_name = explode(' as ',$column->name); ?>
+                        data-column-name="{{ $exploded_name[0] }}"
+                    @else
+                        data-column-name="{{ $column->alias }}"
+                    @endif
+
+                    data-column-label="{{ $column->label }}"
+                    data-column-sort="asc">
+                    {!! $column->sorting() !!}<span class="icon"></span>
+                </th>
+                @else
+                    <th class="grid_head"
+                        data-column-name="{{ $column->alias }}"
+                        data-column-label="{{ $column->label }}">
+                        {!! $column->sorting() !!}
+                    </th>
+            @endif
+        @endforeach
+        <th>
+            {{ __('ui::app.datagrid.actions') }}
+        </th>
+    </tr>
+</thead>
\ No newline at end of file