WIP поправил mock и отображение данных из него в таблице

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{new Date().getFullYear() - new Date(value).getFullYear()}}
 </template>
 
 <script>

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{value.some((el) => el.kind === "EMAIL")?value.find((el) => el.kind === "EMAIL").username:''}}
 </template>
 
 <script>
 export default {
   name: "TableCellBodyEmail",
   props: {
-    value: String,
+    value: Array,
     width: Number,
   },
 };

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -1,16 +1,26 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.gap-x-3.w-full(:style="{ minWidth : width + 'px' }")
-    img(v-if="imgUrl" :src="imgUrl" alt="Avatar")
-    span.text-sm.font-semibold {{value}}
+    .flex.avatar.justify-center.items-center
+      span {{`${value[0][0]}${value[1][0]}`}}
+    span.text-sm.font-semibold {{value.join(' ')}}
 </template>
 
 <script>
 export default {
   name: "TableCellBodyName",
   props: {
-    value: String,
+    value: Array,
     width: Number,
     imgUrl: String,
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.avatar
+  width: 36px
+  height: 36px
+  border-radius: 50%
+  background-color: var(--font-grey-color)
+  color: var(--font-dark-blue-color)
+</style>

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,14 +1,27 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    .w-5.h-5(v-for="network in networks")
+  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    .text-xl.icon(v-for="network in networks.filter((el) => el.kind !== 'EMAIL' && el.kind !== 'PHONE')" :id="network.id" :class="settings.settings.find((el) => el.network === network.kind).icon")
 </template>
 
 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "TableCellBodyNetworks",
   props: {
     networks: Array,
     width: Number,
   },
+  data() {
+    return {
+      settings: column.find((el) => el.name === "networks"),
+    };
+  },
 };
 </script>
+
+<style lang="sass" scoped>
+.network-cell
+  column-gap: 2px
+.icon
+  color: var(--btn-blue-color)
+</style>

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{value.some((el) => el.kind === "PHONE")?value.find((el) => el.kind === "PHONE").username:''}}
 </template>
 
 <script>
 export default {
   name: "TableCellBodyPhone",
   props: {
-    value: String,
+    value: Array,
     width: Number,
   },
 };

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
-    .dot.w-2.h-2
-    span.text-sm(:style="{ color : color }") {{value}}
+    .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
+    span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
 </template>
 
 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "TableCellBodyPriority",
-  props: {
-    value: String,
-    width: Number,
-    color: {
-      default: "#9294A7",
-    },
+  props: ["value", "width"],
+  data() {
+    return {
+      settings: column.find((el) => el.name === "priority"),
+    };
   },
 };
 </script>