Исправлена верстка таблицы

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

@@ -0,0 +1,28 @@
+<template lang="pug">
+  .flex.box-border.justify-between.px-4.items-center(:style="{ minWidth : width + 'px' }" :class="{width:generateWidth}")
+    span.text-sm(v-if="title") {{title}}
+    slot
+</template>
+
+<script>
+export default {
+  name: "ClientsTableCellHeader",
+  props: {
+    title: String,
+    width: Number,
+  },
+  computed: {
+    generateWidth() {
+      if (!this.title || this.title === "Do") {
+        return false;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.width
+  width: 100%
+</style>

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

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyAge",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

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

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

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

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{value}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyJobTitle",
+  props: {
+    value: String,
+    width: Number,
+  },
+};
+</script>

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

@@ -0,0 +1,21 @@
+<template lang="pug">
+  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
+    span.text-sm {{date}}
+    span.time.text-xs {{time}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyMeeting",
+  props: {
+    date: String,
+    time: String,
+    width: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.time
+  color: var(--font-grey-color)
+</style>

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

@@ -0,0 +1,16 @@
+<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}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyName",
+  props: {
+    value: String,
+    width: Number,
+    imgUrl: String,
+  },
+};
+</script>

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

@@ -0,0 +1,14 @@
+<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")
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyNetworks",
+  props: {
+    networks: Array,
+    width: Number,
+  },
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<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}}
+</template>
+
+<script>
+export default {
+  name: "TableCellBodyPriority",
+  props: {
+    value: String,
+    width: Number,
+    color: {
+      default: "#9294A7",
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.dot
+  background-color: var(--font-grey-color)
+  border-radius: 50%
+</style>