ayanova/src/views/adm-users.vue

@@ -17,12 +17,11 @@
       <template v-slot:[`item.active`]="{ item }">
         <v-simple-checkbox v-model="item.active" disabled></v-simple-checkbox>
       </template>
-
-      <template v-slot:[`item.roles`]="{ item }">
+      <!-- Keeping as an example of custom narrowing a single column <template v-slot:[`item.roles`]="{ item }">
         <div class="red--text text-truncate" style="max-width: 150px;">
           {{ item.roles }}
         </div>
-      </template>
+      </template> -->
     </v-data-table>
   </div>
 </template>
@@ -301,8 +300,11 @@ async function createTableHeaders(vm) {
     { text: vm.$ay.t("UserEmployeeNumber"), value: "employeeNumber" },
     { text: vm.$ay.t("Active"), value: "active" },
     { text: vm.$ay.t("UserType"), value: "userType" },
-    { text: vm.$ay.t("LastLogin"), value: "lastLogin" },
-    { text: vm.$ay.t("AuthorizationRoles"), value: "roles" }
+    { text: vm.$ay.t("LastLogin"), value: "lastLogin" }
   ];
+  //Add roles if not narrowest width
+  if (vm.$vuetify.breakpoint.name != "xs") {
+    vm.headers.push({ text: vm.$ay.t("AuthorizationRoles"), value: "roles" });
+  }
 }
 </script>