From d5d56b450fab34306664d24cc9e13156f5b5891d Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Wed, 19 Oct 2022 10:42:35 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     |  4 +-
 src/pages/clients/components/ClientsTable.vue | 76 +++++-------------
 .../clients/components/ClientsTableHat.vue    | 42 ++++++++++
 .../clients/components/ClientsTableHeader.vue | 53 ++++++-------
 .../clients/components/ClientsTableRow.vue    | 77 ++++++++++---------
 .../cells/ClientsTableCellHeader.vue          | 28 +++++++
 .../components/cells/TableCellBodyAge.vue     | 14 ++++
 .../components/cells/TableCellBodyEmail.vue   | 14 ++++
 .../cells/TableCellBodyJobTitle.vue           | 14 ++++
 .../components/cells/TableCellBodyMeeting.vue | 21 +++++
 .../components/cells/TableCellBodyName.vue    | 16 ++++
 .../cells/TableCellBodyNetworks.vue           | 14 ++++
 .../components/cells/TableCellBodyPhone.vue   | 14 ++++
 .../cells/TableCellBodyPriority.vue           | 24 ++++++
 src/pages/clients/utils/tableConfig.js        | 61 +++++++++++++++
 15 files changed, 346 insertions(+), 126 deletions(-)
 create mode 100644 src/pages/clients/components/ClientsTableHat.vue
 create mode 100644 src/pages/clients/components/cells/ClientsTableCellHeader.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyAge.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyEmail.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyJobTitle.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyMeeting.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyName.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyNetworks.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyPhone.vue
 create mode 100644 src/pages/clients/components/cells/TableCellBodyPriority.vue
 create mode 100644 src/pages/clients/utils/tableConfig.js

diff --git a/server.js b/server.js
index 5dbe441..7f9e687 100644
--- a/server.js
+++ b/server.js
@@ -14,7 +14,7 @@ export function clientsServer() {
             phone: "+7 (915) 657–21–14",
             email: "Superboyband@yandex.ru",
             networks: [],
-            meetingTime: {
+            meeting: {
               date: "02.06.22",
               time: "18:30–19:30",
             },
@@ -28,7 +28,7 @@ export function clientsServer() {
             phone: "+7 (574) 364–53–36",
             email: "antimag@gmail.com",
             networks: [],
-            meetingTime: {
+            meeting: {
               date: "14.07.22",
               time: "17:30–21:30",
             },
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index 6e07ed3..ca11f17 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -1,45 +1,11 @@
 <template lang="pug">
   .wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
-    clients-table-header(:is-open-actions="marked.length" :open-form-create="openFormCreate" )
-    table.w-full
-      thead.head-table
-        tr.head-row
-          th.w-3
-            .px-4.py-3
-              clients-table-checkbox(:is-check="selectAll" :check="selectedCheck" id="all")
-          th
-            .flex.px-4.justify-between
-              span.text-sm ФИО
-              img.cursor-pointer(src="@/assets/icons/sort-number.svg" alt="SortNumber")
-          th
-            .flex.px-4.justify-between.gap-x-6
-              span.text-sm Возраст
-              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
-            .px-4.text-left
-              span.text-sm Должность
-          th
-            .flex.relative.px-4.justify-between.gap-x-3
-              span.text-sm Приоритет
-              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th
-            .px-4.text-left
-              span.text-sm Телефон
-          th
-            .px-4.text-left
-              span.text-sm Email
-          th
-            .px-4.text-left
-              span.text-sm.leading-8 Сети
-          th
-            .flex.px-4.justify-between.gap-x-11
-              span.text-sm.leading-4.whitespace-nowrap Ближайшая встреча
-              .icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
-          th.w-5
-            .do.px-4
-              span.text-sm Do
-      tbody.tbody
-        clients-table-row(v-for="client in dataClients"
+    clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreate")
+    .flex.flex-col.h-full.gap-y-2
+      clients-table-header(:check="selectedCheck" :is-check="selectAll")
+      .flex.flex-col
+        clients-table-row(
+          v-for="client in dataClients"
           :key="client.id"
           :id="client.id"
           :is-check="marked.includes(client.id)"
@@ -51,17 +17,23 @@
           :phone="client.phone"
           :email="client.email"
           :networks="client.networks"
-          :meeting-time="client.meetingTime"
+          :meeting-time="client.meeting"
           )
 </template>
 
 <script>
 import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
+import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 export default {
   name: "ClientsTable",
-  components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
+  components: {
+    ClientsTableCheckbox,
+    ClientsTableRow,
+    ClientsTableHat,
+    ClientsTableHeader,
+  },
   props: {
     openFormCreate: Function,
   },
@@ -81,7 +53,7 @@ export default {
       fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
     },
     selectedCheck(e) {
-      if (e.target.id === "all") {
+      if (e.target.id === "checkbox") {
         this.selectAll = !this.selectAll;
         this.marked = this.dataClients.map((el) => el.id);
         !this.selectAll && (this.marked = []);
@@ -107,21 +79,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.icon
-  color: var(--font-dark-blue-color)
-  &.priority-open
-    transform: rotate(180deg)
-.head-table
-  color: var(--font-grey-color)
-.tbody:before
-    content: "-"
-    display: block
-    line-height: 8px
-    color: transparent
-.head-row
-  border-bottom: 1px solid #D3D4DC
+.row-body
+  min-height: 56px
+  border-bottom: 1px solid var(--border-light-grey-color)
 .wrapper
   background-color: var(--default-white)
-.color
-  background-color: red
 </style>
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
new file mode 100644
index 0000000..40f4c1e
--- /dev/null
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -0,0 +1,42 @@
+<template lang="pug">
+  .flex.justify-between.w-full.h-fit
+    .flex.gap-2.w-fit.h-fit
+      .input
+        base-input(:with-icon="true")
+      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
+        .icon-filter.text-xl.leading-4
+    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
+    .flex.w-fit.h-fit.gap-x-2
+      bass-export-button(:only-icon="true")
+      base-create-button(@click="openFormCreate" :with-icon="true")
+
+</template>
+
+<script>
+import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BassExportButton from "@/components/base/buttons/BassExportButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "ClientsTAbleHeader",
+  components: {
+    BaseInput,
+    BassExportButton,
+    BaseCreateButton,
+    ClientsTableHeaderActions,
+  },
+  props: {
+    openFormCreate: Function,
+    isOpenActions: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input
+  width: 280px
+  height: fit-content
+.filter-button
+  border-radius: 4px
+  border: 2px solid var(--border-light-grey-color)
+</style>
diff --git a/src/pages/clients/components/ClientsTableHeader.vue b/src/pages/clients/components/ClientsTableHeader.vue
index 40f4c1e..75f7ec8 100644
--- a/src/pages/clients/components/ClientsTableHeader.vue
+++ b/src/pages/clients/components/ClientsTableHeader.vue
@@ -1,42 +1,35 @@
 <template lang="pug">
-  .flex.justify-between.w-full.h-fit
-    .flex.gap-2.w-fit.h-fit
-      .input
-        base-input(:with-icon="true")
-      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
-        .icon-filter.text-xl.leading-4
-    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
-    .flex.w-fit.h-fit.gap-x-2
-      bass-export-button(:only-icon="true")
-      base-create-button(@click="openFormCreate" :with-icon="true")
-
+  .flex.row.text-base.font-semibold
+    clients-table-cell-header(v-for="cell in columnHead" :title="cell.title" :width="cell.width" :class="!cell.title && 'px-3'")
+      .icon-down-arrow.icon.text-xsm.cursor-pointer(v-if="cell.iconHead && cell.name !== 'fullName'" )
+      img.cursor-pointer(v-if="cell.iconHead && cell.name === 'fullName'" src="@/assets/icons/sort-number.svg" alt="SortNumber")
+      clients-table-checkbox(v-if="cell.name === 'checkbox'" :id="cell.name" :check="check" :is-check="isCheck")
 </template>
 
 <script>
-import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
-import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
-import BassExportButton from "@/components/base/buttons/BassExportButton";
-import BaseInput from "@/components/base/BaseInput";
+import { column } from "@/pages/clients/utils/tableConfig";
+import ClientsTableCellHeader from "@/pages/clients/components/cells/ClientsTableCellHeader";
+import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 export default {
-  name: "ClientsTAbleHeader",
-  components: {
-    BaseInput,
-    BassExportButton,
-    BaseCreateButton,
-    ClientsTableHeaderActions,
-  },
+  name: "ClientsTableHead",
+  components: { ClientsTableCheckbox, ClientsTableCellHeader },
   props: {
-    openFormCreate: Function,
-    isOpenActions: Number,
+    check: Function,
+    isCheck: Boolean,
+  },
+  data() {
+    return {
+      columnHead: column,
+    };
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.input
-  width: 280px
-  height: fit-content
-.filter-button
-  border-radius: 4px
-  border: 2px solid var(--border-light-grey-color)
+.row
+  min-height: 36px
+  color: var(--font-grey-color)
+  border-bottom: 1px solid var(--border-light-grey-color)
+.icon
+  color: var(--font-dark-blue-color)
 </style>
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index cdb4b6a..8afb86f 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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
diff --git a/src/pages/clients/components/cells/ClientsTableCellHeader.vue b/src/pages/clients/components/cells/ClientsTableCellHeader.vue
new file mode 100644
index 0000000..8e08ee1
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyAge.vue b/src/pages/clients/components/cells/TableCellBodyAge.vue
new file mode 100644
index 0000000..2b665d8
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyEmail.vue b/src/pages/clients/components/cells/TableCellBodyEmail.vue
new file mode 100644
index 0000000..dd43333
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyJobTitle.vue b/src/pages/clients/components/cells/TableCellBodyJobTitle.vue
new file mode 100644
index 0000000..ed23776
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyMeeting.vue b/src/pages/clients/components/cells/TableCellBodyMeeting.vue
new file mode 100644
index 0000000..0502ddc
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyName.vue b/src/pages/clients/components/cells/TableCellBodyName.vue
new file mode 100644
index 0000000..167420d
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyNetworks.vue b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
new file mode 100644
index 0000000..97eb4ee
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyPhone.vue b/src/pages/clients/components/cells/TableCellBodyPhone.vue
new file mode 100644
index 0000000..181f2ef
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/components/cells/TableCellBodyPriority.vue b/src/pages/clients/components/cells/TableCellBodyPriority.vue
new file mode 100644
index 0000000..82896d5
--- /dev/null
+++ b/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>
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
new file mode 100644
index 0000000..6c27296
--- /dev/null
+++ b/src/pages/clients/utils/tableConfig.js
@@ -0,0 +1,61 @@
+export const column = [
+  {
+    name: "checkbox",
+    iconHead: false,
+    width: 36,
+  },
+  {
+    name: "fullName",
+    title: "ФИО",
+    iconHead: true,
+    width: 400,
+  },
+  {
+    name: "age",
+    title: "Возраст",
+    iconHead: true,
+    width: 140,
+  },
+  {
+    name: "jobTitle",
+    title: "Должность",
+    iconHead: false,
+    width: 200,
+  },
+  {
+    name: "priority",
+    title: "Приоритет",
+    iconHead: true,
+    width: 124,
+  },
+  {
+    name: "phone",
+    title: "Телефон",
+    iconHead: false,
+    width: 170,
+  },
+  {
+    name: "email",
+    title: "Email",
+    iconHead: false,
+    width: 250,
+  },
+  {
+    name: "networks",
+    title: "Сети",
+    iconHead: false,
+    width: 152,
+  },
+  {
+    name: "meeting",
+    title: "Ближайшая встреча",
+    iconHead: true,
+    width: 220,
+  },
+  {
+    name: "dots",
+    title: "Do",
+    iconHead: false,
+    width: 53,
+  },
+];