@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.1 → 8.22.23-EPDM-15710.0

package/src/components/tables/mainTable/index.vue

@@ -1,524 +1,523 @@
-<template>
-  <PageContainer
-    :should-set-custom-height="doesTableContainDraggables"
-    :table-height="tableHeight"
-  >
-    <TableTitle v-if="titleText">
-      {{ titleText }}
-    </TableTitle>
-    <TableScroll
-      ref="tableRef"
-      :is-position-absolute="doesTableContainDraggables"
-    >
-      <TableWrapper
-        class="main-table-wrapper"
-        :full-width="fullWidth"
-        :is-overflow-hidden="isOverflowHidden"
-      >
-        <SpinnerWrapper v-if="isLoading">
-          <Spinner />
-        </SpinnerWrapper>
-        <TableContainer
-          v-else
-          :cell-paddings="cellPaddings"
-          :table-cursor="tableCursor"
-          @mouseleave="hasAimHover ? removeHoverClass() : null"
-          @mouseover="hasAimHover ? setHovers($event) : null"
-        >
-          <slot></slot>
-        </TableContainer>
-      </TableWrapper>
-    </TableScroll>
-  </PageContainer>
-</template>
-
-<script>
-  // ToDo: add this to storybook
-  // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-  import styled from 'vue3-styled-components'
-  import Spinner from '../../spinner'
-  import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
-  import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
-  import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
-  import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
-
-  const pageContainerProps = {
-    tableHeight: String,
-    shouldSetCustomHeight: Boolean,
-  }
-  const PageContainer = styled('div', pageContainerProps)`
-    position: relative;
-    height: ${(props) =>
-      props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
-  `
-
-  const TableTitle = styled.div`
-    margin-bottom: 16px;
-    font-weight: bold;
-    font-size: 14px;
-    text-transform: uppercase;
-  `
-
-  const tableScrollProps = {
-    isPositionAbsolute: Boolean,
-  }
-
-  const TableScroll = styled('div', tableScrollProps)`
-    max-width: 100%;
-    height: auto;
-    ${(props) =>
-      props.isPositionAbsolute &&
-      `
-    position: absolute;
-    left: -20px;
-  `}
-  `
-
-  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
-  const TableWrapper = styled('div', wrapperAttrs)`
-    width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
-    max-width: 100%;
-    ${(props) =>
-      props.isOverflowHidden ? 'overflow-x: auto; overflow-y: hidden;' : ''}
-
-    ::-webkit-scrollbar {
-      height: 10px; //height of the whole scrollbar area
-    }
-
-    ::-webkit-scrollbar-track {
-      background: ${(props) => props.theme.semanticColors.grey[50]};
-      border-radius: 4px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-bottom: 10px solid
-        ${(props) => props.theme.semanticColors.grey[500]}; // width of the actual scrollbar
-      border-radius: 4px;
-    }
-  `
-
-  const SpinnerWrapper = styled.div`
-    height: 150px;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-  `
-
-  const containerAttrs = {
-    cellPaddings: String,
-    tableCursor: String,
-  }
-
-  const TableContainer = styled('table', containerAttrs)`
-    width: 100%;
-    border-collapse: collapse;
-    border: none;
-    font-size: 13px;
-
-    thead {
-      font-weight: bold;
-
-      tr {
-        border-bottom: none !important;
-      }
-    }
-
-    .collective-row-toggle {
-      cursor: pointer !important;
-    }
-
-    tbody {
-      tr {
-        &:hover,
-        td.hovered-column {
-          background-color: ${(props) => props.theme.colors.white};
-          cursor: ${(props) =>
-            props.tableCursor ? props.tableCursor : 'auto'};
-
-          .select-button,
-          .arrow-container,
-          .input-placeholder,
-          .table-dropdown-item {
-            background-color: ${(props) => props.theme.colors.grey5};
-          }
-
-          input {
-            background-color: ${(props) => props.theme.colors.grey5};
-          }
-        }
-
-        td {
-          height: 40px;
-        }
-      }
-    }
-
-    th {
-      padding: 11px 15px;
-      background-color: ${(props) => props.theme.semanticColors.grey[100]};
-      border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.teal[100]};
-      cursor: auto;
-      height: 40px;
-      font-weight: 500;
-
-      .ordering {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-gap: 6px;
-      }
-    }
-
-    td {
-      padding: ${(props) =>
-        props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
-      border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.grey[200]};
-
-      &.empty {
-        height: 100px;
-        text-align: center;
-        cursor: default;
-        background-color: ${(props) => props.theme.colors.white} !important;
-      }
-
-      &.no-border {
-        border-bottom: none;
-      }
-
-      .collective-container {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        align-items: center;
-        grid-gap: 10px;
-        cursor: ${(props) =>
-          props.tableCursor ? props.tableCursor : 'pointer'};
-      }
-
-      .collective-box {
-        width: 22px;
-        height: 22px;
-        border-radius: 4px;
-        color: #fff;
-        background-color: ${(props) => props.theme.colors.grey3};
-        font-size: 13px;
-        font-weight: normal;
-        display: grid;
-        align-items: center;
-        justify-items: center;
-
-        &.open {
-          background-color: ${(props) => props.theme.colors.green};
-        }
-      }
-    }
-
-    td,
-    th {
-      white-space: nowrap;
-      text-align: left;
-
-      &.align {
-        &-left {
-          text-align: left;
-        }
-
-        &-center {
-          text-align: center;
-        }
-
-        &-right {
-          text-align: right;
-        }
-      }
-
-      &.checkbox {
-        padding: 7px 15px !important;
-        width: 40px;
-      }
-
-      &.checkbox-header {
-        min-width: 40px;
-      }
-    }
-
-    tr {
-      &.disabled {
-        cursor: not-allowed !important;
-      }
-
-      .arrow-dropdown {
-        visibility: hidden;
-      }
-
-      &.footer,
-      &.total-row {
-        td {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-
-        td:first-of-type {
-          padding-left: 15px !important;
-        }
-
-        .text {
-          cursor: auto !important;
-        }
-      }
-
-      .text {
-        padding: 10px 15px 10px 15px;
-        color: ${(props) => props.theme.semanticColors.teal[800]};
-        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
-      }
-
-      .bold {
-        font-weight: bold;
-      }
-
-      .icons-container {
-        padding-right: 2px; // so that the icons are not cut off when hovering
-        width: 1%; // necessary so it doesn't take up too much white space
-        display: table-cell;
-        flex-wrap: nowrap;
-        background-color: ${(props) => props.theme.colors.white};
-        vertical-align: middle;
-      }
-
-      .arrow-container {
-        display: table-cell;
-        vertical-align: middle;
-        cursor: ${(props) =>
-          props.tableCursor ? props.tableCursor : 'pointer'};
-      }
-
-      &.container-row td {
-        padding: 0;
-      }
-
-      &.no-border {
-        td,
-        .arrow-container {
-          border-bottom: none;
-        }
-      }
-
-      &:hover {
-        input:disabled {
-          background-color: ${(props) =>
-            props.theme.colors.grey5 + '!important'};
-        }
-
-        .drag-icon {
-          visibility: visible;
-        }
-
-        .drag-wrapper {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-
-        .arrow-dropdown {
-          visibility: visible;
-        }
-      }
-
-      .drag-container {
-        display: table-cell;
-        width: 20px;
-        min-width: 20px;
-        height: 40px;
-      }
-
-      .drag-wrapper {
-        width: 16px;
-        height: 36px;
-        display: grid;
-        align-items: center;
-        justify-items: center;
-        border-radius: 4px;
-      }
-
-      .drag-icon {
-        visibility: hidden;
-        width: 10px;
-        height: 16px;
-        cursor: grab;
-        background-position: center;
-        background-image: ${() => `url(${dragIconSvg})`};
-
-        &:active {
-          cursor: grabbing;
-        }
-      }
-
-      .subposition-icon {
-        width: 14px;
-        height: 11px;
-        background: no-repeat;
-        margin-left: 10px;
-        background-image: ${() => `url(${subpositionIconSvg})`};
-      }
-
-      .arrow-down {
-        width: 14px;
-        height: 11px;
-        background: no-repeat;
-        background-position: center;
-        background-image: ${() => `url(${arrowDownSvg})`};
-      }
-
-      .arrow-up {
-        width: 14px;
-        height: 11px;
-        background: no-repeat;
-        background-position: center;
-        background-image: ${() => `url(${arrowUpRedSvg})`};
-      }
-    }
-
-    input {
-      font-size: 13px;
-      padding: 5px 10px;
-      background: #fff;
-      height: unset;
-
-      &:focus {
-        background: ${(props) => props.theme.colors.grey5};
-      }
-    }
-
-    .open-container {
-      border: 1px solid ${(props) => props.theme.colors.grey4};
-      border-radius: 4px;
-      margin-bottom: 5px;
-      cursor: auto;
-    }
-  `
-
-  export default {
-    name: 'MainTable',
-    components: {
-      TableScroll,
-      TableWrapper,
-      SpinnerWrapper,
-      Spinner,
-      TableContainer,
-      PageContainer,
-      TableTitle,
-    },
-    props: {
-      fullWidth: {
-        required: false,
-        default: true,
-      },
-      cellPaddings: {
-        required: false,
-        default: '',
-      },
-      isLoading: {
-        required: false,
-        default: false,
-      },
-      isOverflowHidden: {
-        required: false,
-        default: true,
-      },
-      titleText: {
-        required: false,
-        default: null,
-      },
-      hasAimHover: {
-        required: false,
-        default: false,
-      },
-      tableCursor: {
-        required: false,
-      },
-    },
-    data() {
-      return {
-        tableHeight: 'auto',
-        doesTableContainDraggables: false,
-      }
-    },
-    mounted() {
-      this.observeTableHeight()
-    },
-    beforeUnmount() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect()
-      }
-    },
-    methods: {
-      findParentElementByTagName(element, tagName) {
-        let currentParentElement = element.parentElement
-        while (
-          currentParentElement &&
-          currentParentElement.tagName !== tagName
-        ) {
-          currentParentElement = currentParentElement.parentElement
-        }
-
-        return currentParentElement && currentParentElement.tagName === tagName
-          ? currentParentElement
-          : null
-      },
-      removeHoverClass() {
-        const hoveredItems = document.querySelectorAll('.hovered-column')
-        hoveredItems.forEach((el) => {
-          el.classList.remove('hovered-column')
-        })
-      },
-      setHovers(event) {
-        this.removeHoverClass()
-        if (
-          event.target.tagName !== 'TABLE' &&
-          event.target.tagName !== 'TH' &&
-          event.target.tagName !== 'TR'
-        ) {
-          let hoveredCell = event.target
-
-          if (hoveredCell.tagName !== 'TD') {
-            // Looking for hovered TD element
-            hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
-          }
-
-          if (hoveredCell) {
-            const rowChildren = Array.from(hoveredCell.parentElement.children)
-            const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
-            const currentTable = this.findParentElementByTagName(
-              hoveredCell,
-              'TABLE'
-            )
-            if (currentTable) {
-              const rowList = Array.from(currentTable.querySelectorAll('tr'))
-              rowList.forEach((el) => {
-                const cells = Array.from(el.children)
-                if (cells[hoveredCellIndex]) {
-                  cells[hoveredCellIndex].classList.add('hovered-column')
-                }
-              })
-            }
-          }
-        }
-      },
-      observeTableHeight() {
-        if (!this.$refs.tableRef) return
-
-        const tableElement = this.$refs.tableRef.$el
-
-        this.resizeObserver = new ResizeObserver(() => {
-          const newTableHeight = this.titleText
-            ? tableElement.offsetHeight + 33
-            : tableElement.offsetHeight
-          this.tableHeight = `${newTableHeight}px`
-          this.doesTableContainDraggables = Boolean(
-            tableElement.querySelector('.drag-container')
-          )
-        })
-
-        this.resizeObserver.observe(tableElement)
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer
+    :should-set-custom-height="doesTableContainDraggables"
+    :table-height="tableHeight"
+  >
+    <TableTitle v-if="titleText">
+      {{ titleText }}
+    </TableTitle>
+    <TableScroll
+      ref="tableRef"
+      :is-position-absolute="doesTableContainDraggables"
+    >
+      <TableWrapper
+        class="main-table-wrapper"
+        :full-width="fullWidth"
+        :is-overflow-hidden="isOverflowHidden"
+      >
+        <SpinnerWrapper v-if="isLoading">
+          <Spinner />
+        </SpinnerWrapper>
+        <TableContainer
+          v-else
+          :cell-paddings="cellPaddings"
+          :table-cursor="tableCursor"
+          @mouseleave="hasAimHover ? removeHoverClass() : null"
+          @mouseover="hasAimHover ? setHovers($event) : null"
+        >
+          <slot></slot>
+        </TableContainer>
+      </TableWrapper>
+    </TableScroll>
+  </PageContainer>
+</template>
+
+<script>
+  // ToDo: add this to storybook
+  // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
+  import styled from 'vue3-styled-components'
+  import Spinner from '../../spinner'
+  import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
+  import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
+  import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
+  import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
+
+  const pageContainerProps = {
+    tableHeight: String,
+    shouldSetCustomHeight: Boolean,
+  }
+  const PageContainer = styled('div', pageContainerProps)`
+    position: relative;
+    height: ${(props) =>
+      props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
+  `
+
+  const TableTitle = styled.div`
+    margin-bottom: 16px;
+    font-weight: bold;
+    font-size: 14px;
+    text-transform: uppercase;
+  `
+
+  const tableScrollProps = {
+    isPositionAbsolute: Boolean,
+  }
+
+  const TableScroll = styled('div', tableScrollProps)`
+    max-width: 100%;
+    height: auto;
+    ${(props) =>
+      props.isPositionAbsolute &&
+      `
+    position: absolute;
+    left: -20px;
+  `}
+  `
+
+  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
+  const TableWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
+    max-width: 100%;
+    ${(props) =>
+      props.isOverflowHidden ? 'overflow-x: auto; overflow-y: hidden;' : ''}
+
+    ::-webkit-scrollbar {
+      height: 10px; //height of the whole scrollbar area
+    }
+
+    ::-webkit-scrollbar-track {
+      background: ${(props) => props.theme.semanticColors.grey[50]};
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-bottom: 10px solid
+        ${(props) => props.theme.semanticColors.grey[500]}; // width of the actual scrollbar
+      border-radius: 4px;
+    }
+  `
+
+  const SpinnerWrapper = styled.div`
+    height: 150px;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+  `
+
+  const containerAttrs = {
+    cellPaddings: String,
+    tableCursor: String,
+  }
+
+  const TableContainer = styled('table', containerAttrs)`
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+    font-size: 13px;
+
+    thead {
+      font-weight: bold;
+
+      tr {
+        border-bottom: none !important;
+      }
+    }
+
+    .collective-row-toggle {
+      cursor: pointer !important;
+    }
+
+    tbody {
+      tr {
+        &:hover,
+        td.hovered-column {
+          background-color: ${(props) => props.theme.colors.white};
+          cursor: ${(props) =>
+            props.tableCursor ? props.tableCursor : 'auto'};
+
+          .select-button,
+          .arrow-container,
+          .input-placeholder,
+          .table-dropdown-item {
+            background-color: ${(props) => props.theme.colors.grey5};
+          }
+
+          input {
+            background-color: ${(props) => props.theme.colors.grey5};
+          }
+        }
+
+        td {
+          height: 40px;
+        }
+      }
+    }
+
+    th {
+      padding: 11px 15px;
+      background-color: ${(props) => props.theme.semanticColors.grey[100]};
+      border-bottom: 1px solid
+        ${(props) => props.theme.semanticColors.teal[100]};
+      cursor: auto;
+      height: 40px;
+      font-weight: 500;
+
+      .ordering {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-gap: 6px;
+      }
+    }
+
+    td {
+      padding: ${(props) =>
+        props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
+      border-bottom: 1px solid
+        ${(props) => props.theme.semanticColors.grey[200]};
+
+      &.empty {
+        height: 100px;
+        text-align: center;
+        cursor: default;
+        background-color: ${(props) => props.theme.colors.white} !important;
+      }
+
+      &.no-border {
+        border-bottom: none;
+      }
+
+      .collective-container {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+        grid-gap: 10px;
+        cursor: ${(props) =>
+          props.tableCursor ? props.tableCursor : 'pointer'};
+      }
+
+      .collective-box {
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        color: #fff;
+        background-color: ${(props) => props.theme.colors.grey3};
+        font-size: 13px;
+        font-weight: normal;
+        display: grid;
+        align-items: center;
+        justify-items: center;
+
+        &.open {
+          background-color: ${(props) => props.theme.colors.green};
+        }
+      }
+    }
+
+    td,
+    th {
+      white-space: nowrap;
+      text-align: left;
+
+      &.align {
+        &-left {
+          text-align: left;
+        }
+
+        &-center {
+          text-align: center;
+        }
+
+        &-right {
+          text-align: right;
+        }
+      }
+
+      &.checkbox {
+        padding: 7px 15px !important;
+        width: 40px;
+      }
+
+      &.checkbox-header {
+        min-width: 40px;
+      }
+    }
+
+    tr {
+      &.disabled {
+        cursor: not-allowed !important;
+      }
+
+      .arrow-dropdown {
+        visibility: hidden;
+      }
+
+      &.footer {
+        td {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
+
+        td:first-of-type {
+          padding-left: 15px !important;
+        }
+
+        .text {
+          cursor: auto !important;
+        }
+      }
+
+      .text {
+        padding: 10px 15px 10px 15px;
+        color: ${(props) => props.theme.semanticColors.teal[800]};
+        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
+      }
+
+      .bold {
+        font-weight: bold;
+      }
+
+      .icons-container {
+        padding-right: 2px; // so that the icons are not cut off when hovering
+        width: 1%; // necessary so it doesn't take up too much white space
+        display: table-cell;
+        flex-wrap: nowrap;
+        background-color: ${(props) => props.theme.colors.white};
+        vertical-align: middle;
+      }
+
+      .arrow-container {
+        display: table-cell;
+        vertical-align: middle;
+        cursor: ${(props) =>
+          props.tableCursor ? props.tableCursor : 'pointer'};
+      }
+
+      &.container-row td {
+        padding: 0;
+      }
+
+      &.no-border {
+        td,
+        .arrow-container {
+          border-bottom: none;
+        }
+      }
+
+      &:hover {
+        input:disabled {
+          background-color: ${(props) =>
+            props.theme.colors.grey5 + '!important'};
+        }
+
+        .drag-icon {
+          visibility: visible;
+        }
+
+        .drag-wrapper {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
+
+        .arrow-dropdown {
+          visibility: visible;
+        }
+      }
+
+      .drag-container {
+        display: table-cell;
+        width: 20px;
+        min-width: 20px;
+        height: 40px;
+      }
+
+      .drag-wrapper {
+        width: 16px;
+        height: 36px;
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        border-radius: 4px;
+      }
+
+      .drag-icon {
+        visibility: hidden;
+        width: 10px;
+        height: 16px;
+        cursor: grab;
+        background-position: center;
+        background-image: ${() => `url(${dragIconSvg})`};
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+
+      .subposition-icon {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        margin-left: 10px;
+        background-image: ${() => `url(${subpositionIconSvg})`};
+      }
+
+      .arrow-down {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        background-position: center;
+        background-image: ${() => `url(${arrowDownSvg})`};
+      }
+
+      .arrow-up {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        background-position: center;
+        background-image: ${() => `url(${arrowUpRedSvg})`};
+      }
+    }
+
+    input {
+      font-size: 13px;
+      padding: 5px 10px;
+      background: #fff;
+      height: unset;
+
+      &:focus {
+        background: ${(props) => props.theme.colors.grey5};
+      }
+    }
+
+    .open-container {
+      border: 1px solid ${(props) => props.theme.colors.grey4};
+      border-radius: 4px;
+      margin-bottom: 5px;
+      cursor: auto;
+    }
+  `
+
+  export default {
+    name: 'MainTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      SpinnerWrapper,
+      Spinner,
+      TableContainer,
+      PageContainer,
+      TableTitle,
+    },
+    props: {
+      fullWidth: {
+        required: false,
+        default: true,
+      },
+      cellPaddings: {
+        required: false,
+        default: '',
+      },
+      isLoading: {
+        required: false,
+        default: false,
+      },
+      isOverflowHidden: {
+        required: false,
+        default: true,
+      },
+      titleText: {
+        required: false,
+        default: null,
+      },
+      hasAimHover: {
+        required: false,
+        default: false,
+      },
+      tableCursor: {
+        required: false,
+      },
+    },
+    data() {
+      return {
+        tableHeight: 'auto',
+        doesTableContainDraggables: false,
+      }
+    },
+    mounted() {
+      this.observeTableHeight()
+    },
+    beforeUnmount() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+      }
+    },
+    methods: {
+      findParentElementByTagName(element, tagName) {
+        let currentParentElement = element.parentElement
+        while (
+          currentParentElement &&
+          currentParentElement.tagName !== tagName
+        ) {
+          currentParentElement = currentParentElement.parentElement
+        }
+
+        return currentParentElement && currentParentElement.tagName === tagName
+          ? currentParentElement
+          : null
+      },
+      removeHoverClass() {
+        const hoveredItems = document.querySelectorAll('.hovered-column')
+        hoveredItems.forEach((el) => {
+          el.classList.remove('hovered-column')
+        })
+      },
+      setHovers(event) {
+        this.removeHoverClass()
+        if (
+          event.target.tagName !== 'TABLE' &&
+          event.target.tagName !== 'TH' &&
+          event.target.tagName !== 'TR'
+        ) {
+          let hoveredCell = event.target
+
+          if (hoveredCell.tagName !== 'TD') {
+            // Looking for hovered TD element
+            hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
+          }
+
+          if (hoveredCell) {
+            const rowChildren = Array.from(hoveredCell.parentElement.children)
+            const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
+            const currentTable = this.findParentElementByTagName(
+              hoveredCell,
+              'TABLE'
+            )
+            if (currentTable) {
+              const rowList = Array.from(currentTable.querySelectorAll('tr'))
+              rowList.forEach((el) => {
+                const cells = Array.from(el.children)
+                if (cells[hoveredCellIndex]) {
+                  cells[hoveredCellIndex].classList.add('hovered-column')
+                }
+              })
+            }
+          }
+        }
+      },
+      observeTableHeight() {
+        if (!this.$refs.tableRef) return
+
+        const tableElement = this.$refs.tableRef.$el
+
+        this.resizeObserver = new ResizeObserver(() => {
+          const newTableHeight = this.titleText
+            ? tableElement.offsetHeight + 33
+            : tableElement.offsetHeight
+          this.tableHeight = `${newTableHeight}px`
+          this.doesTableContainDraggables = Boolean(
+            tableElement.querySelector('.drag-container')
+          )
+        })
+
+        this.resizeObserver.observe(tableElement)
+      },
+    },
+  }
+</script>