fix(Table): withTableSorting can get sort value using column's ID wri…

…tten as path (#640)
gravity-ui · Jan 22, 2024 · d5bb68b · d5bb68b
1 parent bcccc6f
commit d5bb68b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -178,6 +178,7 @@ HOCWithTableSettingsFactory.parameters = {
 // ---------------------------------
 const columnsWithSorting = _cloneDeep(columns);
 columnsWithSorting[0].meta = {sort: true};
+columnsWithSorting[2].meta = {sort: true};
 columnsWithSorting[3].meta = {sort: true};
 columnsWithSorting[4].meta = {
     sort: (itemA: DataItem, itemB: DataItem) => Date.parse(itemA.date) - Date.parse(itemB.date),

diff --git a/src/components/Table/__stories__/utils.tsx b/src/components/Table/__stories__/utils.tsx
@@ -7,7 +7,7 @@ import {withTableActions, withTableCopy, withTableSettings, withTableSorting} fr
 
 export interface DataItem {
     name: string;
-    city?: string;
+    location?: {region: string; city?: string};
     phone: string;
     count: number;
     date: string;
@@ -17,29 +17,29 @@ export interface DataItem {
 export const data: DataItem[] = [
     {
         name: 'Nomlanga Compton',
-        city: 'Erli',
+        location: {region: 'Liguria', city: 'Erli'},
         phone: '+7 (923) 737-89-72',
         count: 82,
         date: '2019-03-15',
     },
     {
         name: 'Paul Hatfield',
-        city: 'Campitello di Fassa',
+        location: {region: 'Trentino-Alto Adige/Südtirol', city: 'Campitello di Fassa'},
         phone: '+7 (900) 333-82-02',
         count: 51,
         date: '2019-11-23',
     },
     {
         name: 'Phelan Daniel',
-        city: 'Meugliano',
+        location: {region: 'Piedmont', city: 'Meugliano'},
         phone: '+7 (925) 549-50-23',
         count: 10,
         date: '2019-05-14',
     },
     {
         name: 'Hiram Mayer',
-        city: '',
         phone: '+7 (950) 372-56-84',
+        location: {region: 'Calabria'},
         count: 54,
         date: '2019-03-29',
     },
@@ -71,7 +71,11 @@ export const columns: TableColumnConfig<DataItem>[] = [
         },
     },
     {
-        id: 'city',
+        id: 'location.region',
+        name: 'Region',
+    },
+    {
+        id: 'location.city',
         name: 'City',
     },
     {

diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import _get from 'lodash/get';
 import _memoize from 'lodash/memoize';
 
 import {block} from '../../../utils/cn';
@@ -44,10 +45,10 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
     const displayName = `withTableSorting(${componentName})`;
 
     function defaultCompareFunction(itemA: I, itemB: I, columnId: string) {
-        if (itemA[columnId] === itemB[columnId]) {
+        if (_get(itemA, columnId) === _get(itemB, columnId)) {
             return 0;
         } else {
-            return itemA[columnId] > itemB[columnId] ? 1 : -1;
+            return _get(itemA, columnId) > _get(itemB, columnId) ? 1 : -1;
         }
     }