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

src/pages/clients/components/ClientsTableRow.vue

@@ -1,44 +1,50 @@
 <template lang="pug">
-  tr.row-client.text-ms.cursor-pointer(:id="id")
-    td.py-5
-      .px-4.items-center.w-fit
-        clients-table-checkbox(:is-check="isCheck" :check="check" :id="id")
-    td.py-5
-      .px-4.font-semibold.whitespace-nowrap {{fullName}}
-    td.py-5
-      .px-4.whitespace-nowrap {{age}}
-    td.py-5
-      .px-4.whitespace-nowrap {{jobTitle}}
-    td.py-5
-      .px-4.whitespace-nowrap.flex.items-center.gap-x-2
-        .circle.w-2.h-2
-        span {{priority}}
-    td.py-5
-      .px-4.whitespace-nowrap {{phone}}
-    td.py-5
-      .px-4.whitespace-nowrap {{email}}
-    td.py-5
-      .px-4.whitespace-nowrap.flex
-        .w-fit.h-fit(v-for="network in networks" :key="network")
-    td.py-5
-      .px-4.whitespace-nowrap.gap-x-2.flex
-        span {{meetingTime.date}}
-        span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
-    td.py-5
-      .px-4
-        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
-          clients-action-popup(v-if="isOpenPopup")
+  .row-body.flex.w-full.cursor-pointer
+    .check-box.flex.justify-center.items-center
+      clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
+    table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
+    table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
+    table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
+    table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
+    table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
+    table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
+    table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
+    table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
+    .dots.flex.justify-center.items-center
+      .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+        clients-action-popup(v-if="isOpenPopup")
 </template>
 
 <script>
+import TableCellBodyMeeting from "@/pages/clients/components/cells/TableCellBodyMeeting";
+import TableCellBodyNetworks from "@/pages/clients/components/cells/TableCellBodyNetworks";
+import TableCellBodyEmail from "@/pages/clients/components/cells/TableCellBodyEmail";
+import TableCellBodyPhone from "@/pages/clients/components/cells/TableCellBodyPhone";
+import TableCellBodyPriority from "@/pages/clients/components/cells/TableCellBodyPriority";
+import TableCellBodyJobTitle from "@/pages/clients/components/cells/TableCellBodyJobTitle";
+import TableCellBodyAge from "@/pages/clients/components/cells/TableCellBodyAge";
+import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyName";
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientsTableRow",
-  components: { ClientsTableCheckbox, ClientsActionPopup },
+  components: {
+    ClientsTableCheckbox,
+    ClientsActionPopup,
+    TableCellBodyName,
+    TableCellBodyAge,
+    TableCellBodyJobTitle,
+    TableCellBodyPriority,
+    TableCellBodyPhone,
+    TableCellBodyEmail,
+    TableCellBodyNetworks,
+    TableCellBodyMeeting,
+  },
   data() {
     return {
       isOpenPopup: false,
+      columnBody: column,
     };
   },
   props: {
@@ -67,16 +73,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.row-client
+.row-body
   color: var(--font-dark-blue-color)
   border-bottom: 1px solid #D3D4DC
   &:hover
     background-color: var(--bg-hover-row-table)
-.circle
-  background-color: var(--font-grey-color)
-  border-radius: 50%
-.meeting-time
-  color: var(--font-grey-color)
+.check-box
+  min-width: 36px
+.dots
+  min-width: 53px
 .dots-button
   width: 20px
   height: 20px