From 1df5d56fec332b952b964179245490758d7ad43e Mon Sep 17 00:00:00 2001 From: imikulec Date: Tue, 2 Jan 2024 18:11:47 +0100 Subject: [PATCH] #148 - Simplify sorting logic for WithDefaultAscendingSortByName Story --- storybook/src/data-display/DataTable.mdx | 10 ++++++++-- storybook/src/data-display/DataTable.stories.tsx | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/storybook/src/data-display/DataTable.mdx b/storybook/src/data-display/DataTable.mdx index 83dde61..634a2e5 100644 --- a/storybook/src/data-display/DataTable.mdx +++ b/storybook/src/data-display/DataTable.mdx @@ -92,8 +92,14 @@ Here is an example utilizing the `useMemo` hook. This specific logic is applied const sortedData = React.useMemo(() => { return [...smallData].sort((a, b) => { - const result = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }); - return dataTableState.sortBy[0]?.sortDirection === "DESCENDING" ? -result : result; + const sortInfo = dataTableState.sortBy[0] ?? { column: "", sortDirection: "ASCENDING" }; + + if (a[sortInfo.column] !== undefined && b[sortInfo.column] !== undefined) { + const result = a[sortInfo.column].localeCompare(b[sortInfo.column]); + return sortInfo.sortDirection === "DESCENDING" ? -result : result; + } + + return 0; }); }, [dataTableState.sortBy]); ``` diff --git a/storybook/src/data-display/DataTable.stories.tsx b/storybook/src/data-display/DataTable.stories.tsx index 5e151c3..70ba2b2 100644 --- a/storybook/src/data-display/DataTable.stories.tsx +++ b/storybook/src/data-display/DataTable.stories.tsx @@ -828,8 +828,14 @@ export const WithDefaultAscendingSortByName = () => { const sortedData = React.useMemo(() => { return [...smallData].sort((a, b) => { - const result = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }); - return dataTableState.sortBy[0]?.sortDirection === "DESCENDING" ? -result : result; + const sortInfo = dataTableState.sortBy[0] ?? { column: "", sortDirection: "ASCENDING" }; + + if (a[sortInfo.column] !== undefined && b[sortInfo.column] !== undefined) { + const result = a[sortInfo.column].localeCompare(b[sortInfo.column]); + return sortInfo.sortDirection === "DESCENDING" ? -result : result; + } + + return 0; }); }, [dataTableState.sortBy]);