diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx index 4f04259a2..6cbdb95ba 100644 --- 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 index 8ecedd41b..7d06e2b4f 100644 --- 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[] = [ }, }, { - 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 index 994fd13b0..e83937e2f 100644 --- 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( 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; } }