add search to table

pages/categories/index.vue

@@ -45,7 +45,13 @@
                       item-text="name"
                       item-value="id"
                       label="Parent"
-                    />
+                    >
+                      <template #item="{item}">
+                        <div :class="`category-${item.depth}`">
+                          {{ item.name }}
+                        </div>
+                      </template>
+                    </v-autocomplete>
                     <!-- <v-card class="mx-auto" max-width="500" dark>
                       <v-sheet>
                         <v-text-field
@@ -75,8 +81,8 @@
                           @input="selectCategory"
                         />
                       </v-card-text>
-                    </v-card>
-                  </v-col> -->
+                    </v-card> -->
+                  </v-col>
                   <v-col cols="12">
                     <v-file-input
                       v-model="eImage"
@@ -101,7 +107,6 @@
                       :src="eImage"
                     />
                   </v-col>
-                  </v-col>
                 </v-row>
               </v-form>
             </v-container>
@@ -138,11 +143,19 @@
         :headers="headers"
         :items="categories"
         :item-class="indentation"
+        :search="searchTable"
         sort-by="calories"
         class="elevation-1"
       >
         <template #top>
           <v-toolbar flat>
+            <v-text-field
+              v-model="searchTable"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+            />
             <v-spacer />
             <v-toolbar-title style="float: right">
               <v-dialog
@@ -191,7 +204,13 @@
                             item-value="id"
                             label="Parent*"
                             :rules="requiredRules"
-                          />
+                          >
+                            <template #item="{item}">
+                              <div :class="`category-${item.depth}`">
+                                {{ item.name }}
+                              </div>
+                            </template>
+                          </v-autocomplete>
                         </v-col>
                         <!-- <v-col cols="12">
                           <v-card class="mx-auto" max-width="500" dark>
@@ -384,8 +403,8 @@ export default {
   middleware: ['web'],
   data: () => {
     return {
-      open: [1, 2],
-      search: null,
+      search: '',
+      searchTable: '',
       file: null,
       parent_id: '',
       name: '',
@@ -401,18 +420,16 @@ export default {
         {
           text: '#',
           align: 'start',
-          value: 'index',
-          groupable: false
+          value: 'index'
         },
         { text: 'Name', value: 'name', groupable: false },
-        { text: 'Ordering', value: 'ordering', groupable: false },
-        { text: 'Created', value: 'created_at', groupable: false },
-        { text: 'Updated', value: 'updated_at', groupable: false },
+        { text: 'Ordering', value: 'ordering', filterable: true },
+        { text: 'Created', value: 'created_at' },
+        { text: 'Updated', value: 'updated_at' },
         {
           text: 'Actions',
           value: 'actions',
-          sortable: false,
-          groupable: false
+          sortable: false
         }
       ],
       categories: [],
@@ -734,6 +751,15 @@ export default {
 .depth-5 > td:nth-child(2) {
   padding-left: 150px !important;
 }
+.category-1 {
+  padding-left: 30px !important;
+}
+.category-2 {
+  padding-left: 60px !important;
+}
+.category-3  {
+  padding-left: 90px !important;
+}
 img {
   width: 100px;
   height: 150px;

pages/posts/index.vue

@@ -213,9 +213,16 @@
     </v-dialog>
     <!-- table -->
     <div>
-      <v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
+      <v-data-table :headers="headers" :items="posts" :search="searchTable" sort-by="calories" class="elevation-1" >
         <template #top>
           <v-toolbar flat>
+            <v-text-field
+              v-model="searchTable"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+            />
             <v-spacer />
             <v-toolbar-title>
               <!-- modal-create -->
@@ -376,6 +383,7 @@ export default {
   middleware: ['web'],
   data: () => {
     return {
+      searchTable: '',
       file: null,
       dialog1: false,
       dialog2: false,

pages/products/index.vue

@@ -139,14 +139,21 @@
               <v-col
                 cols="12"
               >
-                <v-select
+                <v-autocomplete
                   v-model="eCategoryId"
+                  class="select--menu my-select"
                   :items="categories"
                   item-text="name"
                   item-value="id"
                   label="Category"
                   :rules="requiredRules"
-                />
+                >
+                  <template #item="{item}">
+                    <div :class="`category-${item.depth}`">
+                      {{ item.name }}
+                    </div>
+                  </template>
+                </v-autocomplete>
               </v-col>
               <v-col cols="12">
                 <v-text-field
@@ -325,11 +332,19 @@
       <v-data-table
         :headers="headers"
         :items="products"
+        :search="searchTable"
         sort-by="calories"
         class="elevation-1"
       >
         <template #top>
           <v-toolbar flat>
+            <v-text-field
+              v-model="searchTable"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+            />
             <v-spacer />
             <v-toolbar-title>
               <v-dialog
@@ -369,14 +384,20 @@
                         <v-col
                           cols="12"
                         >
-                          <v-select
+                          <v-autocomplete
                             v-model="category_id"
                             :items="categories"
                             item-text="name"
                             item-value="id"
                             label="Category"
                             :rules="requiredRules"
-                          />
+                          >
+                            <template #item="{item}">
+                              <div :class="`category-${item.depth}`">
+                                {{ item.name }}
+                              </div>
+                            </template>
+                          </v-autocomplete>
                         </v-col>
                         <v-col cols="12">
                           <v-text-field
@@ -550,6 +571,7 @@ export default {
   middleware: ['web'],
   data: () => {
     return {
+      searchTable: '',
       files: [],
       name: '',
       id: '',
@@ -1030,7 +1052,16 @@ export default {
 }
 </script>
 <style>
-  img {
+.category-1 {
+  padding-left: 30px !important;
+}
+.category-2 {
+  padding-left: 60px !important;
+}
+.category-3  {
+  padding-left: 90px !important;
+}
+img {
   width: 100px;
   height: 150px;
 }

pages/users/index.vue

@@ -88,11 +88,19 @@
       <v-data-table
         :headers="headers"
         :items="users"
+        :search="searchTable"
         sort-by="calories"
         class="elevation-1"
       >
         <template #top>
           <v-toolbar flat>
+            <v-text-field
+              v-model="searchTable"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+            />
             <v-spacer />
             <v-toolbar-title style="float: right">
               <v-dialog
@@ -214,6 +222,7 @@ export default {
   middleware: ['web'],
   data: () => {
     return {
+      searchTable: '',
       valid: true,
       email: '',
       name: '',