fix: apply reversed sorting in a column (#172)

* fix: apply reversed sorting in a column * fix: wrong type applied * fix: sort order variable used * fix: tests fixed * fix: review comments * chore: use sort order type in table header --------- Co-authored-by: Manos Smyrnakis <[email protected]> Co-authored-by: Thrasos Kafasis <[email protected]>
epignosis · Jul 3, 2023 · 893681e · 893681e
1 parent 181f708
commit 893681e
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 18 deletions.
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -23,16 +23,50 @@ export default {
   },
   args: {
     columns: [
-      { accessor: "id", cell: "Code", classNames: ["id"] },
-      { accessor: "description", cell: "Description", classNames: ["description"] },
-      { accessor: "name", cell: "Name", classNames: ["name"] },
-      { accessor: "category", cell: "Category", classNames: ["category"] },
+      { accessor: "id", cell: "Code", classNames: ["id"], sortOrder: "asc" },
+      {
+        accessor: "description",
+        cell: "Description",
+        classNames: ["description"],
+        sortOrder: "asc",
+      },
+      { accessor: "name", cell: "Name", classNames: ["name"], sortOrder: "asc" },
+      { accessor: "category", cell: "Category", classNames: ["category"], sortOrder: "asc" },
+      { accessor: "date", cell: "Date", classNames: ["date"], sortOrder: "desc" },
     ],
     rows: [
-      { id: 271, description: "Test", name: "Test", category: "Test", code: "Test" },
-      { id: 272, description: "Test", name: "Test", category: "Test", code: "Test" },
-      { id: 273, description: "Test", name: "Test", category: "Test", code: "Test" },
-      { id: 274, description: "Test", name: "Test", category: "Test", code: "Test" },
+      {
+        id: 271,
+        description: "Test",
+        name: "Test",
+        category: "Test",
+        code: "Test",
+        date: "27/05/1997",
+      },
+      {
+        id: 272,
+        description: "Test",
+        name: "Test",
+        category: "Test",
+        code: "Test",
+        date: "27/05/1997",
+      },
+      {
+        id: 273,
+        description: "Test",
+        name: "Test",
+        category: "Test",
+        code: "Test",
+        date: "27/05/1997",
+      },
+      {
+        id: 274,
+        description: "Test",
+        name: "Test",
+        category: "Test",
+        code: "Test",
+        date: "27/05/1997",
+      },
     ],
     emptyState: {
       title: "No results found with these criteria",
@@ -69,10 +103,16 @@ export const WithOverflowColumns = Template.bind({});
 
 WithOverflowColumns.args = {
   columns: [
-    { accessor: "id", cell: "Code", classNames: ["id"] },
-    { accessor: "description", cell: "Description", classNames: ["description"], maxWidth: 100 },
-    { accessor: "name", cell: "Name", classNames: ["name"], maxWidth: 100 },
-    { accessor: "category", cell: "Category", classNames: ["category"] },
+    { accessor: "id", cell: "Code", classNames: ["id"], sortOrder: "asc" },
+    {
+      accessor: "description",
+      cell: "Description",
+      classNames: ["description"],
+      maxWidth: 100,
+      sortOrder: "asc",
+    },
+    { accessor: "name", cell: "Name", classNames: ["name"], maxWidth: 100, sortOrder: "asc" },
+    { accessor: "category", cell: "Category", classNames: ["category"], sortOrder: "asc" },
   ],
   rows: [
     {

diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
@@ -24,6 +24,11 @@ const COLUMNS = [
     cell: "Header4",
     classNames: ["header4"],
   },
+  {
+    accessor: "header5",
+    cell: "Header5",
+    classNames: ["header5"],
+  },
 ];
 
 const ROWS = [
@@ -33,27 +38,31 @@ const ROWS = [
     name: "name1",
     category: "category1",
     code: "code1",
+    date: "date1",
   },
   {
     id: "id2",
     description: "description2",
     name: "name2",
     category: "category2",
     code: "code2",
+    date: "date2",
   },
   {
     id: "id3",
     description: "description3",
     name: "name3",
     category: "category3",
     code: "code3",
+    date: "date3",
   },
   {
     id: "id4",
     description: "description4",
     name: "name4",
     category: "category4",
     code: "code4",
+    date: "date4",
   },
 ];
 

diff --git a/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -61,6 +61,19 @@ exports[`<Table> matches snapshot 1`] = `
               </span>
             </div>
           </th>
+          <th
+            class="header-cell header5"
+          >
+            <div
+              aria-expanded="false"
+            >
+              <span>
+                <span>
+                  Header5
+                </span>
+              </span>
+            </div>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -111,6 +124,17 @@ exports[`<Table> matches snapshot 1`] = `
               />
             </div>
           </td>
+          <td
+            style="max-width: auto;"
+          >
+            <div
+              aria-expanded="false"
+            >
+              <span
+                style="max-width: auto;"
+              />
+            </div>
+          </td>
         </tr>
         <tr
           class=""
@@ -159,6 +183,17 @@ exports[`<Table> matches snapshot 1`] = `
               />
             </div>
           </td>
+          <td
+            style="max-width: auto;"
+          >
+            <div
+              aria-expanded="false"
+            >
+              <span
+                style="max-width: auto;"
+              />
+            </div>
+          </td>
         </tr>
         <tr
           class=""
@@ -207,6 +242,17 @@ exports[`<Table> matches snapshot 1`] = `
               />
             </div>
           </td>
+          <td
+            style="max-width: auto;"
+          >
+            <div
+              aria-expanded="false"
+            >
+              <span
+                style="max-width: auto;"
+              />
+            </div>
+          </td>
         </tr>
         <tr
           class=""
@@ -255,6 +301,17 @@ exports[`<Table> matches snapshot 1`] = `
               />
             </div>
           </td>
+          <td
+            style="max-width: auto;"
+          >
+            <div
+              aria-expanded="false"
+            >
+              <span
+                style="max-width: auto;"
+              />
+            </div>
+          </td>
         </tr>
       </tbody>
     </table>

diff --git a/src/components/Table/components/Header.tsx b/src/components/Table/components/Header.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import Checkbox from "../../FormElements/CheckboxGroup/Checkbox";
 import { IconChevronDownSVG, IconChevronUpSVG } from "../../../icons/index";
-import { Sorting } from "../types";
+import { Column, Sorting } from "../types";
 import { ChildrenProps } from "../Table";
 import { Actions } from "../constants";
 import Cell from "./Cell";
@@ -20,14 +20,15 @@ const Header: FC<ChildrenProps> = ({ selectable = false, state, dispatch, onSort
       : dispatch({ type: Actions.removeAll, payload: null });
   };
 
-  const handleSortingChange = (accesor: string): void => {
+  const handleSortingChange = (accesor: string, sortOrder: Column["sortOrder"]): void => {
     if (sorting) {
+      const isDescendingOrder = sortOrder === "desc";
       // new sorting object
       const newSorting: Sorting = {
         column: accesor,
-        // when select new column to sort apply ascending order
+        // when select new column to sort apply default sortOrder
         // when select the same column change the current order
-        isDescending: sorting.column !== accesor ? false : !sorting.isDescending,
+        isDescending: sorting.column !== accesor ? isDescendingOrder : !sorting.isDescending,
       };
 
       dispatch({ type: Actions.sortingChanged, payload: newSorting });
@@ -51,15 +52,15 @@ const Header: FC<ChildrenProps> = ({ selectable = false, state, dispatch, onSort
           </Cell>
         )}
         {columns.map(
-          ({ accessor, cell, hidden, sortableHeader = true, classNames = [] }) =>
+          ({ accessor, cell, hidden, sortableHeader = true, classNames = [], sortOrder }) =>
             !hidden && (
               <Cell
                 as="th"
                 key={accessor}
                 className={`header-cell ${classNames.length > 0 && classNames.join(" ")}`}
                 onClick={(): void => {
                   if (sortableHeader) {
-                    handleSortingChange(accessor);
+                    handleSortingChange(accessor, sortOrder);
                   }
                 }}
               >

diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
@@ -9,6 +9,7 @@ export type Column = {
   classNames?: string[];
   sortableHeader?: boolean;
   maxWidth?: number;
+  sortOrder?: "asc" | "desc";
 };
 
 export type Row = {