bfg-common 1.0.0

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

@@ -0,0 +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>