Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Table): withTableSorting can get sort value using column's ID written as path #640

Merged
merged 3 commits into from
Jan 22, 2024
Merged

fix(Table): withTableSorting can get sort value using column's ID written as path #640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e4b2755
fix: getting value in default sort func
chervyakovru Apr 19, 2023
ff429ee
docs: add complex ids to Table stories
chervyakovru Jan 20, 2024
5fd6d05
Merge branch 'main' into chervyakovru-patch-1
chervyakovru Jan 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Table/__stories__/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
16 changes: 10 additions & 6 deletions src/components/Table/__stories__/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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',
},
Expand Down Expand Up @@ -71,7 +71,11 @@ export const columns: TableColumnConfig<DataItem>[] = [
},
},
{
id: 'city',
id: 'location.region',
name: 'Region',
},
{
id: 'location.city',
name: 'City',
},
{
Expand Down
5 changes: 3 additions & 2 deletions src/components/Table/hoc/withTableSorting/withTableSorting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';

import _get from 'lodash/get';
import _memoize from 'lodash/memoize';

import {block} from '../../../utils/cn';
Expand Down Expand Up @@ -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)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the problem here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for example:
in the table we use Item with type: {foo: {bar: string}, foo2: string, foo3: string}
for columns Ids we use ['foo.bar', 'foo2', 'foo3']

and right now, if we want sort table by first column, in the if we will get undefined from both items. Adding _get solve this issue

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then it looks like new feature, not a fix

feat(Table): add support for sort by nested properties

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seem it will be useful to add nested properties to stories and tests.

return 0;
} else {
return itemA[columnId] > itemB[columnId] ? 1 : -1;
return _get(itemA, columnId) > _get(itemB, columnId) ? 1 : -1;
}
}

Expand Down
Loading