diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php
deleted file mode 100644
index 962bf7811..000000000
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php
+++ /dev/null
@@ -1,93 +0,0 @@
-<tbody>
-    @if ($records instanceof \Illuminate\Pagination\LengthAwarePaginator && count($records))
-        @foreach ($records as $key => $record)
-            <tr>
-                @if ($enableMassActions)
-                    <td>
-                        <span class="checkbox">
-                            <input type="checkbox" v-model="dataIds" @change="select" value="{{ $record->{$index} }}">
-
-                            <label class="checkbox-view" for="checkbox"></label>
-                        </span>
-                    </td>
-                @endif
-
-                @foreach ($columns as $column)
-                    @php
-                        $columnIndex = explode('.', $column['index']);
-
-                        $columnIndex = end($columnIndex);
-                    @endphp
-
-                    @if (isset($column['wrapper']))
-                        @if (isset($column['closure']) && $column['closure'] == true)
-                            <td data-value="{{ $column['label'] }}">{!! $column['wrapper']($record) !!}</td>
-                        @else
-                            <td data-value="{{ $column['label'] }}">{{ $column['wrapper']($record) }}</td>
-                        @endif
-                    @else
-                        @if ($column['type'] == 'price')
-                            @if (isset($column['currencyCode']))
-                                <td data-value="{{ $column['label'] }}">{{ core()->formatPrice($record->{$columnIndex}, $column['currencyCode']) }}</td>
-                            @else
-                                <td data-value="{{ $column['label'] }}">{{ core()->formatBasePrice($record->{$columnIndex}) }}</td>
-                            @endif
-                        @else
-                            <td data-value="{{ $column['label'] }}">{{ $record->{$columnIndex} }}</td>
-                        @endif
-                    @endif
-                @endforeach
-
-                @if ($enableActions)
-                    <td class="actions" style="white-space: nowrap; width: 100px;" data-value="{{ __('ui::app.datagrid.actions') }}">
-                        <div class="action">
-                            @foreach ($actions as $action)
-                                @php
-                                    $toDisplay = (isset($action['condition']) && gettype($action['condition']) == 'object') ? $action['condition']($record) : true;
-                                @endphp
-
-                                @if ($toDisplay)
-                                    <a
-                                        id="{{ $record->{$action['index'] ?? $index} }}"
-
-                                        @if ($action['method'] == 'GET')
-                                            href="{{ route($action['route'], $record->{$action['index'] ?? $index}) }}"
-                                        @endif
-
-                                        @if ($action['method'] != 'GET')
-                                            @if (isset($action['function']))
-                                                v-on:click="{{$action['function']}}"
-                                            @else
-                                                v-on:click="doAction($event)"
-                                            @endif
-                                        @endif
-
-                                        data-method="{{ $action['method'] }}"
-                                        data-action="{{ route($action['route'], $record->{$index}) }}"
-                                        data-token="{{ csrf_token() }}"
-
-                                        @if (isset($action['target']))
-                                            target="{{ $action['target'] }}"
-                                        @endif
-
-                                        @if (isset($action['title']))
-                                            title="{{ $action['title'] }}"
-                                        @endif
-                                    >
-                                        <span class="{{ $action['icon'] }}"></span>
-                                    </a>
-                                @endif
-                            @endforeach
-                        </div>
-                    </td>
-                @endif
-            </tr>
-        @endforeach
-    @else
-        <tr>
-            <td colspan="10">
-                <p style="text-align: center;">{{ $norecords }}</p>
-            </td>
-        </tr>
-    @endif
-</tbody>
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
index 36c188a82..0d0a435f4 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
@@ -1,5 +1,6 @@
 <div class="table">
     <datagrid-filters
+        csrf="{{ csrf_token() }}"
         index="{{ $results['index'] }}"
         enable-actions="{{ $results['enableActions'] }}"
         enable-mass-actions="{{ $results['enableMassActions'] }}"
@@ -115,7 +116,6 @@
                                             </div>
                                         </li>
 
-                                        {{-- suitable for string columns --}}
                                         <li v-if='stringConditionSelect'>
                                             <div class="control-group">
                                                 <select class="control" v-model="stringCondition">
@@ -128,7 +128,6 @@
                                             </div>
                                         </li>
 
-                                        {{-- response fields based on the type of columns to be filtered --}}
                                         <li v-if='stringCondition != null'>
                                             <div class="control-group">
                                                 <input type="text" class="control response-string"
@@ -136,7 +135,6 @@
                                             </div>
                                         </li>
 
-                                        {{-- suitable for numeric columns --}}
                                         <li v-if='numberConditionSelect'>
                                             <div class="control-group">
                                                 <select class="control" v-model="numberCondition">
@@ -157,7 +155,6 @@
                                             </div>
                                         </li>
 
-                                        {{-- suitable for boolean columns --}}
                                         <li v-if='booleanConditionSelect'>
                                             <div class="control-group">
                                                 <select class="control" v-model="booleanCondition">
@@ -178,7 +175,6 @@
                                             </div>
                                         </li>
 
-                                        {{-- suitable for date/time columns --}}
                                         <li v-if='datetimeConditionSelect'>
                                             <div class="control-group">
                                                 <select class="control" v-model="datetimeCondition">
@@ -282,7 +278,55 @@
                             </tr>
                         </thead>
 
-                        @include('ui::datagrid.body', ['records' => $results['records'], 'actions' => $results['actions'], 'index' => $results['index'], 'columns' => $results['columns'],'enableMassActions' => $results['enableMassActions'], 'enableActions' => $results['enableActions'], 'norecords' => $results['norecords']])
+                        @php
+                            $records = $results['records'];
+                            $actions = $results['actions'];
+                            $index = $results['index'];
+                            $columns = $results['columns'];
+                            $enableMassActions = $results['enableMassActions'];
+                            $enableActions = $results['enableActions'];
+                            $norecords = $results['norecords'];
+                        @endphp
+
+                        <tbody>
+                            <template v-if="records.data.length">
+                                <tr v-for="record in records.data">
+                                    <td v-if="enableMassActions">
+                                        <span class="checkbox">
+                                            <input type="checkbox" v-model="dataIds" @change="select" :value="record[index]">
+
+                                            <label class="checkbox-view" for="checkbox"></label>
+                                        </span>
+                                    </td>
+
+                                    <td v-for="column in columns" v-text="record[column.index]"
+                                        :data-value="column.label">
+                                    </td>
+
+                                    <td class="actions" style="white-space: nowrap; width: 100px;" data-value="{{ __('ui::app.datagrid.actions') }}">
+                                        <div class="action">
+                                            <a v-for="action in actions" :href="action.route + record[typeof action.index !== 'undefined' && action.index ? action.index : index]"
+                                                :id="record[typeof action.index !== 'undefined' && action.index ? action.index : index]"
+                                                v-on:click="typeof action.function !== 'undefined' && action.function ? action.function : doAction($event)"
+                                                :data-method="action.method"
+                                                :data-action="action.route + record[typeof action.index !== 'undefined' && action.index ? action.index : index]"
+                                                :data-token="csrf"
+                                                :target="action.target"
+                                                :title="action.title">
+                                                <span :class="action.icon"></span>
+                                            </a>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </template>
+                            <template v-else>
+                                <tr>
+                                    <td colspan="10">
+                                        <p style="text-align: center;" v-text="norecords"></p>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
                     </table>
                 </div>
 
@@ -297,6 +341,7 @@
                 template: '#datagrid-filters',
 
                 props: [
+                    'csrf',
                     'index',
                     'records',
                     'columns',
@@ -312,6 +357,7 @@
                 ],
 
                 data: function() {
+                    console.log(this.records.data, this.records.data[0][this.index]);
                     return {
                         url: new URL(window.location.href),
                         filterIndex: this.index,