bfg-common 1.5.24 → 1.5.26

package/components/atoms/table/dataGrid/DataGrid.vue~

@@ -0,0 +1,1705 @@
+<template>
+  <div class="relative" style="display: flex">
+    <div
+      :id="outerWrapper"
+      :class="[
+        'datagrid-outer-wrapper',
+        {
+          'datagrid-outer-wrapper-opened-info': isShowHiddenInfo,
+        },
+      ]"
+    >
+      <div class="datagrid-inner-wrapper">
+        <div
+          v-if="props.isMainFilter"
+          class="main-filter-content flex-justify-end"
+        >
+          <atoms-the-icon class="filter-icon" name="filter" />
+          <input
+            :id="`${props.testId}-main-filter-input`"
+            v-model.trim="mainFilter"
+            :data-id="`${props.testId}-main-filter-input`"
+            :placeholder="props.mainFilterPlaceholder"
+            type="text"
+            @input="emits('main-filter', mainFilter)"
+          />
+        </div>
+        <div
+          :class="[
+            'datagrid',
+            {
+              'datagrid-opened-info': isShowHiddenInfo,
+            },
+          ]"
+        >
+          <div :id="tableWrapperId" class="datagrid-table-wrapper">
+            <div class="datagrid-table" :data-id="props.testId">
+              <div class="datagrid-header">
+                <div class="datagrid-row">
+                  <div class="datagrid-row-master datagrid-row-flex">
+                    <div
+                      v-if="props.type || $slots.toggleBlock"
+                      class="datagrid-row-sticky"
+                    >
+                      <div
+                        v-if="props.type"
+                        :id="expandableCaret"
+                        class="datagrid-column datagrid-expandable-caret datagrid-fixed-column flex-align-center flex-justify-center"
+                      >
+                        <template v-if="props.type === 'checkbox'">
+                          <div
+                            class="clr-checkbox-wrapper flex-align-center flex-justify-center w-100"
+                          >
+                            <input
+                              :id="`${props.testId}-${inputId}-all`"
+                              v-model="selectedAll"
+                              :data-id="`${props.testId}-filter-all`"
+                              type="checkbox"
+                              class="checkbox-btn"
+                              :value="-1"
+                              @change="changeAll"
+                            />
+                            <label
+                              :for="`${props.testId}-${inputId}-all`"
+                              class="clr-control-label"
+                            />
+                          </div>
+                          <div class="datagrid-column-separator"></div>
+                        </template>
+                      </div>
+                      <div
+                        v-if="$slots.toggleBlock"
+                        class="datagrid-toggle-block datagrid-column datagrid-fixed-width"
+                      >
+                        <div class="datagrid-column-flex">
+                          <div class="datagrid-column-separator">
+                            <span class="clr-sr-only" />
+                            <div class="datagrid-column-resize-tracker" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="datagrid-row-scrollable">
+                      <div
+                        v-for="(item, key) in headItemsPresent"
+                        :key="key"
+                        :style="{
+                          width: columnsWidth[key][0],
+                          minWidth: columnsWidth[key][1],
+                        }"
+                        class="datagrid-column datagrid-fixed-width"
+                      >
+                        <div class="datagrid-column-flex">
+                          <button
+                            :id="`${props.testId}-sort-column-${key}`"
+                            :data-id="`${item.testId}-sort-column`"
+                            :class="[
+                              'datagrid-column-title',
+                              {
+                                'default text-decoration-none':
+                                  !item.sortColumn,
+                              },
+                            ]"
+                            @click="sortTable(item.sortColumn)"
+                          >
+                            <slot :key="key" name="th" :item="item">
+                              <span
+                                :title="item.text"
+                                :style="{
+                                  width:
+                                    columnsWidth[key][0]?.slice(0, -2) -
+                                    (item.hasFilter ? 65 : 40) +
+                                    'px',
+                                }"
+                                class="title-column"
+                              >
+                                {{ item.text }}
+                              </span>
+                            </slot>
+                            <span
+                              v-if="item.sortColumn"
+                              class="sort-arrow-wrap"
+                            >
+                              <atoms-the-icon
+                                v-show="sortInfo[0] === item.sortColumn"
+                                :class="['sort-arrow', { down: sortInfo[1] }]"
+                                name="sort-arrow"
+                              />
+                            </span>
+                          </button>
+                          <button
+                            v-if="item.hasFilter"
+                            :id="`${props.testId}-filter-icon-${key}`"
+                            :data-id="`${item.testId}-filter-icon`"
+                            class="datagrid-filter-toggle clr-anchor clr-smart-open-close"
+                            @click="filterShow[key] = !filterShow[key]"
+                          >
+                            <atoms-the-icon
+                              v-if="filterTerm[key]"
+                              class="filter-icon"
+                              name="filter-solid"
+                              style="fill: #0079b8"
+                            />
+                            <atoms-the-icon
+                              v-else
+                              class="filter-icon"
+                              name="filter"
+                            />
+                          </button>
+                          <atoms-popup-simple-popup
+                            v-model="filterShow[key]"
+                            :test-id="`${props.testId}-filter`"
+                            top="100%"
+                            :left="key === 0 ? '0' : ''"
+                            :right="key !== 0 ? '0' : ''"
+                          >
+                            <input
+                              :id="`${props.testId}-filter-input-${key}`"
+                              v-model="filterTerm[key]"
+                              :data-id="`${item.testId}-filter-input`"
+                              type="text"
+                              @input="filtering"
+                            />
+                          </atoms-popup-simple-popup>
+                          <div
+                            v-show="
+                              !isShowHiddenInfo ||
+                              (isShowHiddenInfo && key === 0)
+                            "
+                            :class="[
+                              'datagrid-column-separator',
+                              {
+                                'double-arrow-separator':
+                                  key === 0 && props.withInfo,
+                              },
+                            ]"
+                            @mousedown="setGrab(key, $event)"
+                          >
+                            <button
+                              :id="`${props.testId}-resize-tracker-${key}`"
+                              class="datagrid-column-handle drag-handle draggable"
+                            />
+                            <span class="clr-sr-only" />
+                            <div class="datagrid-column-resize-tracker" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <template v-if="bodyItemsPresent.length">
+                <div
+                  v-for="(item, key) in bodyItemsPresent"
+                  :key="item.id"
+                  :class="[
+                    'datagrid-body-row datagrid-row animation',
+                    {
+                      'datagrid-selected active': checkIsSelectedRow(
+                        item[0].id
+                      ),
+                      'datagrid-selected-info':
+                        props.withInfo &&
+                        isShowHiddenInfo &&
+                        checkIsSelectedRow(item[0].id),
+                    },
+                  ]"
+                  :[props.rowAttributeIdName]="item[0].dataId"
+                >
+                  <div>
+                    <div
+                      :data-id="`${item[0].testId}-select-row`"
+                      class="datagrid-row-master datagrid-row-flex"
+                      @click.stop="selectRowById(item[0])"
+                    >
+                      <div
+                        v-if="props.type || $slots.toggleBlock"
+                        class="datagrid-row-sticky"
+                        @click.stop
+                      >
+                        <div
+                          :id="expandableCaret"
+                          :class="[
+                            'datagrid-expandable-caret flex-justify-center datagrid-cell',
+                            {
+                              'datagrid-fixed-column': !props.withInfo,
+                              'datagrid-fixed-column-without-separator':
+                                props.withInfo,
+                            },
+                          ]"
+                        >
+                          <!--TODO refactoring (duplicate)-->
+                          <div
+                            v-if="$slots.toggleBlock && !props.type"
+                            class="datagrid-cell datagrid-fixed-width"
+                          >
+                            <div
+                              v-if="item[0]?.isShowToggleIcon ?? true"
+                              class="flex-align-center"
+                            >
+                              <button
+                                :id="`${props.testId}-toggle-icon-${key}`"
+                                :data-id="`${item[0].testId}-toggle-button`"
+                                class="datagrid-expandable-caret-button reset-btn"
+                                @click="toggle(key)"
+                              >
+                                <atoms-the-icon
+                                  :class="[
+                                    'datagrid-expandable-caret-icon',
+                                    { toggle: toggedItems[key] },
+                                  ]"
+                                  name="angle"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                          <slot
+                            v-if="props.type"
+                            :key="key"
+                            name="type"
+                            :item="item"
+                          >
+                            <div
+                              :class="
+                                item[0]?.disabled && 'clr-form-control-disabled'
+                              "
+                            >
+                              <div
+                                :class="`clr-${props.type}-wrapper flex-justify-center flex-align-center`"
+                              >
+                                <input
+                                  :id="`${props.testId}-${inputId}-${item[0].id}`"
+                                  :key="item[0].id"
+                                  v-model="selectedRowLocal"
+                                  :data-id="`${item[0].testId}-row-selection-input`"
+                                  :type="props.type"
+                                  :class="`${props.type}-btn`"
+                                  :value="item[0].id"
+                                  :disabled="item[0]?.disabled || false"
+                                  name="selected-store"
+                                  @change="
+                                    changeSelectedRow($event, item[0].id)
+                                  "
+                                />
+                                <label
+                                  :for="`${props.testId}-${inputId}-${item[0].id}`"
+                                  class="clr-control-label"
+                                />
+                              </div>
+                            </div>
+                          </slot>
+                        </div>
+                        <!--TODO refactoring (duplicate)-->
+                        <div
+                          v-if="$slots.toggleBlock && props.type"
+                          class="datagrid-cell datagrid-fixed-width"
+                        >
+                          <div class="flex-align-center">
+                            <button
+                              :id="`${props.testId}-toggle-icon-${key}`"
+                              :data-id="`${item[0].testId}-toggle-row-button`"
+                              class="datagrid-expandable-caret-button reset-btn"
+                              @click="toggle(key)"
+                            >
+                              <atoms-the-icon
+                                :class="[
+                                  'datagrid-expandable-caret-icon',
+                                  { toggle: toggedItems[key] },
+                                ]"
+                                name="angle"
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="datagrid-row-scrollable">
+                        <div class="datagrid-scrolling-cells">
+                          <div
+                            v-for="(item2, key2) in item"
+                            v-show="
+                              !isShowHiddenInfo ||
+                              item2.key === 'col1' ||
+                              item2.key === 'icon'
+                            "
+                            :key="key2"
+                            :style="{
+                              width: columnsWidth[key2][0],
+                              minWidth: columnsWidth[key2][1],
+                            }"
+                            :class="[
+                              'datagrid-cell datagrid-fixed-width',
+                              {
+                                'hidden-text-triangle':
+                                  isShowHiddenInfo &&
+                                  item2.data?.name === 'hidden-text-triangle',
+                              },
+                            ]"
+                          >
+                            <div
+                              :class="[
+                                'flex-align-center h-100',
+                                {
+                                  'double-arrow-width':
+                                    item2.data?.name === 'doubleArrows',
+                                },
+                              ]"
+                            >
+                              <div
+                                v-if="item2.data?.name === 'doubleArrows'"
+                                :id="`show-info-${item[0].data.id}`"
+                                :data-id="`${item[0].testId}-double-arrow`"
+                                :class="[
+                                  'double-arrow-wrap',
+                                  {
+                                    'arrow-selected':
+                                      isShowHiddenInfo &&
+                                      item2.id === props.selectedRow,
+                                  },
+                                ]"
+                                @click.prevent.stop="
+                                  doubleArrowClick(item2, item)
+                                "
+                              >
+                                <atoms-the-icon
+                                  v-if="item2.data?.name === 'doubleArrows'"
+                                  name="doubleArrows"
+                                  :class="[
+                                    'double-arrow',
+                                    {
+                                      'arrow-selected':
+                                        isShowHiddenInfo &&
+                                        item2.id === props.selectedRow,
+                                    },
+                                  ]"
+                                />
+                              </div>
+                              <span
+                                v-if="item2.text && item2.data?.iconClassName"
+                                class="vertical-divider"
+                              />
+                              <slot :name="item2.key" :item="item2">
+                                <span class="text-ellipsis" :title="item2.text"
+                                  >{{ item2.text }}
+                                </span>
+                              </slot>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          v-show="toggedItems[key]"
+                          class="datagrid-row-flex datagrid-row-detail datagrid-container"
+                        >
+                          <slot name="toggleBlock" :item="item" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="datagrid-placeholder-container">
+                  <div class="datagrid-placeholder datagrid-empty">
+                    <div class="datagrid-placeholder-image"></div>
+
+                    <span>No items found</span>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="!hideFooter"
+          :class="[
+            'datagrid-footer',
+            {
+              'datagrid-footer-opened-info': isShowHiddenInfo,
+            },
+          ]"
+        >
+          <div
+            v-if="props.type === 'checkbox' && props.selectedRow?.length"
+            class="clr-form-control-disabled"
+          >
+            <div class="clr-checkbox-wrapper">
+              <input
+                :id="`${props.testId}-check-all`"
+                :data-id="`${props.testId}-check-all`"
+                type="checkbox"
+                checked
+              />
+              <label class="clr-control-label">
+                {{ props.selectedRow?.length }}
+              </label>
+            </div>
+          </div>
+          <div class="datagrid-footer-description flex-align-center">
+            <atoms-table-data-grid-column-switch
+              v-if="columnKeysLocal"
+              v-model:column-keys="columnKeysLocal"
+              :test-id="`${props.testId}-footer-description`"
+              class="switch-icon"
+            />
+
+            <template v-if="props.isShowExport && bodyItemsPresent.length">
+              <common-select-button-dropdown
+                v-if="props.selectedRow?.length"
+                :heading="localization.common.export"
+                :items="exportItems"
+                :test-id="`${props.testId}-export-btn`"
+                class="properties__actions"
+                is-top
+                @click="onExport"
+              />
+              <button
+                v-else
+                :data-id="`${props.testId}-export-button`"
+                class="export-link dropdown-toggle btn btn-sm btn-link"
+                @click="onExportAll"
+              >
+                {{ localization.common.export }}
+              </button>
+            </template>
+
+            <div v-if="$slots.action" class="datagrid-footer__action">
+              <slot name="action" />
+            </div>
+          </div>
+
+          <atoms-table-data-grid-pagination
+            :test-id="props.testId"
+            :page-size="props.pageSize"
+            :page="props.page"
+            :options="mergeOptions"
+            :total-items="props.totalItems"
+            :total-pages="props.totalPages"
+            :hide-pagination="props.hidePagination"
+            :hide-page-size="props.hidePageSize"
+            :show-page-info="props.showPageInfo"
+            :page-items-count="props.bodyItems.length"
+            :is-show-hidden-info="isShowHiddenInfo"
+            @change-page-size="changePageSize"
+            @change-page="changePage"
+          />
+        </div>
+
+        <atoms-loader
+          v-show="props.loading"
+          class="datagrid-spinner"
+          :test-id="`${props.testId}-spinner`"
+        />
+      </div>
+    </div>
+    <div
+      v-if="isShowInfo"
+      id="hidden-features"
+      :class="[
+        'hidden-features',
+        {
+          'show-hidden-info': isShowHiddenInfo,
+        },
+      ]"
+    >
+      <!--      <div class="header">-->
+      <!--        <slot name="hiddenInfoHeader" :item="showedInfoCol" />-->
+      <!--        <button-->
+      <!--            :id="`${props.testId}-hidden-info-toggle-icon-${showedInfoRow?.key}-${showedInfoRow?.data.name}`"-->
+      <!--            :data-id="`${props.testId}-hidden-info-toggle-icon`"-->
+      <!--            class="signpost-action close"-->
+      <!--            @click="isShowHiddenInfo = false"-->
+      <!--        >-->
+      <!--          <atoms-the-icon class="close-icon" name="close" />-->
+      <!--        </button>-->
+      <!--      </div>-->
+      <!--      <slot name="hiddenInfoBody" />-->
+      <button
+        :id="`${props.testId}-hidden-info-toggle-icon-${showedInfoRow?.key}-${showedInfoRow?.data.name}`"
+        :data-id="`${props.testId}-hidden-info-toggle-icon`"
+        class="signpost-action close"
+        @click="isShowHiddenInfo = false"
+      >
+        <atoms-the-icon class="close-icon" name="close" />
+      </button>
+      <slot name="hiddenInfo" :item="showedInfoCol" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isRtl } from 'bfg-uikit/lib/config/trl'
+import type {
+  UI_I_HTMLSelectElement,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type {
+  UI_T_ColumnKeys,
+  UI_T_DataGridType,
+  UI_T_SelectedRow,
+} from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import { exportItemsFunc } from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
+import { generateCsvAndDownload } from '~/components/atoms/table/dataGrid/lib/utils/export'
+
+const props = withDefaults(
+  defineProps<{
+    headItems: UI_I_HeadItem[]
+    bodyItems: UI_I_BodyItem[][]
+    pageSize: number
+    page: number
+    totalItems: number
+    totalPages: number
+    loading?: boolean
+    columnKeys?: UI_I_ColumnKey[]
+    selectedRow?: UI_T_SelectedRow
+    type?: UI_T_DataGridType
+    itemsPerPage?: UI_I_OptionItem[]
+    offSelectByRow?: boolean
+    hidePageSize?: boolean
+    showPageInfo?: boolean
+    serverOff?: boolean
+    fillWidth?: boolean
+    hideFooter?: boolean
+    hidePagination?: boolean
+    testId?: string
+    withInfo?: boolean
+    rowAttributeIdName?: string
+    isMainFilter?: boolean
+    mainFilterPlaceholder?: string
+    isShowExport?: boolean
+  }>(),
+  {
+    columnKeys: undefined,
+    selectedRow: undefined,
+    type: undefined,
+    itemsPerPage: undefined,
+    fillWidth: true,
+    testId: 'ui-data-grid',
+    withInfo: false,
+    rowAttributeIdName: 'data-id',
+    isShowExport: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'update:column-keys', value: UI_T_ColumnKeys): void
+  (event: 'update:selected-row', value: UI_T_SelectedRow): void
+  (event: 'update:page-size', value: number): void
+  (event: 'update:page', value: number): void
+  (event: 'main-filter', value: string): void
+  (event: 'filtering', value: string[][]): void
+  (event: 'sorting', value: [string, boolean]): void
+  (event: 'change', value: any): void
+  (event: 'row-detail', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const mainFilter = ref<string>('')
+
+const mergeOptions = computed<UI_I_OptionItem[]>(
+  () => props.itemsPerPage || itemsPerPage
+)
+
+const inputId = ref<string>(`radio-input-${useUniqueId()}`)
+
+const columnKeysLocal = computed<UI_T_ColumnKeys>({
+  get() {
+    return props.columnKeys
+  },
+  set(newValue) {
+    emits('update:column-keys', newValue)
+  },
+})
+
+const selectedAll = ref<boolean>(false)
+const changeAll = (e: UI_I_HTMLSelectElement): void => {
+  const newSelectedRow: (number | string)[] = []
+  if (e.target.checked) {
+    bodyItemsPresent.value.forEach((row) => {
+      if (row[0]?.disabled) return
+
+      newSelectedRow.push(row[0].id)
+    })
+  }
+
+  emits('update:selected-row', newSelectedRow)
+}
+
+const selectedRowLocal = ref<UI_T_SelectedRow>([])
+const isShowHiddenInfo = ref<boolean>(false)
+const tableWrapperId = `table-wrapper-${useUniqueId()}`
+let memoryWidth = '0'
+
+const showedInfoRow = ref<UI_I_BodyItem | null>(null)
+const showedInfoCol = ref<UI_I_BodyItem[] | null>(null)
+
+const isShowInfo = computed(
+  () =>
+    showedInfoRow.value &&
+    showedInfoRow.value.id === props.selectedRow &&
+    !showedInfoRow.value.data?.text &&
+    isShowHiddenInfo.value
+)
+
+const setShowedInfoData = (
+  item: UI_I_BodyItem | null,
+  items: UI_I_BodyItem[] | null,
+  reset: boolean = false
+): void => {
+  showedInfoRow.value = item
+  showedInfoCol.value = items
+
+  reset && (isShowHiddenInfo.value = false)
+  item && selectRowById(item)
+  reset && (isShowHiddenInfo.value = true)
+}
+
+const doubleArrowClick = (
+  item: UI_I_BodyItem,
+  items: UI_I_BodyItem[]
+): void => {
+  if (!isShowHiddenInfo.value) {
+    setShowedInfoData(item, items)
+  } else {
+    if (showedInfoRow.value?.id !== item.id) {
+      setShowedInfoData(item, items, true)
+
+      return
+    } else {
+      setShowedInfoData(null, null)
+    }
+  }
+
+  isShowHiddenInfo.value = !isShowHiddenInfo.value
+}
+
+watch(
+  () => props.selectedRow,
+  (newValue) => {
+    if (newValue === undefined) return
+
+    if (Array.isArray(newValue) && !newValue.length) selectedAll.value = false
+
+    selectedRowLocal.value = newValue
+  },
+  { immediate: true }
+)
+const selectRowById = (item: UI_I_BodyItem): void => {
+  const { id, disabled } = item
+
+  if (props.offSelectByRow || isShowHiddenInfo.value || disabled) return
+
+  if (props.type === 'checkbox' && Array.isArray(selectedRowLocal.value)) {
+    const has = selectedRowLocal.value.includes(id)
+    if (has) {
+      selectedRowLocal.value = selectedRowLocal.value.filter(
+        (rowId: string | number) => rowId !== id
+      )
+    } else {
+      selectedRowLocal.value.push(id)
+    }
+
+    emits('change', selectedRowLocal.value)
+    emits('update:selected-row', selectedRowLocal.value)
+
+    changeSelectedAll(!has)
+    return
+  }
+
+  emits('change', id)
+  emits('update:selected-row', id)
+}
+const changeSelectedRow = (
+  e: UI_I_HTMLSelectElement,
+  id: number | string
+): void => {
+  if (props.type === 'checkbox' && Array.isArray(selectedRowLocal.value)) {
+    const newSelectedRow = [...selectedRowLocal.value]
+    emits('change', newSelectedRow)
+    emits('update:selected-row', newSelectedRow)
+
+    changeSelectedAll(e.target.checked)
+    return
+  }
+
+  emits('change', id)
+  emits('update:selected-row', id)
+}
+const changeSelectedAll = (checked: boolean): void => {
+  if (props.type === 'checkbox' && Array.isArray(selectedRowLocal.value)) {
+    const newSelectedRow = [...selectedRowLocal.value]
+
+    if (!checked) {
+      selectedAll.value = false
+    } else if (newSelectedRow.length === bodyItemsPresent.value.length) {
+      selectedAll.value = true
+    }
+  }
+}
+
+const checkIsSelectedRow = (id: number | string): boolean => {
+  if (props.type === 'checkbox' && Array.isArray(props.selectedRow)) {
+    return props.selectedRow.includes(id)
+  }
+  return props.selectedRow === id
+}
+
+// Sorting
+const sortInfo = ref<[string, boolean]>(['', true])
+const sortedColumnIndex = computed<number>(() => {
+  let index = -1
+  headItemsPresent.value.forEach((item, key) => {
+    if (item.sortColumn === sortInfo.value[0]) index = key
+  })
+
+  return index
+})
+const sortTable = (sortName: string): void => {
+  if (!sortName) return
+
+  emits('update:selected-row', selectedRowLocal.value)
+
+  if (sortInfo.value[0] === sortName) {
+    sortInfo.value[1] = !sortInfo.value[1]
+
+    emits('sorting', sortInfo.value)
+    return
+  }
+  sortInfo.value[0] = sortName
+  sortInfo.value[1] = true
+
+  emits('sorting', sortInfo.value)
+}
+
+// Filtering
+const filterShow = ref<boolean[]>([])
+const filterTerm = ref<string[]>([])
+const filtering = (): void => {
+  const filter: string[][] = []
+  headItemsPresent.value.forEach((item, key) => {
+    if (filterTerm.value[key]) filter.push([item.key, filterTerm.value[key]])
+  })
+
+  emits('filtering', filter)
+}
+
+// Pagination
+const changePageSize = (value: number): void => {
+  emits('update:page-size', value)
+}
+const changePage = (value: number): void => {
+  emits('update:selected-row', props.type === 'radio' ? null : [])
+  emits('update:page', value)
+}
+
+const headItemsPresent = computed<UI_I_HeadItem[]>(() => {
+  if (!columnKeysLocal.value) {
+    return props.headItems
+  }
+
+  return props.headItems.filter((item, key) => {
+    return columnKeysLocal.value?.find(
+      (item2, key2) => item2.key === item.key && key === key2
+    )?.show
+  })
+})
+
+const bodyItemsPresent = computed<UI_I_BodyItem[][]>(() => {
+  let items: UI_I_BodyItem[][] = props.bodyItems
+
+  // Filtering by column
+  if (columnKeysLocal.value) {
+    items = items.map((arr) => {
+      arr = arr.filter((item, key) => {
+        return columnKeysLocal.value?.find(
+          (item2, key2) => item2.key === item.key && key === key2
+        )?.show
+      })
+      return arr
+    })
+  }
+
+  if (props.serverOff) {
+    // Sorting
+    if (sortInfo.value[0] !== '') {
+      items = useDeepCopy(items).sort(
+        (a: UI_I_BodyItem[], b: UI_I_BodyItem[]) => {
+          let first = a[sortedColumnIndex.value].text.toString().toLowerCase()
+          let second = b[sortedColumnIndex.value].text.toString().toLowerCase()
+
+          const sortValueA = a[sortedColumnIndex.value]?.data?.sortValue
+          const sortValueB = b[sortedColumnIndex.value]?.data?.sortValue
+          if (sortValueA || sortValueA === 0) {
+            first = sortValueA
+          }
+          if (sortValueB || sortValueB === 0) {
+            second = sortValueB
+          }
+
+          if (sortInfo.value[1]) {
+            return first > second ? 1 : first < second ? -1 : 0
+          } else {
+            return first < second ? 1 : first > second ? -1 : 0
+          }
+        }
+      )
+    }
+    // Filtering
+    const hasFilter = headItemsPresent.value.some(
+      (_, key) => filterTerm.value[key]
+    )
+    if (hasFilter) {
+      items = items.filter((row) => {
+        // 0 - начальное значение
+        // 1 - найден элемент
+        // -1 - ненайден элемент
+        let hasItem = 0
+        headItemsPresent.value.forEach((item, key) => {
+          if (!filterTerm.value[key]) return
+          const term = filterTerm.value[key].toLowerCase()
+
+          row.forEach((col) => {
+            if (
+              col.key === item.key &&
+              typeof col.text === 'string' &&
+              hasItem != -1
+            ) {
+              hasItem = col.text.toLowerCase().includes(term) ? 1 : -1
+            }
+          })
+        })
+
+        return hasItem === 1
+      })
+    }
+  }
+
+  return items
+})
+
+const toggedItems = ref<boolean[]>([])
+
+const toggle = (key: number): void => {
+  toggedItems.value[key] = !toggedItems.value[key]
+  if (!toggedItems.value[key]) return
+  emits('row-detail', key)
+}
+
+const outerWrapper = `datagrid-outer-wrapper${useUniqueId()}`
+const expandableCaret = `datagrid-expandable-caret${useUniqueId()}`
+
+// Resize
+let helper = false
+let setColumnWidth = (): void => {
+  if (!helper) {
+    columnsWidth.value = []
+    headItemsPresent.value.forEach((item) => {
+      columnsWidth.value.push([
+        item.width, // width
+        item.width, // min-width
+      ])
+    })
+
+    helper = true
+    setTimeout(() => setColumnWidth(), 0)
+    return
+  }
+  // Не продолжаем, чтобы ширина калонок была так как заданно в headItemsPresent
+  if (!props.fillWidth) return
+
+  // PC-672
+  // const dataGridWidth = document.getElementById(outerWrapper)?.clientWidth || 0
+  // const leftColumnWidth =
+  //   document.getElementById(expandableCaret)?.clientWidth || 0
+  // const bordersWidth = 2
+  // const columnWidth =
+  //   (dataGridWidth - leftColumnWidth - bordersWidth) /
+  //   headItemsPresent.value.length
+
+  headItemsPresent.value.forEach((item) => {
+    columnsWidth.value.push([
+      // `${columnWidth}px`, // width
+      item.width, // width
+      item.width, // min-width
+    ])
+  })
+}
+setColumnWidth = useThrottle(setColumnWidth)
+
+const columnsWidth = ref<[string, string][]>([])
+watch(
+  bodyItemsPresent,
+  (newValue: UI_I_BodyItem[][]) => {
+    newValue.forEach(() => {
+      toggedItems.value.push(false)
+    })
+    setColumnWidth()
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+
+watch(
+  headItemsPresent,
+  (newValue: UI_I_HeadItem[]) => {
+    filterShow.value = newValue.map(() => false)
+    filterTerm.value = newValue.map(() => '')
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+
+const grabColumn = ref<number>(-1)
+const grabStartX = ref<number>(0)
+const setGrab = (key: number, e: MouseEvent): void => {
+  if (props.withInfo && key === 0) return
+
+  if (!isShowHiddenInfo.value) {
+    grabColumn.value = key
+    const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
+    grabStartX.value = e.clientX - currentWidth
+    if (isRtl.value) {
+      grabStartX.value = e.clientX + currentWidth
+    }
+  }
+}
+
+const isDrag = ref<boolean>(false)
+
+const mouseup = (): void => {
+  if (grabColumn.value === -1) {
+    return
+  }
+
+  grabColumn.value = -1
+  isDrag.value = false
+}
+
+let resizeObserve: ResizeObserver
+let mousemove = (e: MouseEvent): void => {
+  if (grabColumn.value === -1) return
+
+  e.preventDefault()
+  isDrag.value = true
+  resizeObserve.disconnect()
+
+  const minWidth = parseInt(columnsWidth.value[grabColumn.value][1])
+  let changeX = Math.max(e.clientX - grabStartX.value, minWidth)
+  if (isRtl.value) {
+    changeX = Math.max(grabStartX.value - e.clientX, minWidth)
+  }
+
+  columnsWidth.value[grabColumn.value] = [`${changeX}px`, `${minWidth}px`]
+}
+mousemove = useThrottle(mousemove)
+
+const setResizeObserve = (): void => {
+  const el = document.getElementById(outerWrapper)
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+
+  resizeObserve = new ResizeObserver(setColumnWidth)
+  resizeObserve.observe(el)
+}
+
+let resizeObserveWithInfo: ResizeObserver
+
+const setColumnWidthWithInfo = (ent: ResizeObserverEntry[]): void => {
+  if (isShowHiddenInfo.value) {
+    memoryWidth = columnsWidth.value[1][0]
+    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 86}px`
+  } else {
+    columnsWidth.value[1][0] = memoryWidth
+  }
+}
+
+const setResizeObserveWithInfo = (): void => {
+  const el = document.querySelector('.datagrid')
+
+  if (!el) {
+    setTimeout(setResizeObserveWithInfo, 0)
+    return
+  }
+
+  resizeObserveWithInfo = new ResizeObserver(setColumnWidthWithInfo)
+  resizeObserveWithInfo.observe(el)
+}
+
+// Export
+const exportItems = computed<UI_I_DropdownButtonItem[]>(() =>
+  exportItemsFunc(
+    localization.value,
+    bodyItemsPresent.value.length || 0,
+    props.selectedRow?.length || 0,
+    props.testId || ''
+  )
+)
+const onExport = (type: '0' | '1'): void => {
+  switch (type) {
+    case '0':
+      onExportAll()
+      break
+    case '1':
+      exportSelected()
+  }
+}
+const onExportAll = (): void => {
+  const rows = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-row-scrollable`
+  ) as NodeListOf<HTMLElement>
+  generateCsvAndDownload(Array.from(rows))
+}
+const exportSelected = (): void => {
+  const header = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-row-scrollable`
+  )[0] as HTMLElement
+  const rows = document.querySelectorAll(
+    `#${tableWrapperId} .datagrid-selected`
+  ) as NodeListOf<HTMLElement>
+  generateCsvAndDownload([header, ...Array.from(rows)])
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+
+  if (props.withInfo) {
+    setResizeObserveWithInfo()
+  }
+
+  setResizeObserve()
+})
+onUnmounted(() => {
+  window.removeEventListener('mouseup', mouseup)
+  window.removeEventListener('mousemove', mousemove)
+})
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.datagrid-outer-wrapper {
+  @include flex($dir: row);
+  //padding-top: 12px;
+  flex-grow: 1;
+  overflow: auto;
+
+  &.datagrid-outer-wrapper-opened-info {
+    width: 35%;
+    min-width: 195px;
+  }
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  & svg {
+    fill: var(--table-color);
+  }
+
+  .datagrid-inner-wrapper {
+    @include flex($dir: column);
+    flex-grow: 1;
+    overflow: auto;
+
+    .main-filter-content {
+      align-items: center;
+
+      .filter-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 10px;
+      }
+    }
+    .datagrid {
+      overflow: auto;
+      flex: 1 1 auto;
+      border-radius: 0.125rem 0.125rem 0 0;
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+      margin-top: 0;
+
+      &.datagrid-opened-info {
+        border-radius: 0.125rem 0 0 0;
+        overflow-x: hidden;
+      }
+
+      .datagrid-table-wrapper {
+        min-width: max-content;
+        display: flex;
+        flex: 1 1 auto;
+        min-height: 100%;
+
+        .datagrid-table {
+          @include flex($dir: column);
+          flex: 1 1 auto;
+          align-content: flex-start;
+          position: relative;
+
+          .datagrid-header {
+            position: sticky;
+            top: 0;
+            z-index: var(--z-sticky);
+            width: auto;
+
+            .datagrid-row-scrollable {
+              flex-direction: row;
+
+              .datagrid-column-separator {
+                user-select: none;
+
+                &::after {
+                  cursor: col-resize;
+                }
+                &.double-arrow-separator .datagrid-column-handle {
+                  cursor: unset;
+                }
+                &.double-arrow-separator::after {
+                  cursor: unset;
+                }
+              }
+            }
+
+            .datagrid-row {
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+
+              &.datagrid-selected {
+                background-color: var(--row-selected-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+
+                & :deep(*) {
+                  color: var(--table-active-color);
+                }
+              }
+
+              .datagrid-column {
+                background-color: var(--block-view-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+                padding: 6px 12px 5px;
+                position: relative;
+                //flex: 1 1 auto;
+
+                &:last-child {
+                  flex: 1 1 auto;
+                }
+
+                &.datagrid-toggle-block {
+                  width: 38px;
+                  min-width: 38px;
+
+                  &::after {
+                    content: '';
+                    width: 0.05rem;
+                    height: calc(100% - 0.5rem);
+                    position: absolute;
+                    right: 0;
+                    top: 0.25rem;
+                    background-color: var(--global-border-color);
+                  }
+
+                  .datagrid-column-separator {
+                    cursor: default;
+
+                    &::after {
+                      cursor: default;
+                    }
+                  }
+                }
+              }
+
+              .datagrid-column-title {
+                align-self: auto;
+                color: var(--table-color);
+                background-color: var(--block-view-bg-color);
+                border-bottom-color: var(--global-border-color);
+                font-size: 11px;
+                @include flex($align: center);
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                //line-height: 24px;
+                line-height: normal;
+
+                .title-column {
+                  font-weight: bold;
+                  font-size: 11px;
+                  overflow: hidden;
+                  text-wrap: none;
+                  text-overflow: ellipsis;
+                }
+
+                .sort-arrow-wrap {
+                  margin-left: auto;
+                  height: 14px;
+                  width: 14px;
+                  min-height: 14px;
+                  min-width: 14px;
+                  vertical-align: middle;
+
+                  .sort-arrow {
+                    &.down {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+                .title-icon {
+                  width: 24px;
+                  height: 24px;
+                }
+              }
+
+              .datagrid-filter-toggle {
+                background: unset;
+                margin-top: -4px;
+                align-self: center;
+
+                .filter-icon {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+            }
+          }
+
+          .datagrid-placeholder-container {
+            .datagrid-placeholder.datagrid-empty {
+              background: var(--block-view-bg-color);
+            }
+            span {
+              font-size: 16px;
+              color: var(--global-font-color4);
+            }
+          }
+
+          .datagrid-row {
+            width: 100%;
+            min-width: max-content;
+            border-top: none;
+            color: var(--table-color);
+            background-color: var(--block-view-bg-color);
+            border-bottom: 1px solid var(--global-border-color);
+
+            &.datagrid-selected {
+              & :deep(*) {
+                color: var(--table-active-color);
+              }
+
+              .datagrid-cell {
+                background-color: var(--row-selected-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+                position: relative;
+                line-height: 1rem;
+              }
+
+              .datagrid-row-detail {
+                background-color: var(--row-selected-bg-color);
+                border-bottom: 1px solid var(--global-border-color);
+              }
+            }
+
+            .datagrid-cell {
+              min-width: 38px;
+              min-height: 28px;
+              padding: 2px 12px 3px 12px;
+              position: relative;
+
+              &:has(.double-arrow-wrap) {
+                padding-left: 4px;
+              }
+
+              &:has(.double-arrow-wrap)::after {
+                content: '';
+                width: 0.5px;
+                height: calc(100% - 6px);
+                position: absolute;
+                right: 2px;
+                top: 3px;
+                background-color: var(--global-border-color);
+              }
+
+              &:last-child {
+                flex: 1 1 auto;
+              }
+
+              button {
+                height: 0.9rem;
+                width: 0.9rem;
+
+                .arrow-icon {
+                  width: 16px;
+                  height: 16px;
+                  transform: rotate(90deg);
+                }
+              }
+
+              .datagrid-cell-icon {
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+              }
+
+              .datagrid-expandable-caret-button {
+                cursor: pointer;
+                width: 100%;
+
+                .datagrid-expandable-caret-icon {
+                  width: 16px;
+                  height: 16px;
+                  transform: rotate(90deg);
+                  fill: var(--table-caret-color);
+
+                  &.toggle {
+                    transform: rotate(180deg);
+                  }
+                }
+              }
+            }
+
+            &.datagrid-selected-info {
+              width: 100%;
+              min-width: max-content;
+              border-top: none;
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+
+              .datagrid-cell {
+                position: relative;
+
+                &.hidden-text-triangle::after {
+                  content: '';
+                  position: absolute;
+                  transform: rotate(225deg);
+                  border-bottom: 15px solid transparent;
+                  border-right: 15px solid var(--global-bg-color);
+                  bottom: 26%;
+                  right: -16px;
+                  z-index: calc(var(--z-sticky) + 1);
+                }
+
+                &.hidden-text-triangle::before {
+                  content: '';
+                  transform: rotate(-135deg);
+                  position: absolute;
+                  border-bottom: 16px solid transparent;
+                  border-right: 16px solid var(--global-border-color);
+                  bottom: 23%;
+                  right: -17px;
+                  z-index: calc(var(--z-sticky) + 1);
+                }
+              }
+            }
+          }
+
+          .datagrid-row-sticky {
+            @include flex($w: nowrap);
+            position: sticky;
+            left: 0;
+            z-index: var(--z-sticky);
+            background-color: var(--block-view-bg-color);
+
+            .datagrid-column {
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+              border-bottom-color: var(--global-border-color);
+              text-align: left;
+              display: flex;
+              flex: 1 1 auto;
+              vertical-align: top;
+              border: none;
+
+              &.datagrid-expandable-caret {
+                .datagrid-column-separator {
+                  display: block;
+
+                  &::after {
+                    top: 0;
+                    height: 18px;
+                  }
+                }
+
+                .radio-btn {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+
+              .datagrid-column-separator {
+                position: relative;
+                //left: 0.6rem;
+                flex: 0 0 auto;
+                width: 0.05rem;
+                order: 100;
+                margin-left: auto;
+                height: 100%;
+              }
+            }
+
+            .datagrid-fixed-column-without-separator {
+              background-color: var(--block-view-bg-color);
+
+              &::after {
+                background-color: transparent;
+              }
+            }
+
+            .datagrid-fixed-column {
+              background-color: var(--block-view-bg-color);
+
+              //&::after {
+              //  content: '';
+              //  width: 0.05rem;
+              //  height: calc(100% - 0.5rem);
+              //  position: absolute;
+              //  right: 0;
+              //  top: 0.25rem;
+              //  background-color: var(--global-border-color);
+              //}
+
+              .clr-form-control-disabled {
+                .clr-checkbox-wrapper {
+                  label {
+                    cursor: not-allowed;
+                  }
+                }
+              }
+            }
+
+            .datagrid-fixed-width {
+              &::after {
+                content: '';
+                width: 0.05rem;
+                height: calc(100% - 0.5rem);
+                position: absolute;
+                right: 0;
+                top: 0.25rem;
+                background-color: var(--global-border-color);
+              }
+            }
+          }
+
+          .datagrid-row-scrollable {
+            @include flex($ff: row nowrap);
+            flex: 1 1 auto;
+
+            .datagrid-scrolling-cells {
+              @include flex($ff: row nowrap);
+              flex: 1 1 auto;
+            }
+          }
+          .datagrid-body-row {
+            .datagrid-row-scrollable {
+              @include flex($ff: column nowrap);
+
+              .datagrid-row-detail {
+                flex: 1;
+              }
+            }
+
+            &:not(.datagrid-selected):hover {
+              border-bottom: 1px solid var(--table-hover-row-border-color);
+              background-color: var(--table-hover-row-background-color);
+              color: var(--table-hover-row-color);
+
+              .datagrid-fixed-column {
+                background-color: var(--table-hover-row-background-color);
+              }
+              .datagrid-cell {
+                background-color: var(--table-hover-row-background-color);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .datagrid-footer {
+      flex: 0 0 auto;
+      @include flex($ff: row nowrap, $just: space-between, $align: stretch);
+      font-size: 0.55rem;
+      background-color: var(--block-view-bg-color);
+      border: 0.05rem solid var(--global-border-color);
+      border-top: none;
+      border-radius: 0 0 0.15rem 0.15rem;
+      padding: 0 0.6rem;
+      height: 28px;
+
+      &.datagrid-footer-opened-info {
+        border-radius: 0 0 0 0.15rem;
+        flex-direction: row-reverse;
+      }
+
+      .clr-form-control-disabled {
+        opacity: 1;
+
+        .clr-checkbox-wrapper {
+          label {
+            color: #8c8c8c;
+            margin-right: 9px;
+            padding-left: 22px;
+            &:before {
+              position: absolute;
+              top: 4px;
+              left: 0;
+              content: '';
+              display: inline-block;
+              height: 16px;
+              width: 16px;
+              border: none;
+              border-radius: 3px;
+              background-color: var(--table-checkbox-color);
+            }
+
+            &:after {
+              position: absolute;
+              content: '';
+              display: inline-block;
+              height: 5px;
+              width: 8px;
+              border-left: 2px solid #fff;
+              border-bottom: 2px solid #fff;
+              top: 4px;
+              left: 4px;
+              transform: translateY(4px) rotate(-45deg);
+            }
+          }
+        }
+      }
+    }
+
+    .datagrid-spinner {
+      top: 0.6rem;
+      height: calc(100% - 0.6rem);
+    }
+
+    .datagrid-footer-description {
+      flex: 1 1 auto;
+
+      :deep(svg) {
+        fill: var(--table-switch-color);
+      }
+    }
+
+    .clr-radio-wrapper,
+    .clr-checkbox-wrapper {
+      height: 18px;
+    }
+
+    .clr-radio-wrapper label,
+    .clr-checkbox-wrapper label {
+      padding-left: 16px;
+    }
+  }
+}
+//.vertical-divider {
+//  width: 1px;
+//  height: 22px;
+//  background: #bbb;
+//  margin: 2px 2px 0 -5px;
+//}
+
+.hidden-features {
+  padding: 9px 14px;
+  background-color: var(--global-bg-color);
+  color: var(--global-font-color2);
+  border: 1px solid var(--global-border-color);
+  border-left: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 65%;
+
+  //.header {
+  //  display: flex;
+  //  align-items: center;
+  //  justify-content: space-between;
+  //  background-color: inherit;
+  //
+  //  h3 {
+  //    font-size: 1rem;
+  //    color: var(--global-font-color2) !important;
+  //    line-height: 1.7rem;
+  //  }
+  button {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    line-height: 24px;
+
+    .close-icon {
+      //margin-left: 10px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+  //}
+}
+.double-arrow-width {
+  width: 25px;
+}
+.double-arrow-wrap {
+  width: 30px;
+  height: 20px;
+  padding-top: 1px;
+  padding-left: 5px;
+  cursor: pointer;
+  background-color: transparent;
+
+  .double-arrow {
+    background-color: transparent;
+    transform: rotate(90deg);
+    width: 16px;
+    height: 16px;
+  }
+
+  .double-arrow.arrow-selected {
+    transform: rotate(-90deg) !important;
+    background-color: #0079b8;
+  }
+}
+.double-arrow-wrap.arrow-selected {
+  background-color: #0079b8;
+  border-radius: 3px;
+}
+</style>
+
+<style>
+:root {
+  --table-color: #565656;
+  --table-active-color: #fff;
+  --table-checkbox-color: #454545;
+  --table-caret-color: #454545;
+  --table-switch-color: #575757;
+  --table-hover-row-border-color: #666;
+  --table-hover-row-background-color: #e8e8e8;
+  --table-hover-row-color: #454545;
+  --table-spinner-bg-color: #ffffff99;
+}
+
+:root.dark-theme {
+  --table-color: #fff;
+  --table-active-color: #565656;
+  --table-checkbox-color: #49aeda;
+  --table-caret-color: #ffffff;
+  --table-switch-color: #b3b3b3;
+  --table-hover-row-border-color: #fff;
+  --table-hover-row-background-color: #324f61;
+  --table-hover-row-color: #e9ecef;
+  --table-spinner-bg-color: rgba(0, 0, 0, 0.5);
+}
+</style>