quasar-ui-sellmate-ui-kit 3.14.2 → 3.14.5

package/src/components/STable.vue

@@ -1,597 +1,597 @@
-<template>
-  <q-table
-    flat
-    bordered
-    hide-pagination
-    hide-selected-banner
-    v-bind="$attrs"
-    :columns="columns"
-    :rows="rows"
-    v-model:pagination="tablePagination"
-    :no-data-label="noDataLabel"
-    class="s-table"
-    :class="{
-      's-select-table': $attrs.selection,
-      'resizable-table': resizable,
-      'sticky-resizable-table': stickyResizable,
-      'sticky-header': stickyHeader,
-      'before-search': !rows.length,
-      'horizontally-scrolled': isTableScrolled,
-      's-table__hover': !noHover,
-      [`sticky-${stickyColumn.direction}-table`]: stickyColumn,
-    }"
-    @selection="updateSelected"
-    ref="sTableRef"
-    @request="
-      props => {
-        $emit('request', props);
-      }
-    "
-  >
-    <template #no-data="props">
-      <slot name="no-data" v-bind="props">
-        <div class="full-width text-center">
-          {{ noDataLabel }}
-        </div>
-      </slot>
-    </template>
-
-    <template #loading>
-      <slot name="loading">
-        <q-inner-loading showing color="positive" size="72px" />
-      </slot>
-    </template>
-
-    <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
-      <q-td
-        v-if="navigator"
-        :class="{
-          focused: isFocused(props),
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [typeof props.col.classes === 'function'
-            ? props.col.classes(props.row)
-            : props.col.classes]: true,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-              ? props.row.class
-              : '']: true,
-        }"
-        :style="props.col.style"
-        @click.stop="focusCell(props)"
-      >
-        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
-          <s-input
-            ref="inputRef"
-            v-model="inputData"
-            v-if="props.col.editable && editing && isFocused(props)"
-            @blur="closeInput"
-            v-bind="inputOptions"
-          />
-          <span v-else class="s-table-edited-td"
-            >{{ props.value }}
-            <q-icon
-              size="16px"
-              :name="editIcon"
-              color="Blue_B_Lighten-1"
-              class="q-ml-xs"
-              v-if="props.col.editable"
-            />
-          </span>
-        </slot>
-      </q-td>
-      <q-td
-        v-else
-        v-bind="props"
-        :class="{
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [typeof props.col.classes === 'function'
-            ? props.col.classes(props.row)
-            : props.col.classes]: true,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-              ? props.row.class
-              : '']: true,
-        }"
-        :style="props.col.style"
-      >
-        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
-          {{ props.value }}
-        </slot>
-      </q-td>
-    </template>
-
-    <template v-for="(_, slotName, index) in $slots" :key="index" #[slotName]="data">
-      <slot :name="slotName" :key="`slot-${index}`" v-bind="data"> </slot>
-    </template>
-  </q-table>
-  <s-pagination
-    v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
-    v-model="paginationModel.page"
-    :lastPage="pagesNumber"
-    class="bg-Grey_Lighten-6 s-border-radius-sm s-border-top-none s-border-Grey_Lighten-3"
-    @update:modelValue="updatePagination"
-  />
-</template>
-
-<script>
-  import { QTable, QInnerLoading, QTd, QIcon, scroll } from 'quasar';
-  import { defineComponent, onMounted, ref, computed, watch, nextTick } from 'vue';
-  import { detectStickyWidth, useResizable } from '../composables/table/use-resizable';
-  import { useNavigator } from '../composables/table/use-navigator';
-
-  export default defineComponent({
-    name: 'STable',
-    emits: ['update:page', 'update:focused', 'field-updated', 'request'],
-    components: {
-      QTable,
-      QInnerLoading,
-      QTd,
-      QIcon,
-    },
-    props: {
-      pagination: {
-        type: Object,
-        default: () => ({
-          page: 1,
-          rowsPerPage: 50,
-        }),
-      },
-      hideBottom: {
-        type: Boolean,
-        default: false,
-      },
-      showBottom: {
-        type: Boolean,
-        default: false,
-      },
-      noDataLabel: {
-        type: String,
-        default: '데이터 조회가 필요합니다',
-      },
-      columns: {
-        type: Array,
-        default: () => [],
-      },
-      rows: {
-        type: Array,
-        default: () => [],
-      },
-      resizable: {
-        type: Boolean,
-        default: false,
-      },
-      stickyHeader: {
-        type: Boolean,
-        default: false,
-      },
-      stickyResizable: {
-        type: [Array, Number],
-        required: false,
-      },
-      useSticky: {
-        type: Boolean,
-        default: false,
-      },
-      stickyColumn: {
-        type: Object,
-        default: () => ({
-          count: 1, // sticky하고자하는 column 개수
-          direction: 'left', // 'left' | 'right'
-        }),
-      },
-      navigator: {
-        type: Boolean,
-        default: false,
-      },
-      inputOptions: {
-        type: Object,
-        default: () => ({ type: 'number' }),
-      },
-      focused: {
-        type: Object,
-      },
-      noHover: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props, { emit, attrs }) {
-      const tablePagination = ref(props.pagination);
-      const paginationModel = ref(props.pagination);
-      watch(
-        () => props.pagination,
-        newValue => {
-          paginationModel.value = { ...newValue };
-          tablePagination.value = { ...newValue };
-          if (props.pagination.lastPage) tablePagination.value.page = 1;
-        },
-        { deep: true },
-      );
-
-      function updatePagination(val) {
-        emit('update:page', val);
-        if (!props.pagination.lastPage) {
-          tablePagination.value.page = val;
-        }
-      }
-
-      const sTableRef = ref(null);
-      const { focusCell, isFocused, editing, inputRef, inputData, closeInput, editIcon } =
-        useNavigator(props, attrs, emit);
-      function updateSelected(details) {
-        if (details.added && details.evt && details.evt.shiftKey) {
-          const idx = props.rows.findIndex(r => r === details.rows[0]);
-          const lastIdx = attrs.selected
-            .map(x => props.rows.findIndex(y => y === x))
-            .filter(v => v < idx)
-            .reduce((a, b) => (Math.abs(b - idx) < Math.abs(a - idx) ? b : a));
-          for (let i = lastIdx + 1; i < idx; i++) {
-            attrs.selected.push(props.rows[i]);
-          }
-        }
-      }
-
-      // 스크롤 그림자 로직
-      const isTableScrolled = ref(false);
-      function detectHorizontalScroll(tableScrollArea) {
-        const { getScrollTarget, getHorizontalScrollPosition } = scroll;
-        const scrollTarget = getScrollTarget(tableScrollArea);
-        const isStickyLeft = props.stickyColumn.direction === 'left';
-
-        tableScrollArea.addEventListener('scroll', () => {
-          const scrollPosition = getHorizontalScrollPosition(scrollTarget);
-
-          if (isStickyLeft) {
-            isTableScrolled.value = scrollPosition > 10; // 오른쪽 고정일 때에 스크롤 위치 계산하는 로직 수정 필요
-          } else {
-            isTableScrolled.value =
-              tableScrollArea.scrollWidth - tableScrollArea.clientWidth - scrollPosition > 10;
-          }
-        });
-      }
-
-      function detectWindowResize(tableElement, tableScrollArea) {
-        window.addEventListener('resize', () => {
-          const table = tableElement.getElementsByClassName('q-table')[0];
-
-          if (table.offsetWidth > tableScrollArea.offsetWidth) {
-            isTableScrolled.value = true;
-          } else {
-            isTableScrolled.value = false;
-          }
-        });
-      }
-
-      function handleColumns() {
-        const { addResizable, addStickyResizable, addSticky } = useResizable();
-        const tableElement = () => sTableRef.value.$el;
-        const isStickyLeft = props.stickyColumn.direction === 'left';
-        const { count, direction: stickyDirection } = props.stickyColumn;
-
-        if (props.useSticky) {
-          addSticky(tableElement(), isStickyLeft, count);
-        }
-        if (props.resizable) {
-          const stickyCount = props.useSticky && !isStickyLeft ? count : 0;
-          addResizable(tableElement(), isStickyLeft, stickyCount, props.useSticky);
-        }
-        if (props.stickyResizable) {
-          addStickyResizable(tableElement(), props.stickyResizable);
-        }
-
-        const tableScrollArea = tableElement().getElementsByClassName('q-table__middle')[0];
-        const isScrollbarAppear = tableScrollArea.scrollWidth > tableScrollArea.clientWidth;
-
-        if (!isStickyLeft && isScrollbarAppear) {
-          isTableScrolled.value = true;
-        }
-
-        detectHorizontalScroll(tableScrollArea);
-        detectWindowResize(tableElement(), tableScrollArea);
-      }
-
-      onMounted(() => {
-        handleColumns();
-      });
-
-      watch(
-        () => props.columns,
-        () => {
-          nextTick(() => {
-            handleColumns();
-          });
-        },
-      );
-
-      return {
-        sTableRef,
-        focusCell,
-        isFocused,
-        editing,
-        inputRef,
-        inputData,
-        closeInput,
-        editIcon,
-        updateSelected,
-        isTableScrolled,
-        tablePagination,
-        paginationModel,
-        pagesNumber: computed(
-          () =>
-            props.pagination.lastPage ||
-            Math.ceil(props.rows.length / paginationModel.value.rowsPerPage),
-        ),
-        updatePagination,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-table {
-    border-radius: 8px !important;
-    border: 1px solid $Grey_Lighten-3;
-    &__hover {
-      .q-table__middle {
-        .q-table {
-          tr {
-            &:hover {
-              td {
-                background-color: $Grey_Lighten-6 !important;
-              }
-            }
-          }
-        }
-      }
-    }
-    .q-table__middle {
-      .q-table {
-        overflow: auto;
-        tr {
-          th,
-          td {
-            &.sticky-cell {
-              overflow: visible;
-              &::after {
-                content: '';
-                background: none;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                width: 20px;
-                z-index: 100;
-                transition: opacity 0.4s;
-                opacity: 0;
-                pointer-events: none;
-              }
-            }
-          }
-        }
-        thead {
-          background: $th-bg;
-          min-height: 0;
-          tr {
-            height: 36px;
-            color: $Grey_Darken-5;
-            th {
-              padding: $table-th-padding;
-              font-size: $default-font;
-              font-weight: $font-weight-md;
-              word-break: keep-all;
-              white-space: nowrap;
-              &.sticky-cell {
-                position: sticky;
-                z-index: 101;
-                background: $th-bg;
-              }
-
-              .sort-icon {
-                color: $Grey_Lighten-1;
-                font-size: 16px;
-                opacity: 1;
-                &.desc-sort {
-                  transform: rotate(180deg);
-                }
-                transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-              }
-
-              // NOTE: 해당 sortable은 퀘이사에서 기본적으로 사용하는 기능
-              // 차후 slot 방식으로 사용할경우 해당 방식으로 사용 X
-              // slot 방식으로 사용할 경우 .sort-icon으로만 사용 예정
-              &.sortable {
-                > .q-table__sort-icon {
-                  //display: none;
-                  color: $Grey_Lighten-1;
-                  font-size: 16px;
-                  opacity: 1;
-                }
-              }
-            }
-          }
-        }
-        tbody {
-          tr {
-            min-height: 0px;
-            color: $Grey_Darken-5;
-            td {
-              padding: $table-th-padding;
-              font-size: $default-font;
-              word-break: keep-all;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-
-              &:before {
-                background: none;
-              }
-              &.sticky-cell {
-                position: sticky;
-                z-index: 1;
-                background-color: white;
-              }
-              .s-table-edited-td {
-                display: inline-flex;
-                align-items: center;
-              }
-            }
-            .focused {
-              border: 1px solid $positive !important;
-            }
-            &:last-child > td {
-              border-bottom-width: 1px;
-            }
-          }
-        }
-      }
-    }
-    .q-table__bottom {
-      min-height: 0;
-      padding: 0;
-      border: none;
-      &--nodata {
-        height: 240px;
-        color: $Grey_Default;
-        font-size: $default-font;
-        line-height: $default-line-height;
-        display: block;
-        padding-top: 80px;
-      }
-    }
-  }
-  .horizontally-scrolled {
-    .sticky-cell::after {
-      opacity: 1 !important;
-    }
-  }
-  .s-select-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th {
-              &:first-of-type {
-                padding: 0 8px 0 24px;
-                line-height: 100%;
-                > .q-checkbox:not(.s-checkbox) {
-                  @extend %checkbox;
-                }
-              }
-            }
-          }
-        }
-        tbody {
-          tr {
-            td {
-              &:first-of-type {
-                padding: 0 8px 0 24px;
-                line-height: 100%;
-                > .q-checkbox:not(.s-checkbox) {
-                  @extend %checkbox;
-                }
-              }
-              &:after {
-                background: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th:last-of-type {
-              .resiable-right {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .s-select-table.resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th:first-of-type {
-              > .resiable-right {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .sticky-resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          th:first-of-type {
-            > .resiable-left {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-  .sticky-header {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th {
-              background: $th-bg;
-              position: sticky;
-              top: 0;
-              z-index: 100;
-            }
-          }
-        }
-      }
-    }
-  }
-  .before-search {
-    .q-table__middle {
-      .q-table {
-        thead {
-          opacity: 0.4;
-        }
-      }
-    }
-  }
-  .sticky-left-table {
-    .sticky-cell {
-      &::after {
-        box-shadow: inset 12px 0 20px -25px;
-        right: -20px;
-        left: auto;
-      }
-    }
-  }
-  .sticky-right-table {
-    .sticky-cell {
-      &:not(.sticky-cell__right--first)::after {
-        display: none;
-      }
-      &::after {
-        box-shadow: inset -12px 0 20px -25px;
-        right: auto;
-        left: -20px;
-      }
-    }
-  }
-</style>
+<template>
+  <q-table
+    flat
+    bordered
+    hide-pagination
+    hide-selected-banner
+    v-bind="$attrs"
+    :columns="columns"
+    :rows="rows"
+    v-model:pagination="tablePagination"
+    :no-data-label="noDataLabel"
+    class="s-table"
+    :class="{
+      's-select-table': $attrs.selection,
+      'resizable-table': resizable,
+      'sticky-resizable-table': stickyResizable,
+      'sticky-header': stickyHeader,
+      'before-search': !rows.length,
+      'horizontally-scrolled': isTableScrolled,
+      's-table__hover': !noHover,
+      [`sticky-${stickyColumn.direction}-table`]: stickyColumn,
+    }"
+    @selection="updateSelected"
+    ref="sTableRef"
+    @request="
+      props => {
+        $emit('request', props);
+      }
+    "
+  >
+    <template #no-data="props">
+      <slot name="no-data" v-bind="props">
+        <div class="full-width text-center">
+          {{ noDataLabel }}
+        </div>
+      </slot>
+    </template>
+
+    <template #loading>
+      <slot name="loading">
+        <q-inner-loading showing color="positive" size="72px" />
+      </slot>
+    </template>
+
+    <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
+      <q-td
+        v-if="navigator"
+        :class="{
+          focused: isFocused(props),
+          'text-center': props.col.align === 'center',
+          'text-right': props.col.align === 'right',
+          [typeof props.col.classes === 'function'
+            ? props.col.classes(props.row)
+            : props.col.classes]: true,
+          [typeof props.row.class === 'function'
+            ? props.row.class(props.row)
+            : typeof props.row.class === 'string'
+              ? props.row.class
+              : '']: true,
+        }"
+        :style="props.col.style"
+        @click.stop="focusCell(props)"
+      >
+        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
+          <s-input
+            ref="inputRef"
+            v-model="inputData"
+            v-if="props.col.editable && editing && isFocused(props)"
+            @blur="closeInput"
+            v-bind="inputOptions"
+          />
+          <span v-else class="s-table-edited-td"
+            >{{ props.value }}
+            <q-icon
+              size="16px"
+              :name="editIcon"
+              color="Blue_B_Lighten-1"
+              class="q-ml-xs"
+              v-if="props.col.editable"
+            />
+          </span>
+        </slot>
+      </q-td>
+      <q-td
+        v-else
+        v-bind="props"
+        :class="{
+          'text-center': props.col.align === 'center',
+          'text-right': props.col.align === 'right',
+          [typeof props.col.classes === 'function'
+            ? props.col.classes(props.row)
+            : props.col.classes]: true,
+          [typeof props.row.class === 'function'
+            ? props.row.class(props.row)
+            : typeof props.row.class === 'string'
+              ? props.row.class
+              : '']: true,
+        }"
+        :style="props.col.style"
+      >
+        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
+          {{ props.value }}
+        </slot>
+      </q-td>
+    </template>
+
+    <template v-for="(_, slotName, index) in $slots" :key="index" #[slotName]="data">
+      <slot :name="slotName" :key="`slot-${index}`" v-bind="data"> </slot>
+    </template>
+  </q-table>
+  <s-pagination
+    v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
+    v-model="paginationModel.page"
+    :lastPage="pagesNumber"
+    class="bg-Grey_Lighten-6 s-border-radius-sm s-border-top-none s-border-Grey_Lighten-3"
+    @update:modelValue="updatePagination"
+  />
+</template>
+
+<script>
+  import { QTable, QInnerLoading, QTd, QIcon, scroll } from 'quasar';
+  import { defineComponent, onMounted, ref, computed, watch, nextTick } from 'vue';
+  import { detectStickyWidth, useResizable } from '../composables/table/use-resizable';
+  import { useNavigator } from '../composables/table/use-navigator';
+
+  export default defineComponent({
+    name: 'STable',
+    emits: ['update:page', 'update:focused', 'field-updated', 'request'],
+    components: {
+      QTable,
+      QInnerLoading,
+      QTd,
+      QIcon,
+    },
+    props: {
+      pagination: {
+        type: Object,
+        default: () => ({
+          page: 1,
+          rowsPerPage: 50,
+        }),
+      },
+      hideBottom: {
+        type: Boolean,
+        default: false,
+      },
+      showBottom: {
+        type: Boolean,
+        default: false,
+      },
+      noDataLabel: {
+        type: String,
+        default: '데이터 조회가 필요합니다',
+      },
+      columns: {
+        type: Array,
+        default: () => [],
+      },
+      rows: {
+        type: Array,
+        default: () => [],
+      },
+      resizable: {
+        type: Boolean,
+        default: false,
+      },
+      stickyHeader: {
+        type: Boolean,
+        default: false,
+      },
+      stickyResizable: {
+        type: [Array, Number],
+        required: false,
+      },
+      useSticky: {
+        type: Boolean,
+        default: false,
+      },
+      stickyColumn: {
+        type: Object,
+        default: () => ({
+          count: 1, // sticky하고자하는 column 개수
+          direction: 'left', // 'left' | 'right'
+        }),
+      },
+      navigator: {
+        type: Boolean,
+        default: false,
+      },
+      inputOptions: {
+        type: Object,
+        default: () => ({ type: 'number' }),
+      },
+      focused: {
+        type: Object,
+      },
+      noHover: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, { emit, attrs }) {
+      const tablePagination = ref(props.pagination);
+      const paginationModel = ref(props.pagination);
+      watch(
+        () => props.pagination,
+        newValue => {
+          paginationModel.value = { ...newValue };
+          tablePagination.value = { ...newValue };
+          if (props.pagination.lastPage) tablePagination.value.page = 1;
+        },
+        { deep: true },
+      );
+
+      function updatePagination(val) {
+        emit('update:page', val);
+        if (!props.pagination.lastPage) {
+          tablePagination.value.page = val;
+        }
+      }
+
+      const sTableRef = ref(null);
+      const { focusCell, isFocused, editing, inputRef, inputData, closeInput, editIcon } =
+        useNavigator(props, attrs, emit);
+      function updateSelected(details) {
+        if (details.added && details.evt && details.evt.shiftKey) {
+          const idx = props.rows.findIndex(r => r === details.rows[0]);
+          const lastIdx = attrs.selected
+            .map(x => props.rows.findIndex(y => y === x))
+            .filter(v => v < idx)
+            .reduce((a, b) => (Math.abs(b - idx) < Math.abs(a - idx) ? b : a));
+          for (let i = lastIdx + 1; i < idx; i++) {
+            attrs.selected.push(props.rows[i]);
+          }
+        }
+      }
+
+      // 스크롤 그림자 로직
+      const isTableScrolled = ref(false);
+      function detectHorizontalScroll(tableScrollArea) {
+        const { getScrollTarget, getHorizontalScrollPosition } = scroll;
+        const scrollTarget = getScrollTarget(tableScrollArea);
+        const isStickyLeft = props.stickyColumn.direction === 'left';
+
+        tableScrollArea.addEventListener('scroll', () => {
+          const scrollPosition = getHorizontalScrollPosition(scrollTarget);
+
+          if (isStickyLeft) {
+            isTableScrolled.value = scrollPosition > 10; // 오른쪽 고정일 때에 스크롤 위치 계산하는 로직 수정 필요
+          } else {
+            isTableScrolled.value =
+              tableScrollArea.scrollWidth - tableScrollArea.clientWidth - scrollPosition > 10;
+          }
+        });
+      }
+
+      function detectWindowResize(tableElement, tableScrollArea) {
+        window.addEventListener('resize', () => {
+          const table = tableElement.getElementsByClassName('q-table')[0];
+
+          if (table.offsetWidth > tableScrollArea.offsetWidth) {
+            isTableScrolled.value = true;
+          } else {
+            isTableScrolled.value = false;
+          }
+        });
+      }
+
+      function handleColumns() {
+        const { addResizable, addStickyResizable, addSticky } = useResizable();
+        const tableElement = () => sTableRef.value.$el;
+        const isStickyLeft = props.stickyColumn.direction === 'left';
+        const { count, direction: stickyDirection } = props.stickyColumn;
+
+        if (props.useSticky) {
+          addSticky(tableElement(), isStickyLeft, count);
+        }
+        if (props.resizable) {
+          const stickyCount = props.useSticky && !isStickyLeft ? count : 0;
+          addResizable(tableElement(), isStickyLeft, stickyCount, props.useSticky);
+        }
+        if (props.stickyResizable) {
+          addStickyResizable(tableElement(), props.stickyResizable);
+        }
+
+        const tableScrollArea = tableElement().getElementsByClassName('q-table__middle')[0];
+        const isScrollbarAppear = tableScrollArea.scrollWidth > tableScrollArea.clientWidth;
+
+        if (!isStickyLeft && isScrollbarAppear) {
+          isTableScrolled.value = true;
+        }
+
+        detectHorizontalScroll(tableScrollArea);
+        detectWindowResize(tableElement(), tableScrollArea);
+      }
+
+      onMounted(() => {
+        handleColumns();
+      });
+
+      watch(
+        () => props.columns,
+        () => {
+          nextTick(() => {
+            handleColumns();
+          });
+        },
+      );
+
+      return {
+        sTableRef,
+        focusCell,
+        isFocused,
+        editing,
+        inputRef,
+        inputData,
+        closeInput,
+        editIcon,
+        updateSelected,
+        isTableScrolled,
+        tablePagination,
+        paginationModel,
+        pagesNumber: computed(
+          () =>
+            props.pagination.lastPage ||
+            Math.ceil(props.rows.length / paginationModel.value.rowsPerPage),
+        ),
+        updatePagination,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-table {
+    border-radius: 8px !important;
+    border: 1px solid $Grey_Lighten-3;
+    &__hover {
+      .q-table__middle {
+        .q-table {
+          tr {
+            &:hover {
+              td {
+                background-color: $Grey_Lighten-6 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+    .q-table__middle {
+      .q-table {
+        overflow: auto;
+        tr {
+          th,
+          td {
+            &.sticky-cell {
+              overflow: visible;
+              &::after {
+                content: '';
+                background: none;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                width: 20px;
+                z-index: 100;
+                transition: opacity 0.4s;
+                opacity: 0;
+                pointer-events: none;
+              }
+            }
+          }
+        }
+        thead {
+          background: $th-bg;
+          min-height: 0;
+          tr {
+            height: 36px;
+            color: $Grey_Darken-5;
+            th {
+              padding: $table-th-padding;
+              font-size: $default-font;
+              font-weight: $font-weight-md;
+              word-break: keep-all;
+              white-space: nowrap;
+              &.sticky-cell {
+                position: sticky;
+                z-index: 101;
+                background: $th-bg;
+              }
+
+              .sort-icon {
+                color: $Grey_Lighten-1;
+                font-size: 16px;
+                opacity: 1;
+                &.desc-sort {
+                  transform: rotate(180deg);
+                }
+                transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+              }
+
+              // NOTE: 해당 sortable은 퀘이사에서 기본적으로 사용하는 기능
+              // 차후 slot 방식으로 사용할경우 해당 방식으로 사용 X
+              // slot 방식으로 사용할 경우 .sort-icon으로만 사용 예정
+              &.sortable {
+                > .q-table__sort-icon {
+                  //display: none;
+                  color: $Grey_Lighten-1;
+                  font-size: 16px;
+                  opacity: 1;
+                }
+              }
+            }
+          }
+        }
+        tbody {
+          tr {
+            min-height: 0px;
+            color: $Grey_Darken-5;
+            td {
+              padding: $table-th-padding;
+              font-size: $default-font;
+              word-break: keep-all;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+
+              &:before {
+                background: none;
+              }
+              &.sticky-cell {
+                position: sticky;
+                z-index: 1;
+                background-color: white;
+              }
+              .s-table-edited-td {
+                display: inline-flex;
+                align-items: center;
+              }
+            }
+            .focused {
+              border: 1px solid $positive !important;
+            }
+            &:last-child > td {
+              border-bottom-width: 1px;
+            }
+          }
+        }
+      }
+    }
+    .q-table__bottom {
+      min-height: 0;
+      padding: 0;
+      border: none;
+      &--nodata {
+        height: 240px;
+        color: $Grey_Default;
+        font-size: $default-font;
+        line-height: $default-line-height;
+        display: block;
+        padding-top: 80px;
+      }
+    }
+  }
+  .horizontally-scrolled {
+    .sticky-cell::after {
+      opacity: 1 !important;
+    }
+  }
+  .s-select-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th {
+              &:first-of-type {
+                padding: 0 8px 0 24px;
+                line-height: 100%;
+                > .q-checkbox:not(.s-checkbox) {
+                  @extend %checkbox;
+                }
+              }
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              &:first-of-type {
+                padding: 0 8px 0 24px;
+                line-height: 100%;
+                > .q-checkbox:not(.s-checkbox) {
+                  @extend %checkbox;
+                }
+              }
+              &:after {
+                background: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th:last-of-type {
+              .resiable-right {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .s-select-table.resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th:first-of-type {
+              > .resiable-right {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .sticky-resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          th:first-of-type {
+            > .resiable-left {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  .sticky-header {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th {
+              background: $th-bg;
+              position: sticky;
+              top: 0;
+              z-index: 100;
+            }
+          }
+        }
+      }
+    }
+  }
+  .before-search {
+    .q-table__middle {
+      .q-table {
+        thead {
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+  .sticky-left-table {
+    .sticky-cell {
+      &::after {
+        box-shadow: inset 12px 0 20px -25px;
+        right: -20px;
+        left: auto;
+      }
+    }
+  }
+  .sticky-right-table {
+    .sticky-cell {
+      &:not(.sticky-cell__right--first)::after {
+        display: none;
+      }
+      &::after {
+        box-shadow: inset -12px 0 20px -25px;
+        right: auto;
+        left: -20px;
+      }
+    }
+  }
+</style>