renusify 2.5.1 → 3.0.0

package/components/table/index.vue

@@ -4,7 +4,7 @@
       :class="{
         [`${$r.prefix}table`]:true,
         'table-editable':editable,
-         'table-bordered':borderd,
+         'table-bordered':bordered,
          'row-thin':thin,
          'table-fixed-header':fixedHeader,
          'table-sortable':sortable,
@@ -20,11 +20,13 @@
             </span>
     </div>
     <div class="table-wrapper">
-      <div ref="table" class="table-container">
+      <div ref="tableRef" class="table-container">
         <r-progress-line v-if="loading" color="color-two"></r-progress-line>
         <table>
           <thead>
           <tr>
+            <!-- @slot Slot for custom header rendering
+             @binding {Array} header - Table header configuration -->
             <slot name="header" v-bind:header="th">
               <th v-for="(item,key) in th" :key="key"
                   :class="{'color-info-text':sortKey===item.value}"
@@ -40,18 +42,27 @@
             <template v-for="(item,key) in lists" :key="gen_key(item)||key">
               <template v-if="true">
                 <tr :key="`${gen_key(item)||key}- f`">
+                  <!--  Slot for custom row rendering
+                  @binding {*} item - Row data item
+                  @binding {Function} open - Function to toggle row expansion
+                  @binding {Number|null} opened - Currently opened row index
+                  @binding {Function} show - Function to check if expand button should be shown
+                  @binding {Array} th - Table header configuration -->
                   <slot :key="key" :item="item" :open="open" :opened="opened" :show="show" :th="th"
                         name="row">
                     <td v-for="(value,k) in th" :key="`${key}- ${k}`">
+                      <!-- Dynamic slot for individual cell content, named 'td-[value.value]'
+                       @binding {*} item - Row data item
+                       @binding {Object} value - Column configuration -->
                       <slot :item="item" :value="value" :name="'td-'+value.value">
-                      <div>
-                        <r-btn v-if="show(k)"
-                               icon text @click.prevent="open(key)">
-                          <r-icon v-if="opened!==key" v-html="$r.icons.plus"></r-icon>
-                          <r-icon v-else v-html="$r.icons.minus"></r-icon>
-                        </r-btn>
-                        {{ item[value.value] }}
-                      </div>
+                        <div>
+                          <r-btn v-if="show(k)"
+                                 icon text @click.prevent="open(key)">
+                            <r-icon v-if="opened!==key" v-html="$r.icons.plus"></r-icon>
+                            <r-icon v-else v-html="$r.icons.minus"></r-icon>
+                          </r-btn>
+                          {{ item[value.value] }}
+                        </div>
                       </slot>
                     </td>
                   </slot>
@@ -98,311 +109,743 @@
   </r-modal>
 </template>
 
-<script>
-import './style.scss'
-
-export default {
-  name: 'r-table',
-  props: {
-    transition: {
-      type: String,
-      default: 'table-row'
-    },
-    keyItem: [String, Function],
-    thin: Boolean,
-    responsive: Boolean,
-    translate: Boolean,
-    editable: Boolean,
-    stripped: Boolean,
-    borderd: Boolean,
-    sortable: Object,
-    fixedHeader: Boolean,
-    fixedFirstColumn: Boolean,
-    headers: Array,
-    items: Array
+<script setup>
+import {ref, computed, watch, onMounted, nextTick, inject} from 'vue'
+
+/**
+ * @example // Table usage
+ * <template>
+ *   <r-table
+ *     :transition="transition"
+ *     :key-Item="keyItem"
+ *     :thin="thin"
+ *     :responsive="responsive"
+ *     :translate="translate"
+ *     :editable="editable"
+ *     :stripped="stripped"
+ *     :bordered="bordered"
+ *     :sortable="sortable"
+ *     :fixed-Header="fixedHeader"
+ *     :fixed-First-Column="fixedFirstColumn"
+ *     :headers="headers"
+ *     :items="items"
+ *   ></r-table>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const transition = ref('table-row')
+ * const keyItem = ref(null)
+ * const thin = ref(false)
+ * const responsive = ref(false)
+ * const translate = ref(false)
+ * const editable = ref(true)
+ * const stripped = ref(true)
+ * const borderd = ref(false)
+ *
+ * const sortable = ref({
+ *   id: true,
+ *   name: true,
+ *   age: false,
+ *   skill: 'vuejs'
+ * })
+ *
+ * const fixedHeader = ref(false)
+ * const fixedFirstColumn = ref(false)
+ *
+ * const headers = ref([
+ *   { text: 'id', value: 'id' },
+ *   { text: 'name', value: 'name' },
+ *   { text: 'lastname', value: 'lastname' },
+ *   { text: 'age', value: 'age' },
+ *   { text: 'skill', value: 'skill' }
+ * ])
+ *
+ * const items = ref([
+ *   { id: 1, name: 'Smko', lastname: 'Bzd', age: 29, skill: { vuejs: 20, python: 25 } },
+ *   { id: 2, name: 'Noah', lastname: 'Ava', age: 23, skill: { vuejs: 18, python: 32 } },
+ *   { id: 3, name: 'James', lastname: 'Barr', age: 18, skill: { vuejs: 45, python: 25 } },
+ *   { id: 4, name: 'William', lastname: 'Emma', age: 30, skill: { vuejs: 30, python: 50 } },
+ *   { id: 5, name: 'Liam', lastname: 'Emma', age: 53, skill: { vuejs: 15, python: 20 } }
+ * ])
+ * <//script>
+ *
+ * */
+const props = defineProps({
+  /**
+   * CSS transition name for table rows
+   * @type {String}
+   * @default 'table-row'
+   */
+  transition: {
+    type: String,
+    default: 'table-row'
   },
-  data() {
-    return {
-      key: 0,
-      showTable: true,
-      opened: null,
-      sortKey: null,
-      sortAsc: true,
-      showModal: false,
-      loading: false,
-      eventsHandler: null,
-      hidden_col: {},
-      hidden: {},
-      cols: []
+  /**
+   * Key property or function to generate unique row keys
+   * @type {String|Function}
+   */
+  keyItem: [String, Function],
+  /**
+   * Applies thin row styling
+   * @type {Boolean}
+   */
+  thin: Boolean,
+  /**
+   * Enables responsive column hiding on small screens
+   * @type {Boolean}
+   */
+  responsive: Boolean,
+  /**
+   * Enables text translation for header texts
+   * @type {Boolean}
+   */
+  translate: Boolean,
+  /**
+   * Enables column configuration editing
+   * @type {Boolean}
+   */
+  editable: Boolean,
+  /**
+   * Applies stripped row styling
+   * @type {Boolean}
+   */
+  stripped: Boolean,
+  /**
+   * Applies bordered styling
+   * @type {Boolean}
+   */
+  bordered: Boolean,
+  /**
+   * Sorting configuration object mapping column values to sortable keys
+   * @type {Object}
+   */
+  sortable: Object,
+  /**
+   * Enables fixed header
+   * @type {Boolean}
+   */
+  fixedHeader: Boolean,
+  /**
+   * Enables fixed first column
+   * @type {Boolean}
+   */
+  fixedFirstColumn: Boolean,
+  /**
+   * Array of header configuration objects
+   * @type {Array}
+   */
+  headers: Array,
+  /**
+   * Array of data items for table rows
+   * @type {Array}
+   */
+  items: Array
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when table sorting changes
+   * @param {Object} sort - Sorting information
+   * @param {String} sort.key - Column key being sorted
+   * @param {Boolean} sort.asc - Whether sorting is ascending
+   */
+  'sort'
+])
+
+const {$helper, $storage} = inject('renusify')
+
+const key = ref(0)
+const opened = ref(null)
+const sortKey = ref(null)
+const sortAsc = ref(true)
+const showModal = ref(false)
+const loading = ref(false)
+const hidden_col = ref({})
+const hidden = ref({})
+const cols = ref([])
+
+const tableRef = ref(null)
+
+const priority = computed(() => {
+  const res = {}
+  th.value.forEach((item) => {
+    if (item && $helper.ifHas(item, false, 'option', 'priority') !== false) {
+      res[item.value] = item.option.priority
+    } else {
+      res[item.value] = 0
     }
-  },
-  watch: {
-    items: {
-      immediate: true,
-      handler() {
-        setTimeout(() => {
-          this.setup()
-        }, 100)
-      },
+  })
+  return res
+})
+
+const lists = computed(() => {
+  if (!props.items) return []
+
+  let res = [...props.items]
+
+  if (res.length > 0 && props.sortable && sortKey.value && props.sortable[sortKey.value]) {
+    return res.sort(dynamicSort(sortKey.value, sortAsc.value, props.sortable[sortKey.value]))
+  }
+  return res
+})
+
+const th = computed(() => {
+  const res = []
+  const list = cols.value.length > 0 ? cols.value : th_all.value
+
+  list.forEach((item) => {
+    if (item && !(item.value in hidden.value) && !(item.value in hidden_col.value)) {
+      res.push(item)
     }
-  },
-  computed: {
-    priority() {
-      let res = {}
-      this.th.forEach((item) => {
-        if (this.$helper.ifHas(item, false, 'option', 'priority') !== false) {
-          res[item.value] = item['option']['priority']
-        } else {
-          res[item.value] = 0
-        }
-      })
+  })
+  return res
+})
 
-      return res
-    },
-    lists() {
-      let res = this.items
+const th_all = computed(() => {
+  const res = []
 
-      if (res && this.sortable && this.sortable[this.sortKey]) {
-        return res.sort(this.dynamicSort(this.sortKey, this.sortAsc, this.sortable[this.sortKey]))
+  if (props.headers && props.headers.length > 0) {
+    props.headers.forEach((item) => {
+      if (item) {
+        res.push(item)
       }
-      return res
-    },
-    th() {
-      let res = []
-      let list = this.cols.length > 0 ? this.cols : this.th_all
-      list.forEach((item) => {
-        if (item && !(item.value in this.hidden) && !(item.value in this.hidden_col)) {
-          res.push(item)
-        }
-      })
-      return res
-    },
-    th_all() {
-      let res = []
-      if (this.headers) {
-        this.headers.forEach((item) => {
-          if (item) {
-            res.push(item)
-          }
-        })
-      } else {
-        for (let name in this.items[0]) {
-          if (this.$helper.hasKey(this.items[0], name)) {
-            res.push({text: name, value: name})
-          }
-        }
+    })
+  } else if (props.items && props.items.length > 0) {
+    for (let name in props.items[0]) {
+      if ($helper.hasKey(props.items[0], name)) {
+        res.push({text: name, value: name})
       }
-      return res
-    },
-    hash_key() {
-      let r = ''
-      this.th_all.forEach((item) => {
-        if (item) {
-          r += item.value
-        }
-      })
-      return this.$helper.hash(r)
     }
-  },
-  methods: {
-    check_hidden() {
-      const d = this.$storage.get('table_' + this.hash_key)
-      if (d) {
-        let res = {}
-        d.forEach((item) => {
-          if (item && item.show === false) {
-            res[item.value] = true
-          }
-        })
-        this.hidden_col = res
-        this.cols = d
+  }
+
+  return res
+})
+
+const hash_key = computed(() => {
+  let r = ''
+  th_all.value.forEach((item) => {
+    if (item) {
+      r += item.value
+    }
+  })
+  return $helper.hash(r)
+})
+
+// Methods
+const check_hidden = () => {
+  const d = $storage.get('table_' + hash_key.value)
+  if (d) {
+    const res = {}
+    d.forEach((item) => {
+      if (item && item.show === false) {
+        res[item.value] = true
       }
+    })
+    hidden_col.value = res
+    cols.value = d
+  }
+}
 
-    },
-    store_db(data) {
-      this.$storage.set('table_' + this.hash_key, data)
-      this.key++
-      this.check_hidden()
-      if (this.responsive) {
-        this.build()
+const store_db = (data) => {
+  $storage.set('table_' + hash_key.value, data)
+  key.value++
+  check_hidden()
+  if (props.responsive) {
+    build()
+  }
+}
+
+const open_modal = () => {
+  const d = $storage.get('table_' + hash_key.value)
+  if (d) {
+    cols.value = []
+    d.forEach((item) => {
+      if (item) {
+        cols.value.push(item)
       }
-    },
-    open_modal() {
-      const d = this.$storage.get('table_' + this.hash_key)
-      if (d) {
-        this.cols = []
-        d.forEach((item) => {
-          if (item) {
-            this.cols.push(item)
-          }
-        })
-      } else {
-        this.cols = []
-        this.th_all.forEach((item) => {
-          if (item) {
-            this.cols.push({text: item.text, value: item.value, show: true})
-          }
-        })
+    })
+  } else {
+    cols.value = []
+    th_all.value.forEach((item) => {
+      if (item) {
+        cols.value.push({text: item.text, value: item.value, show: true})
       }
+    })
+  }
+
+  showModal.value = true
+}
+
+const gen_key = (item) => {
+  if (!props.keyItem) return null
+
+  if (typeof props.keyItem === 'string') {
+    return item[props.keyItem]
+  }
+
+  if (typeof props.keyItem === 'function') {
+    return props.keyItem(item)
+  }
 
-      this.showModal = true
-    },
-    gen_key(item) {
-      if (!this.keyItem) {
-        return false
+  return null
+}
+
+const open = (rowKey) => {
+  if (opened.value === rowKey) {
+    opened.value = null
+  } else {
+    opened.value = rowKey
+  }
+}
+
+const show = (k) => {
+  if (Object.keys(hidden.value).length === 0) {
+    return false
+  }
+
+  if (Array.isArray(th.value) && k === 0) {
+    return true
+  }
+
+  const keys = Object.keys(th.value)
+  return keys[0] === k.toString()
+}
+
+const setup = () => {
+  if (props.editable) {
+    check_hidden()
+    const s = $storage.get('table_sort')
+    if (s && hash_key.value in s) {
+      sortKey.value = s[hash_key.value][0]
+      sortAsc.value = s[hash_key.value][1]
+    }
+  }
+
+  if (props.responsive) {
+    build()
+  }
+}
+
+const build = () => {
+  if (!tableRef.value) return
+
+  opened.value = null
+  hidden.value = {}
+
+  nextTick(() => {
+    const table = tableRef.value.querySelector('table')
+    if (!table) return
+
+    const all_th = table.querySelectorAll('th') || []
+    const th_w = []
+
+    all_th.forEach((th) => {
+      if (th) {
+        th_w.push(th.clientWidth)
       }
-      if (typeof this.keyItem === 'string') {
-        return item[this.keyItem]
+    })
+
+    const thn_w = {}
+    let i = 0
+    for (let name in priority.value) {
+      if ($helper.hasKey(priority.value, name)) {
+        thn_w[name] = th_w[i]
+        i++
       }
-      return this.keyItem(item)
-    },
-    open(key) {
-      if (this.opened === key) {
-        this.opened = null
-      } else {
-        this.opened = key
+    }
+
+    if (tableRef.value.clientWidth < table.clientWidth) {
+      const [show, hide] = extractor(tableRef.value.clientWidth, table.clientWidth, thn_w, priority.value)
+      hidden.value = hide
+    }
+  })
+}
+
+const extractor = (width, table_w, th, priority, removed = 0, hide = {}) => {
+  if (table_w > width + removed) {
+    const name = remove_one(priority)
+    hide[name] = true
+    const newPriority = {...priority}
+    delete newPriority[name]
+    return extractor(width, table_w, th, newPriority, removed + th[name], hide)
+  }
+  return [priority, hide]
+}
+
+const remove_one = (priority) => {
+  const res = []
+  for (let name in priority) {
+    if ($helper.hasKey(priority, name)) {
+      res.push({name: name, value: priority[name]})
+    }
+  }
+
+  res.sort((a, b) => {
+    return a.value - b.value
+  })
+
+  return res[0]?.name
+}
+
+const getText = (key) => {
+  if (Array.isArray(props.headers)) {
+    const header = props.headers.find(item => item.value === key)
+    return header?.text || key
+  }
+  return key
+}
+
+const sorting = (name) => {
+  if (props.sortable && props.sortable[name]) {
+    loading.value = true
+
+    setTimeout(() => {
+      loading.value = false
+    }, 500)
+
+    if (sortKey.value === name) {
+      sortAsc.value = !sortAsc.value
+    } else {
+      sortKey.value = name
+      sortAsc.value = true
+    }
+
+    if (props.editable) {
+      let t = $storage.get('table_sort') || {}
+      t[hash_key.value] = [name, sortAsc.value]
+      $storage.set('table_sort', t)
+    }
+
+    emit('sort', {key: name, asc: sortAsc.value})
+  }
+}
+
+const dynamicSort = (property, sortAsc, sortable_key = undefined) => {
+  let sortOrder = sortAsc ? 1 : -1
+
+  return function (a, b) {
+    let result = 0
+
+    if (a[property] !== undefined && b[property] !== undefined) {
+      let av = a[property]
+      let bv = b[property]
+
+      if (sortable_key && av && bv &&
+          av[sortable_key] !== undefined &&
+          bv[sortable_key] !== undefined) {
+        av = av[sortable_key]
+        bv = bv[sortable_key]
       }
-    },
-    show(k) {
-      if (this.$helper.size(this.hidden) === 0) {
-        return false
+
+      if (av < bv) {
+        result = -1
+      } else if (av > bv) {
+        result = 1
       }
-      if (this.$helper.isArray(this.th) && k === 0) {
-        return true
+    } else if (a[property] === undefined && b[property] !== undefined) {
+      result = -1
+    } else if (a[property] !== undefined && b[property] === undefined) {
+      result = 1
+    }
+
+    return result * sortOrder
+  }
+}
+
+
+onMounted(() => {
+  setup()
+})
+
+watch(() => props.items, () => {
+  setTimeout(() => {
+    setup()
+  }, 100)
+}, {immediate: true})
+
+</script>
+<style lang="scss">
+@use "sass:map";
+@use "../../style" as *;
+
+$data-table-thin-header-height: 38px !default;
+$data-table-thin-row-height: 32px !default;
+$data-table-regular-row-height: 42px !default;
+$data-table-regular-header-height: 38px !default;
+
+.#{$prefix}table {
+  position: relative;
+
+  .table-wrapper {
+    background-color: var(--color-sheet-container-lowest);
+    color: var(--color-on-sheet);
+  }
+
+  .table-svg-path {
+    fill: var(--color-sheet);
+  }
+
+  .table-editable-icon {
+    background-color: var(--color-sheet);
+    color: var(--color-on-sheet);
+  }
+
+  &.table-fixed-header {
+    thead th {
+      box-shadow: inset 0 -2px var(--color-border)
+    }
+  }
+
+  thead {
+    tr {
+      &:last-child th {
+        border-bottom: 1px solid var(--color-border)
       }
-      const l = Object.keys(this.th)
-      return l[0] === k;
-
-    },
-    setup() {
-      if (this.editable) {
-        this.check_hidden()
-        const s = this.$storage.get('table_sort')
-        if (s && this.hash_key in s) {
-          this.sortKey = s[this.hash_key][0]
-          this.sortAsc = s[this.hash_key][1]
-        }
+
+      th {
+        background-color: var(--color-sheet);
+        color: var(--color-on-sheet)
       }
-      if (this.responsive) {
-        this.build()
+    }
+  }
+
+  &.table-fixed-first-columns {
+    tr {
+      th:first-child {
+        background: var(--color-sheet);
+        color: var(--color-on-sheet)
       }
-    },
-    build() {
-      let el = this.$refs.table
-      if (!el) {
-        return
+
+      td:first-child {
+        background: var(--color-sheet);
+        color: var(--color-on-sheet)
       }
-      this.opened = null
-      this.hidden = {}
-      setTimeout(() => {
-        let table = el.querySelector('table')
-        let all_th = table.querySelectorAll('th') || []
-        let th_w = []
-        all_th.forEach((th) => {
-          if (th) {
-            th_w.push(th.clientWidth)
-          }
-        })
-        let thn_w = {}
-        let i = 0
-        for (let name in this.priority) {
-          if (this.$helper.hasKey(this.priority, name)) {
-            thn_w[name] = th_w[i]
-            i++
-          }
+
+      &:hover {
+        td:first-child {
+          background: var(--color-sheet-container);
+          color: var(--color-on-sheet)
         }
-        if (el.clientWidth < table.clientWidth) {
-          const [show, hide] = this.extractor(el.clientWidth, table.clientWidth, thn_w, this.priority)
-          this.hidden = hide
+      }
+    }
+  }
+
+  &.table-stripped {
+    tbody {
+      tr:nth-child(2n):not(:hover) {
+        td {
+          background: var(--color-sheet-container-low)
         }
-      }, 10)
+      }
+    }
+  }
 
-    },
-    extractor(width, table_w, th, priority, removed = 0, hide = {}) {
+  tbody {
+    tr {
+      &:active {
+        background: var(--color-sheet-container)
+      }
 
-      if (table_w > width + removed) {
-        const name = this.remove_one(priority)
-        hide[name] = true
-        delete priority[name]
-        return this.extractor(width, table_w, th, priority, removed + th[name], hide)
+      &:hover {
+        background: var(--color-sheet-container)
       }
-      return [priority, hide]
-
-    },
-    remove_one(priority) {
-      let res = []
-      for (let name in priority) {
-        if (this.$helper.hasKey(priority, name)) {
-          res.push({'name': name, 'value': priority[name]})
-        }
+    }
+
+    tr:not(:last-child) {
+      td {
+        border-bottom: 1px solid var(--color-border)
       }
-      res = res.sort((a, b) => {
-        return a['value'] - b['value']
-      })
-      return res[0]['name']
-
-    },
-    getText(key) {
-      if (this.$helper.isArray(this.headers)) {
-        const lng = this.headers.length
-        for (let i = 0; i < lng; i++) {
-          const item = this.headers[i]
-          if (item.value === key) {
-            return item.text
+    }
+  }
+
+  &.table-bordered .table-wrapper {
+    border: 1px solid var(--color-border);
+    border-collapse: collapse;
+  }
+
+  .table-wrapper {
+    border-radius: map.get($borders, 'lg');
+    overflow: hidden;
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  td, th {
+    padding: 0 16px;
+    @include ltr() {
+      text-align: left
+    }
+    @include rtl() {
+      text-align: right
+    }
+  }
+
+  th {
+    user-select: none;
+    font-size: 14px;
+    font-weight: bold;
+    height: $data-table-regular-header-height;
+
+  }
+
+  td {
+    font-size: 14px;
+    font-weight: normal;
+    height: $data-table-regular-row-height;
+  }
+
+  &.row-thin {
+    th {
+      font-size: 12px;
+      height: $data-table-thin-header-height;
+
+    }
+
+    td {
+      font-size: 12px;
+      height: $data-table-thin-row-height
+    }
+  }
+
+  .table-container {
+    overflow-x: auto
+  }
+
+  &.table-fixed-header {
+    .table-container {
+      overflow-y: auto;
+      max-height: 85vh;
+    }
+
+    thead {
+      th {
+        border-bottom: 0px !important;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+
+        tr:nth-child(2) {
+          th {
+            top: $data-table-regular-header-height
           }
         }
+      }
+    }
+  }
 
-      } else {
-        return key
+  &.table-fixed-first-columns {
+    tr {
+      position: relative;
+
+      th:first-child {
+        min-width: 300px !important;
+        position: sticky;
+        width: 300px;
+        @include rtl() {
+          right: 0;
+        }
+        @include ltr() {
+          left: 0;
+        }
+        z-index: map.get($z-index, 'medium');
       }
-    },
-    sorting(name) {
-      if (this.sortable && this.sortable[name]) {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-        }, 500)
-        if (this.sortKey === name) {
-          this.sortAsc = !this.sortAsc
-        } else {
-          this.sortKey = name
-          this.sortAsc = true
+
+      td:first-child {
+        position: sticky;
+        width: 300px;
+        @include rtl() {
+          right: 0;
         }
-        if (this.editable) {
-          let t = this.$storage.get('table_sort')
-          if (!t) {
-            t = {}
-          }
-          t[this.hash_key] = [name, this.sortAsc]
-          this.$storage.set('table_sort', t)
+        @include ltr() {
+          left: 0;
         }
+        height: auto;
+        z-index: map.get($z-index, 'low');
       }
-    },
-    dynamicSort(property, sortAsc, sortable_key = undefined) {
-      let sortOrder = 1
-      if (!sortAsc) {
-        sortOrder = -1
+    }
+  }
+
+  &.table-sortable {
+    th {
+      &:hover {
+        cursor: pointer;
       }
-      const that = this
-      return function (a, b) {
-        let result = -1
-        if (a[property] !== undefined && b[property] !== undefined) {
-          let av = a[property]
-          let bv = b[property]
-          if (av[sortable_key] !== undefined && bv[sortable_key] !== undefined) {
-            av = av[sortable_key]
-            bv = bv[sortable_key]
-          }
-          result = (av < bv) ? -1 : (av > bv) ? 1 : 0
-        } else if (a[property] === undefined && b[property] !== undefined) {
-          result = -1
-        } else if (a[property] !== undefined && b[property] === undefined) {
-          result = 1
-        }
+    }
+  }
 
-        return result * sortOrder
+  &.table-editable {
+    .table-editable-icon {
+      cursor: pointer;
+      border-radius: 20px 20px 0 0;
+      border: none;
+      min-width: 25px !important;
+      padding-top: 8px;
+      height: 30px !important;
+    }
+
+    .table-wrapper {
+      @include rtl() {
+        border-top-left-radius: 0;
+      }
+      @include ltr() {
+        border-top-right-radius: 0;
       }
     }
+
+    .table-svg {
+      @include ltr() {
+        transform: rotateY(180deg);
+      }
+    }
+  }
+
+  .sort-desc {
+    transform: rotate(180deg) !important;
+  }
+
+  tr, td, td > * {
+    transition: height .4s ease-in-out;
+  }
+
+  td > * {
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+
+  .tr-hidden {
+    overflow: hidden;
+  }
+
+  .table-row-enter-active, .table-row-leave-active {
+    transition: height .3s linear;
+    line-height: 0;
+  }
+
+  .table-row-enter-from {
+    td {
+      height: 0;
+      line-height: 0;
+      overflow: hidden;
+    }
+  }
+
+  .table-row-leave-to {
+    td {
+      height: 0;
+      line-height: 0;
+      overflow: hidden;
+
+    }
+  }
+
+  .table-row-move {
+    transition: transform .3s ease-in-out;
   }
 }
-</script>
+</style>