#148 - Simplify sorting logic for WithDefaultAscendingSortByName Story

croz-ltd · Jan 3, 2024 · 1df5d56 · 1df5d56
1 parent 0cbb884
commit 1df5d56
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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]);