fix(grid): [grid] fix grid sort-by bug (#1055)

* fix(grid): [grid] fix grid sort by bug

* fix(grid): [grid] fix grid sort by bug

* fix(grid): [grid] fix grid sort by bug

examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue

@@ -102,7 +102,7 @@ const cellClassName = ({ rowIndex, columnIndex }) => {
   color: palevioletred;
 }
 .grid-cell-style .tiny-grid-body__column.col-orange {
-  background-color: #f60;
+  background-color: pink;
   color: #fff;
 }
 </style>

examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue

@@ -1,19 +1,38 @@
 <template>
-  <tiny-grid
-    class="grid-footer-cell-style"
-    :data="tableData"
-    show-footer
-    :footer-method="footerMethod"
-    border
-    :footer-cell-class-name="footerCellClassName"
-  >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <h4 class="title">自定义表尾行样式：</h4>
+    <tiny-grid
+      class="grid-footer-row-style"
+      :data="tableData"
+      show-footer
+      :footer-method="footerMethod"
+      border
+      :footer-row-class-name="footerRowClassName"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+    <h4 class="title">自定义表尾单元格样式：</h4>
+    <tiny-grid
+      class="grid-footer-cell-style"
+      :data="tableData"
+      show-footer
+      :footer-method="footerMethod"
+      border
+      :footer-cell-class-name="footerCellClassName"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -79,7 +98,7 @@ const tableData = ref([
   }
 ])
 
-function footerMethod({ columns, data }) {
+const footerMethod = ({ columns, data }) => {
   return [
     columns.map((column, columnIndex) => {
       if (columnIndex === 0) {
@@ -105,12 +124,20 @@ function footerMethod({ columns, data }) {
     })
   ]
 }
-
-function footerCellClassName({ $rowIndex }) {
-  if ($rowIndex === 0) {
+const footerCellClassName = ({ column, $rowIndex }) => {
+  if ($rowIndex === 0 && column.property === 'employees') {
     return 'footer__cell--blue'
   }
 }
+const footerRowClassName = ({ $rowIndex }) => {
+  if ($rowIndex === 0) {
+    return 'footer__row--red'
+  }
+
+  if ($rowIndex === 1) {
+    return 'footer__row--green'
+  }
+}
 </script>
 
 <style>
@@ -118,4 +145,22 @@ function footerCellClassName({ $rowIndex }) {
   background-color: #2db7f5;
   color: #fff;
 }
+
+.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
+  background-color: palevioletred;
+  color: #fff;
+}
+.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
+  background-color: green;
+  color: #fff;
+}
+</style>
+
+<style scoped>
+.title {
+  font-size: 16px;
+  padding: 15px;
+  font-weight: bolder;
+  color: #444;
+}
 </style>

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue

@@ -2,8 +2,8 @@
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="触发源" width="100">
-      <template #default>
-        <div class="only-me-can-drag">拖拽触发源</div>
+      <template #default="{ row }">
+        <div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@@ -18,7 +18,7 @@ import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
-const dropConfig = ref({
+const dropConfig = {
   plugin: Sortable,
   row: true,
   trigger: '.only-me-can-drag', // 触发源控制
@@ -27,7 +27,7 @@ const dropConfig = ref({
     if (row.id === '8') return false // return false 时取消拖动
   },
   column: false // 取消列拖拽
-})
+}
 const tableData = ref([
   {
     id: '1',

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue

@@ -23,7 +23,7 @@
       ></tiny-grid-column>
       <tiny-grid-column title="操作" width="200" align="center">
         <template #default="data">
-          <template v-if="$refs.theGrid && $refs.theGrid.hasActiveRow(data.row)">
+          <template v-if="$refs.theGridRef && $refs.theGridRef.hasActiveRow(data.row)">
             <tiny-button size="mini" @click="saveRowEvent(data.row)"> 保存 </tiny-button>
             <tiny-button size="mini" @click="cancelRowEvent(data.row)"> 取消 </tiny-button>
           </template>
@@ -90,7 +90,7 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const theGridRef = ref()
+const theGridRef = ref('theGridRef')
 
 function editRowEvent(row) {
   theGridRef.value.setActiveRow(row).then(() => {

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue

@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, Button } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent">
+    <tiny-grid :data="tableData" @cell-mouseenter="cellMouseenterEvent" @cell-mouseleave="cellMouseleaveEvent">
       <tiny-grid-column type="index" title="序号" width="100"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>

examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue

@@ -2,6 +2,7 @@
   <div>
     <tiny-grid
       :data="tableData"
+      @header-cell-context-menu="headerMenuClick"
       @footer-cell-context-menu="footerMenuClick"
       :context-menu="{
         header: { options: headerMenus },

examples/sites/demos/pc/app/grid/event/edit-event-composition-api.vue

@@ -5,7 +5,7 @@
     @edit-closed="editClosed"
     @edit-disabled="editDisabled"
     seq-serial
-    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, activeMethod }"
   >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>

examples/sites/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue

@@ -6,7 +6,12 @@
       <tiny-button @click="toggleRowExpansion">手动切换展开行</tiny-button>
     </div>
     <br />
-    <tiny-grid :data="tableData" ref="grid" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <tiny-grid
+      :data="tableData"
+      ref="gridRef"
+      border
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column type="expand" title="操作" width="60">
@@ -82,11 +87,11 @@ const tableData = ref([
     boole: true
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 const setRowExpansion = () => {
   gridRef.value.clearRowExpand()
-  gridRef.value.setRowExpansion([this.tableData[1], this.tableData[0]], true)
+  gridRef.value.setRowExpansion([tableData.value[1], tableData.value[0]], true)
 }
 
 const setAllRowExpansion = () => {
@@ -94,7 +99,7 @@ const setAllRowExpansion = () => {
 }
 
 const toggleRowExpansion = () => {
-  gridRef.value.toggleRowExpansion(this.tableData[1])
+  gridRef.value.toggleRowExpansion(tableData.value[1])
 }
 
 const checkboxEdit = (h, { row, column }) => {

examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue

@@ -20,6 +20,10 @@ const toolbarButtons = ref([
   {
     code: 'clearRadioRowData',
     name: '手动取消单选行'
+  },
+  {
+    code: 'setRadioRow',
+    name: '手动选中某一行'
   }
 ])
 const tableData = ref([
@@ -66,7 +70,7 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
-const gridRef = ref()
+const gridRef = ref('gridRef')
 
 function toolbarButtonClickEvent({ code }) {
   switch (code) {

examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue

@@ -20,6 +20,22 @@ const toolbarButtons = ref([
   {
     code: 'clearSelection',
     name: '手动取消多选行'
+  },
+  {
+    code: 'setAllSelection',
+    name: '手动选中所有行'
+  },
+  {
+    code: 'setSelection',
+    name: '手动选中指定行'
+  },
+  {
+    code: 'toggleAllSelection',
+    name: '手动切换所有行选中状态'
+  },
+  {
+    code: 'toggleRowSelection',
+    name: '手动切换指定行选中状态'
   }
 ])
 const tableData = ref([
@@ -73,6 +89,22 @@ function toolbarButtonClickEvent({ code, $grid }) {
       $grid.clearSelection()
       break
     }
+    case 'setAllSelection': {
+      $grid.setAllSelection(true)
+      break
+    }
+    case 'setSelection': {
+      $grid.setSelection(tableData.value[4], true)
+      break
+    }
+    case 'toggleAllSelection': {
+      $grid.toggleAllSelection()
+      break
+    }
+    case 'toggleRowSelection': {
+      $grid.toggleRowSelection(tableData.value[1])
+      break
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue

@@ -1,4 +1,5 @@
 <template>
+  <p>medium</p>
   <tiny-grid :data="tableData" size="medium">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
@@ -6,6 +7,22 @@
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
   </tiny-grid>
+  <p>small</p>
+  <tiny-grid :data="tableData" size="small">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+  <p>mini</p>
+  <tiny-grid :data="tableData" size="mini">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
 </template>
 
 <script setup lang="jsx">

examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -25,13 +25,15 @@ const tableData = ref([
     name: 'GFD科技YX公司',
     area: '华东区',
     address: '福州',
+    employees: 423,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWWW科技YX公司',
     area: '华南区',
     address: '深圳福田区',
+    employees: 363,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -39,13 +41,15 @@ const tableData = ref([
     name: 'RFV有限责任公司',
     area: '华南区',
     address: '中山市',
+    employees: 131,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
-    area: '华东区',
-    address: '龙岩',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    employees: 215,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
@@ -53,13 +57,15 @@ const tableData = ref([
     name: 'YHN科技YX公司',
     area: '华南区',
     address: '韶关',
+    employees: 322,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
-    area: '华中区',
-    address: '黄冈',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    employees: 168,
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])

examples/sites/demos/pc/app/grid/sort/combinations-sort-composition-api.vue

@@ -35,7 +35,7 @@ const tableData = ref([
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'BWW科技YX公司',
     city: '深圳',
     employees: 300,
     createdDate: '2016-07-08 12:36:22'
@@ -58,7 +58,7 @@ const tableData = ref([
     id: '5',
     name: 'YHN科技YX公司',
     city: '韶关',
-    employees: 810,
+    employees: 800,
     createdDate: '2012-12-12 12:12:12'
   },
   {
@@ -77,7 +77,7 @@ const tableData = ref([
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: 'SZ网络技术YX公司',
     city: '厦门',
     employees: 540,
     createdDate: '2016-06-03 13:53:25'

examples/sites/demos/pc/app/grid/sort/combinations-sort.spec.js

@@ -4,5 +4,8 @@ test('多字段组合排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-sort#sort-combinations-sort')
   await page.getByRole('cell', { name: '员工数(员工数和名称组合排序)' }).getByRole('img').click()
+  // 员工数第一优先级排序
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('1300')
+  // 公司名称第二优先级排序
+  await expect(page.locator('.tiny-grid-body__row').nth(1)).toContainText('YHN科技YX公司')
 })

examples/sites/demos/pc/app/grid/sort/combinations-sort.vue

@@ -41,7 +41,7 @@ export default {
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'BWW科技YX公司',
           city: '深圳',
           employees: 300,
           createdDate: '2016-07-08 12:36:22'
@@ -64,7 +64,7 @@ export default {
           id: '5',
           name: 'YHN科技YX公司',
           city: '韶关',
-          employees: 810,
+          employees: 800,
           createdDate: '2012-12-12 12:12:12'
         },
         {
@@ -83,7 +83,7 @@ export default {
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: 'SZ网络技术YX公司',
           city: '厦门',
           employees: 540,
           createdDate: '2016-06-03 13:53:25'

examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-grid ref="insertGridRef" :data="tableData">
+    <tiny-grid ref="insertGrid" :data="tableData">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>

examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
       <tiny-grid-column title="操作" width="100">
-        <template v-slot="data">
+        <template #default="data">
           <div style="text-align: left; font-size: 16px">
             <icon-plus class="tiny-svg-size" @click="$refs.insertGrid.insertAt(record, data.row)"></icon-plus
             >&nbsp;&nbsp;

examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <tiny-button @click="reLoad">刷新</tiny-button>
+    <tiny-grid ref="grid" :fetch-data="fetchData" :pager="pagerConfig" :loading="loading">
+      <template #toolbar>
+        <tiny-grid-toolbar refresh></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Pager, Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+
+const loading = ref(true)
+
+const grid = ref('grid')
+
+const pagerConfig = {
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    pageSizes: [5, 10],
+    total: 0,
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+}
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const getData = ({ page }) => {
+  let curPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (curPage - 1) * pageSize
+  loading.value = true
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        result: tableData.value.slice(offset, offset + pageSize),
+        page: { total: tableData.value.length }
+      })
+      loading.value = false
+    }, 1000)
+  })
+}
+const fetchData = {
+  api: getData
+}
+
+const reLoad = () => {
+  grid.value.handleFetch('reload')
+}
+</script>

examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue

@@ -124,15 +124,15 @@ const tableData = ref([
     ]
   }
 ])
-const gridRef = ref()
+const grid = ref('grid')
 
 const setTreeExpansion = () => {
-  gridRef.value.setTreeExpansion([this.tableData[1], this.tableData[3]], true)
+  grid.value.setTreeExpansion([tableData.value[1], tableData.value[3]], true)
 }
 const setAllTreeExpansion = () => {
-  gridRef.value.setAllTreeExpansion(true)
+  grid.value.setAllTreeExpansion(true)
 }
 const toggleTreeExpansion = () => {
-  gridRef.value.toggleTreeExpansion(this.tableData[1])
+  grid.value.toggleTreeExpansion(tableData.value[1])
 }
 </script>

package.json

@@ -120,7 +120,8 @@
     "build:ui-react": "pnpm create:mapping-react && pnpm build:entry-react && pnpm build:react",
     "pub:react": "pnpm --filter=\"./packages/dist-react/**\" publish --no-git-checks --access=public",
     "dev:react-site": "pnpm --filter @opentiny/react-site start",
-    "build:react-site": "pnpm --filter @opentiny/react-site build"
+    "build:react-site": "pnpm --filter @opentiny/react-site build",
+    "prettier": "prettier --config .prettierrc --write ."
   },
   "dependencies": {
     "@vue/composition-api": "1.2.2",
@@ -238,4 +239,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

packages/vue/src/grid/src/table/src/methods.ts

@@ -701,7 +701,9 @@ const Methods = {
 
       if (!sortedFlag) {
         let columnSortMethod = sortColumn.sortMethod
-        let sorted = columnSortMethod ? tableData.sort(columnSortMethod) : sortBy(tableData, sortColumn.property)
+        let sorted = columnSortMethod
+          ? tableData.sort(columnSortMethod)
+          : sortBy(tableData, sortColumn.sortBy ? sortColumn.sortBy : sortColumn.property)
 
         tableData = sortColumn.order === 'desc' ? sorted.reverse() : sorted
       }