bfg-common 1.0.21 → 1.0.22

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

@@ -1,1283 +1,1283 @@
-<template>
-  <div class="relative">
-    <div :id="outerWrapper" class="datagrid-outer-wrapper">
-      <div class="datagrid-inner-wrapper">
-        <div class="datagrid">
-          <div :id="tableWrapperId" class="datagrid-table-wrapper">
-            <div class="datagrid-table">
-              <div class="datagrid-header">
-                <div class="datagrid-row">
-                  <div class="datagrid-row-master datagrid-row-flex">
-                    <div v-if="props.type" class="datagrid-row-sticky">
-                      <div
-                        :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"
-                              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}`"
-                            :class="[
-                              'datagrid-column-title',
-                              {
-                                'default text-decoration-none':
-                                  !item.sortColumn,
-                              },
-                            ]"
-                            @click="sortTable(item.sortColumn)"
-                          >
-                            <slot name="th" :key="key" :item="item">
-                              <span 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>
-                          <div class="relative">
-                            <button
-                              v-if="item.hasFilter"
-                              :id="`${props.testId}-filter-icon-${key}`"
-                              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%"
-                              right="0"
-                            >
-                              <input
-                                :id="`${props.testId}-filter-input-${key}`"
-                                v-model="filterTerm[key]"
-                                type="text"
-                                @input="filtering"
-                              />
-                            </atoms-popup-simple-popup>
-                          </div>
-                          <div
-                            v-show="!isShowHiddenInfo"
-                            class="datagrid-column-separator"
-                            @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
-                      ),
-                    },
-                  ]"
-                >
-                  <div>
-                    <div
-                      class="datagrid-row-master datagrid-row-flex"
-                      @click="selectRowById(item[0].id)"
-                    >
-                      <div
-                        v-if="props.type"
-                        class="datagrid-row-sticky"
-                        @click.stop
-                      >
-                        <div
-                          :id="expandableCaret"
-                          class="datagrid-expandable-caret datagrid-fixed-column flex-justify-center datagrid-cell"
-                        >
-                          <slot name="type" :key="key" :item="item">
-                            <div
-                              :class="`clr-${props.type}-wrapper flex-justify-center flex-align-center`"
-                            >
-                              <input
-                                :id="`${props.testId}-${inputId}-${item[0].id}`"
-                                v-model="selectedRowLocal"
-                                :type="props.type"
-                                :class="`${props.type}-btn`"
-                                :value="item[0].id"
-                                name="selected-store"
-                                @change="changeSelectedRow($event, item[0].id)"
-                              />
-                              <label
-                                :for="`${props.testId}-${inputId}-${item[0].id}`"
-                                class="clr-control-label"
-                              />
-                            </div>
-                          </slot>
-                        </div>
-                        <div
-                          v-if="$slots.toggleBlock"
-                          class="datagrid-cell datagrid-fixed-width"
-                        >
-                          <div class="flex-align-center">
-                            <button
-                              :id="`${props.testId}-toggle-icon-${key}`"
-                              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 === 'icon'"
-                            :key="key2"
-                            :style="{
-                              width: columnsWidth[key2][0],
-                              minWidth: columnsWidth[key2][1],
-                            }"
-                            class="datagrid-cell datagrid-fixed-width"
-                            :class="{
-                              'hidden-text-triangle':
-                                isShowHiddenInfo &&
-                                item2.key === 'icon' &&
-                                item2.data?.iconClassName,
-                            }"
-                          >
-                            <div class="flex-align-center h-100">
-                              <div
-                                v-if="item2.data?.text"
-                                class="double-arrow-wrap"
-                                :class="{
-                                  'arrow-selected':
-                                    isShowHiddenInfo &&
-                                    item2.id === selectedRow,
-                                }"
-                              >
-                                <atoms-the-icon
-                                  v-if="item2.data?.text"
-                                  name="doubleArrows"
-                                  class="double-arrow"
-                                  :class="{
-                                    'arrow-selected':
-                                      isShowHiddenInfo &&
-                                      item2.id === selectedRow,
-                                  }"
-                                  @click="doubleArrowClick"
-                                />
-                              </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
-                                >
-
-                                <Teleport
-                                  v-if="
-                                    item2.id === selectedRow &&
-                                    !item2.data?.text &&
-                                    isShowHiddenInfo
-                                  "
-                                  :to="`#${tableWrapperId}`"
-                                  @click.stop
-                                >
-                                  <div
-                                    id="hidden-features"
-                                    class="hidden-features"
-                                    :class="{
-                                      'show-hidden-info': isShowHiddenInfo,
-                                    }"
-                                  >
-                                    <div class="header">
-                                      <slot name="hiddenInfoHeader" />
-                                      <button
-                                        :id="`${props.testId}-hidden-info-toggle-icon-${key}-${key2}`"
-                                        class="signpost-action close"
-                                        @click="isShowHiddenInfo = false"
-                                      >
-                                        <atoms-the-icon
-                                          class="close-icon"
-                                          name="close"
-                                        />
-                                      </button>
-                                    </div>
-                                    <slot name="hiddenInfoBody" />
-                                  </div>
-                                </Teleport>
-                              </slot>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          v-show="toggedItems[key]"
-                          class="datagrid-row-flex datagrid-row-detail datagrid-container"
-                        >
-                          <slot name="toggleBlock" />
-                        </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">
-          <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`"
-                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="columnKeys"
-              v-model:column-keys="columnKeys"
-              :test-id="`${props.testId}-footer-description`"
-              class="switch-icon"
-            />
-
-            <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"
-            @change-page-size="changePageSize"
-            @change-page="changePage"
-          />
-        </div>
-
-        <atoms-loader v-show="props.loading" class="datagrid-spinner" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_HTMLSelectElement } from '~/models/interfaces'
-import { itemsPerPage } from '~/components/atoms/table/dataGrid/config/itemsPerPage'
-import {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-import {
-  UI_T_ColumnKeys,
-  UI_T_DataGridType,
-  UI_T_SelectedRow,
-} from '~/components/atoms/table/dataGrid/models/types'
-
-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
-  }>(),
-  {
-    columnKeys: undefined,
-    selectedRow: undefined,
-    type: undefined,
-    itemsPerPage: undefined,
-    fillWidth: true,
-    testId: 'ui-data-grid',
-  }
-)
-
-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: 'filtering', value: any): void
-  (event: 'sorting', value: [string, boolean]): void
-  (event: 'change', value: any): void
-  (event: 'row-detail', value: number): void
-}>()
-
-const mergeOptions = computed(() => props.itemsPerPage || itemsPerPage)
-
-const inputId = ref(`radio-input-${useUniqueId()}`)
-
-const columnKeys = 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) => {
-      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 doubleArrowClick = () => {
-  if (!isShowHiddenInfo.value) {
-    memoryWidth = columnsWidth.value[1][0]
-    columnsWidth.value[1][0] = columnsWidth.value[1][1] // min width of 1st column
-  } else {
-    columnsWidth.value[1][0] = memoryWidth
-  }
-  isShowHiddenInfo.value = !isShowHiddenInfo.value
-}
-
-watch(
-  () => props.selectedRow,
-  (val) => {
-    if (val === undefined) return
-
-    selectedRowLocal.value = val
-  },
-  { immediate: true }
-)
-const selectRowById = (id: number | string): void => {
-  if (props.offSelectByRow) 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 = headItemsPresent.value
-    .filter((_, key) => filterTerm.value[key])
-    .map((item, key) => {
-      return [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:page', value)
-}
-
-const headItemsPresent = computed<UI_I_HeadItem[]>(() => {
-  if (!columnKeys.value) {
-    return props.headItems
-  }
-
-  return props.headItems.filter((item, key) => {
-    return columnKeys.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 (columnKeys.value) {
-    items = items.map((arr) => {
-      arr = arr.filter((item, key) => {
-        return columnKeys.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[]) => {
-          const first = a[sortedColumnIndex.value].text
-          const second = b[sortedColumnIndex.value].text
-
-          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((arr) => {
-        let hasItem = true
-        headItemsPresent.value.forEach((item, key) => {
-          if (!filterTerm.value[key]) return
-          const term = filterTerm.value[key].toLowerCase()
-
-          hasItem = arr.some(
-            (bodyItem) =>
-              bodyItem.key === item.key &&
-              bodyItem.text.toLowerCase().includes(term)
-          )
-        })
-
-        return hasItem
-      })
-    }
-  }
-
-  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
-
-  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, // min-width
-    ])
-  })
-}
-setColumnWidth = useThrottle(setColumnWidth)
-
-const columnsWidth = ref<[string, string][]>([])
-watch(
-  bodyItemsPresent,
-  (items: UI_I_BodyItem[][]) => {
-    items.forEach(() => {
-      toggedItems.value.push(false)
-    })
-    setColumnWidth()
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-)
-
-watch(
-  headItemsPresent,
-  (items: UI_I_HeadItem[]) => {
-    filterShow.value = items.map(() => false)
-    filterTerm.value = items.map(() => '')
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-)
-
-const grabColumn = ref<number>(-1)
-const grabStartX = ref<number>(0)
-const setGrab = (key: number, e: MouseEvent): void => {
-  grabColumn.value = key
-  const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
-  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])
-  const changeX = Math.max(e.clientX - grabStartX.value, 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)
-}
-onMounted(() => {
-  window.addEventListener('mousemove', mousemove)
-  window.addEventListener('mouseup', mouseup)
-
-  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;
-
-  & * {
-    box-sizing: border-box;
-  }
-
-  & svg {
-    fill: var(--table-color);
-  }
-
-  .datagrid-inner-wrapper {
-    @include flex($dir: column);
-    flex-grow: 1;
-    overflow: auto;
-
-    .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);
-
-      .datagrid-table-wrapper {
-        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: 501;
-            width: auto;
-
-            .datagrid-row-scrollable {
-              flex-direction: row;
-
-              .datagrid-column-separator {
-                user-select: none;
-
-                &::after {
-                  cursor: col-resize;
-                }
-              }
-            }
-
-            .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;
-                //flex: 1 1 auto;
-
-                &:last-child {
-                  flex: 1 1 auto;
-                }
-
-                &.datagrid-toggle-block {
-                  width: 38px;
-                  min-width: 38px;
-
-                  .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;
-                }
-
-                .sort-arrow-wrap {
-                  margin-left: auto;
-                  height: 14px;
-                  width: 14px;
-                  vertical-align: middle;
-
-                  .sort-arrow {
-                    &.down {
-                      transform: rotate(180deg);
-                    }
-                  }
-                }
-                .title-icon {
-                  width: 24px;
-                  height: 24px;
-                }
-              }
-
-              .datagrid-filter-toggle {
-                background: unset;
-
-                .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;
-
-                &.hidden-text-triangle::after {
-                  content: '';
-                  margin-right: -5%;
-                  position: absolute;
-                  transform: rotate(225deg);
-                  border-bottom: 21px solid transparent;
-                  border-right: 21px solid var(--global-bg-color);
-                  bottom: 4%;
-                  right: 0;
-                  z-index: 1000003;
-                }
-                &.hidden-text-triangle::before {
-                  content: '';
-                  margin-right: -5%;
-                  transform: rotate(-135deg);
-                  position: absolute;
-                  border-bottom: 22px solid transparent;
-                  border-right: 22px solid var(--global-border-color);
-                  bottom: 3%;
-                  right: 0%;
-                  z-index: 1000002;
-                }
-              }
-
-              .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;
-
-              &: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-row-sticky {
-            @include flex($w: nowrap);
-            position: sticky;
-            left: 0;
-            z-index: 500;
-            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 {
-              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);
-              }
-            }
-          }
-
-          .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;
-
-      .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;
-  position: absolute;
-  top: 8.5%;
-  right: 0%;
-  left: 25.35%;
-  bottom: 0%;
-  z-index: 1000001;
-  background-color: var(--global-bg-color);
-  color: var(--global-font-color2);
-  border: 1px solid var(--global-border-color);
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .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 {
-      line-height: 24px;
-
-      .close-icon {
-        margin-left: 10px;
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-}
-.double-arrow-wrap {
-  width: 22px;
-  height: 22px;
-  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: 5px;
-}
-</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>
+<template>
+  <div class="relative">
+    <div :id="outerWrapper" class="datagrid-outer-wrapper">
+      <div class="datagrid-inner-wrapper">
+        <div class="datagrid">
+          <div :id="tableWrapperId" class="datagrid-table-wrapper">
+            <div class="datagrid-table">
+              <div class="datagrid-header">
+                <div class="datagrid-row">
+                  <div class="datagrid-row-master datagrid-row-flex">
+                    <div v-if="props.type" class="datagrid-row-sticky">
+                      <div
+                        :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"
+                              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}`"
+                            :class="[
+                              'datagrid-column-title',
+                              {
+                                'default text-decoration-none':
+                                  !item.sortColumn,
+                              },
+                            ]"
+                            @click="sortTable(item.sortColumn)"
+                          >
+                            <slot name="th" :key="key" :item="item">
+                              <span 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>
+                          <div class="relative">
+                            <button
+                              v-if="item.hasFilter"
+                              :id="`${props.testId}-filter-icon-${key}`"
+                              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%"
+                              right="0"
+                            >
+                              <input
+                                :id="`${props.testId}-filter-input-${key}`"
+                                v-model="filterTerm[key]"
+                                type="text"
+                                @input="filtering"
+                              />
+                            </atoms-popup-simple-popup>
+                          </div>
+                          <div
+                            v-show="!isShowHiddenInfo"
+                            class="datagrid-column-separator"
+                            @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
+                      ),
+                    },
+                  ]"
+                >
+                  <div>
+                    <div
+                      class="datagrid-row-master datagrid-row-flex"
+                      @click="selectRowById(item[0].id)"
+                    >
+                      <div
+                        v-if="props.type"
+                        class="datagrid-row-sticky"
+                        @click.stop
+                      >
+                        <div
+                          :id="expandableCaret"
+                          class="datagrid-expandable-caret datagrid-fixed-column flex-justify-center datagrid-cell"
+                        >
+                          <slot name="type" :key="key" :item="item">
+                            <div
+                              :class="`clr-${props.type}-wrapper flex-justify-center flex-align-center`"
+                            >
+                              <input
+                                :id="`${props.testId}-${inputId}-${item[0].id}`"
+                                v-model="selectedRowLocal"
+                                :type="props.type"
+                                :class="`${props.type}-btn`"
+                                :value="item[0].id"
+                                name="selected-store"
+                                @change="changeSelectedRow($event, item[0].id)"
+                              />
+                              <label
+                                :for="`${props.testId}-${inputId}-${item[0].id}`"
+                                class="clr-control-label"
+                              />
+                            </div>
+                          </slot>
+                        </div>
+                        <div
+                          v-if="$slots.toggleBlock"
+                          class="datagrid-cell datagrid-fixed-width"
+                        >
+                          <div class="flex-align-center">
+                            <button
+                              :id="`${props.testId}-toggle-icon-${key}`"
+                              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 === 'icon'"
+                            :key="key2"
+                            :style="{
+                              width: columnsWidth[key2][0],
+                              minWidth: columnsWidth[key2][1],
+                            }"
+                            class="datagrid-cell datagrid-fixed-width"
+                            :class="{
+                              'hidden-text-triangle':
+                                isShowHiddenInfo &&
+                                item2.key === 'icon' &&
+                                item2.data?.iconClassName,
+                            }"
+                          >
+                            <div class="flex-align-center h-100">
+                              <div
+                                v-if="item2.data?.text"
+                                class="double-arrow-wrap"
+                                :class="{
+                                  'arrow-selected':
+                                    isShowHiddenInfo &&
+                                    item2.id === selectedRow,
+                                }"
+                              >
+                                <atoms-the-icon
+                                  v-if="item2.data?.text"
+                                  name="doubleArrows"
+                                  class="double-arrow"
+                                  :class="{
+                                    'arrow-selected':
+                                      isShowHiddenInfo &&
+                                      item2.id === selectedRow,
+                                  }"
+                                  @click="doubleArrowClick"
+                                />
+                              </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
+                                >
+
+                                <Teleport
+                                  v-if="
+                                    item2.id === selectedRow &&
+                                    !item2.data?.text &&
+                                    isShowHiddenInfo
+                                  "
+                                  :to="`#${tableWrapperId}`"
+                                  @click.stop
+                                >
+                                  <div
+                                    id="hidden-features"
+                                    class="hidden-features"
+                                    :class="{
+                                      'show-hidden-info': isShowHiddenInfo,
+                                    }"
+                                  >
+                                    <div class="header">
+                                      <slot name="hiddenInfoHeader" />
+                                      <button
+                                        :id="`${props.testId}-hidden-info-toggle-icon-${key}-${key2}`"
+                                        class="signpost-action close"
+                                        @click="isShowHiddenInfo = false"
+                                      >
+                                        <atoms-the-icon
+                                          class="close-icon"
+                                          name="close"
+                                        />
+                                      </button>
+                                    </div>
+                                    <slot name="hiddenInfoBody" />
+                                  </div>
+                                </Teleport>
+                              </slot>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          v-show="toggedItems[key]"
+                          class="datagrid-row-flex datagrid-row-detail datagrid-container"
+                        >
+                          <slot name="toggleBlock" />
+                        </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">
+          <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`"
+                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="columnKeys"
+              v-model:column-keys="columnKeys"
+              :test-id="`${props.testId}-footer-description`"
+              class="switch-icon"
+            />
+
+            <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"
+            @change-page-size="changePageSize"
+            @change-page="changePage"
+          />
+        </div>
+
+        <atoms-loader v-show="props.loading" class="datagrid-spinner" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HTMLSelectElement } from '~/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/config/itemsPerPage'
+import {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  UI_T_ColumnKeys,
+  UI_T_DataGridType,
+  UI_T_SelectedRow,
+} from '~/components/atoms/table/dataGrid/models/types'
+
+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
+  }>(),
+  {
+    columnKeys: undefined,
+    selectedRow: undefined,
+    type: undefined,
+    itemsPerPage: undefined,
+    fillWidth: true,
+    testId: 'ui-data-grid',
+  }
+)
+
+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: 'filtering', value: any): void
+  (event: 'sorting', value: [string, boolean]): void
+  (event: 'change', value: any): void
+  (event: 'row-detail', value: number): void
+}>()
+
+const mergeOptions = computed(() => props.itemsPerPage || itemsPerPage)
+
+const inputId = ref(`radio-input-${useUniqueId()}`)
+
+const columnKeys = 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) => {
+      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 doubleArrowClick = () => {
+  if (!isShowHiddenInfo.value) {
+    memoryWidth = columnsWidth.value[1][0]
+    columnsWidth.value[1][0] = columnsWidth.value[1][1] // min width of 1st column
+  } else {
+    columnsWidth.value[1][0] = memoryWidth
+  }
+  isShowHiddenInfo.value = !isShowHiddenInfo.value
+}
+
+watch(
+  () => props.selectedRow,
+  (val) => {
+    if (val === undefined) return
+
+    selectedRowLocal.value = val
+  },
+  { immediate: true }
+)
+const selectRowById = (id: number | string): void => {
+  if (props.offSelectByRow) 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 = headItemsPresent.value
+    .filter((_, key) => filterTerm.value[key])
+    .map((item, key) => {
+      return [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:page', value)
+}
+
+const headItemsPresent = computed<UI_I_HeadItem[]>(() => {
+  if (!columnKeys.value) {
+    return props.headItems
+  }
+
+  return props.headItems.filter((item, key) => {
+    return columnKeys.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 (columnKeys.value) {
+    items = items.map((arr) => {
+      arr = arr.filter((item, key) => {
+        return columnKeys.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[]) => {
+          const first = a[sortedColumnIndex.value].text
+          const second = b[sortedColumnIndex.value].text
+
+          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((arr) => {
+        let hasItem = true
+        headItemsPresent.value.forEach((item, key) => {
+          if (!filterTerm.value[key]) return
+          const term = filterTerm.value[key].toLowerCase()
+
+          hasItem = arr.some(
+            (bodyItem) =>
+              bodyItem.key === item.key &&
+              bodyItem.text.toLowerCase().includes(term)
+          )
+        })
+
+        return hasItem
+      })
+    }
+  }
+
+  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
+
+  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, // min-width
+    ])
+  })
+}
+setColumnWidth = useThrottle(setColumnWidth)
+
+const columnsWidth = ref<[string, string][]>([])
+watch(
+  bodyItemsPresent,
+  (items: UI_I_BodyItem[][]) => {
+    items.forEach(() => {
+      toggedItems.value.push(false)
+    })
+    setColumnWidth()
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+
+watch(
+  headItemsPresent,
+  (items: UI_I_HeadItem[]) => {
+    filterShow.value = items.map(() => false)
+    filterTerm.value = items.map(() => '')
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+
+const grabColumn = ref<number>(-1)
+const grabStartX = ref<number>(0)
+const setGrab = (key: number, e: MouseEvent): void => {
+  grabColumn.value = key
+  const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
+  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])
+  const changeX = Math.max(e.clientX - grabStartX.value, 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)
+}
+onMounted(() => {
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+
+  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;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  & svg {
+    fill: var(--table-color);
+  }
+
+  .datagrid-inner-wrapper {
+    @include flex($dir: column);
+    flex-grow: 1;
+    overflow: auto;
+
+    .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);
+
+      .datagrid-table-wrapper {
+        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: 501;
+            width: auto;
+
+            .datagrid-row-scrollable {
+              flex-direction: row;
+
+              .datagrid-column-separator {
+                user-select: none;
+
+                &::after {
+                  cursor: col-resize;
+                }
+              }
+            }
+
+            .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;
+                //flex: 1 1 auto;
+
+                &:last-child {
+                  flex: 1 1 auto;
+                }
+
+                &.datagrid-toggle-block {
+                  width: 38px;
+                  min-width: 38px;
+
+                  .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;
+                }
+
+                .sort-arrow-wrap {
+                  margin-left: auto;
+                  height: 14px;
+                  width: 14px;
+                  vertical-align: middle;
+
+                  .sort-arrow {
+                    &.down {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+                .title-icon {
+                  width: 24px;
+                  height: 24px;
+                }
+              }
+
+              .datagrid-filter-toggle {
+                background: unset;
+
+                .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;
+
+                &.hidden-text-triangle::after {
+                  content: '';
+                  margin-right: -5%;
+                  position: absolute;
+                  transform: rotate(225deg);
+                  border-bottom: 21px solid transparent;
+                  border-right: 21px solid var(--global-bg-color);
+                  bottom: 4%;
+                  right: 0;
+                  z-index: 1000003;
+                }
+                &.hidden-text-triangle::before {
+                  content: '';
+                  margin-right: -5%;
+                  transform: rotate(-135deg);
+                  position: absolute;
+                  border-bottom: 22px solid transparent;
+                  border-right: 22px solid var(--global-border-color);
+                  bottom: 3%;
+                  right: 0%;
+                  z-index: 1000002;
+                }
+              }
+
+              .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;
+
+              &: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-row-sticky {
+            @include flex($w: nowrap);
+            position: sticky;
+            left: 0;
+            z-index: 500;
+            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 {
+              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);
+              }
+            }
+          }
+
+          .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;
+
+      .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;
+  position: absolute;
+  top: 8.5%;
+  right: 0%;
+  left: 25.35%;
+  bottom: 0%;
+  z-index: 1000001;
+  background-color: var(--global-bg-color);
+  color: var(--global-font-color2);
+  border: 1px solid var(--global-border-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .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 {
+      line-height: 24px;
+
+      .close-icon {
+        margin-left: 10px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
+.double-arrow-wrap {
+  width: 22px;
+  height: 22px;
+  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: 5px;
+}
+</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>