feat(sort order override): add override to control sort order asc desc (#22)

* chore: ignore node modules and vscode files

* chore: update package lock file

* feat(sort order override): add override to control sort order asc desc

* chore: use shorthand syntax for fragment

Author: Dobby89

.gitignore

@@ -1,2 +1,4 @@
 dist
 coverage
+node_modules
+.vscode

package-lock.json

@@ -99,9 +99,15 @@ const createReducer = <T extends DataType>() => (
       const columnCopy = state.columns.map(column => {
         // if the row was found
         if (action.columnName === column.name) {
-          // if it's undefined, start by setting to ascending, otherwise toggle
-          isAscending =
-            column.sorted.asc === undefined ? true : !column.sorted.asc;
+          if (action.isAscOverride !== undefined) {
+            // force the sort order
+            isAscending = action.isAscOverride;
+          } else {
+            // if it's undefined, start by setting to ascending, otherwise toggle
+            isAscending =
+              column.sorted.asc === undefined ? true : !column.sorted.asc;
+          }
+
           if (column.sort) {
             sortedRows = isAscending
               ? state.rows.sort(column.sort)
@@ -343,8 +349,8 @@ export const useTable = <T extends DataType>(
     dispatch,
     selectRow: (rowId: number) => dispatch({ type: 'SELECT_ROW', rowId }),
     toggleAll: () => dispatch({ type: 'TOGGLE_ALL' }),
-    toggleSort: (columnName: string) =>
-      dispatch({ type: 'TOGGLE_SORT', columnName }),
+    toggleSort: (columnName: string, isAscOverride?: boolean) =>
+      dispatch({ type: 'TOGGLE_SORT', columnName, isAscOverride }),
     setSearchString: (searchString: string) =>
       dispatch({ type: 'SEARCH_STRING', searchString }),
     pagination: state.pagination,

src/hooks.tsx

@@ -52,6 +52,24 @@ const Table = <T extends {}>({
           ))}
         </tbody>
       </table>
+      {headers.map((header, idx) => (
+        <>
+          <button
+            key={idx}
+            data-testid={`toggle-sort-asc-cta-${header.name}`}
+            onClick={() => toggleSort(header.name, true)}
+          >
+            Sort Asc
+          </button>
+          <button
+            key={idx}
+            data-testid={`toggle-sort-desc-cta-${header.name}`}
+            onClick={() => toggleSort(header.name, false)}
+          >
+            Sort Desc
+          </button>
+        </>
+      ))}
       <button
         data-testid="add-row"
         onClick={() =>
@@ -128,6 +146,50 @@ test('Should render a table and preserve sorting when data changes', () => {
   // expect(screen.queryAllByRole('table-row')).toHaveLength(12);
 });
 
+test('Should override sort order', () => {
+  const { columns, data } = makeSimpleData<{
+    firstName: string;
+    lastName: string;
+    birthDate: string;
+  }>();
+
+  const dataToSortDesc = [...data];
+  dataToSortDesc[1].firstName = 'Zippy';
+
+  render(<Table columns={columns} data={dataToSortDesc} />);
+
+  const sortFirstNameDescCta = screen.getByTestId(
+    'toggle-sort-desc-cta-firstName'
+  );
+  const sortFirstNameAscCta = screen.getByTestId(
+    'toggle-sort-asc-cta-firstName'
+  );
+
+  // should be sorted in descending order
+  fireEvent.click(sortFirstNameDescCta);
+  let firstRow = screen.getByTestId('row-0');
+  let { getByText } = within(firstRow);
+  expect(getByText('Zippy')).toBeInTheDocument();
+
+  // should (still) be sorted in descending order
+  fireEvent.click(sortFirstNameDescCta);
+  firstRow = screen.getByTestId('row-0');
+  ({ getByText } = within(firstRow));
+  expect(getByText('Zippy')).toBeInTheDocument();
+
+  // should be sorted in ascending order
+  fireEvent.click(sortFirstNameAscCta);
+  firstRow = screen.getByTestId('row-0');
+  ({ getByText } = within(firstRow));
+  expect(getByText('Bilbo')).toBeInTheDocument();
+
+  // should (still) be sorted in ascending order
+  fireEvent.click(sortFirstNameAscCta);
+  firstRow = screen.getByTestId('row-0');
+  ({ getByText } = within(firstRow));
+  expect(getByText('Bilbo')).toBeInTheDocument();
+});
+
 test('Should sort by dates correctly', () => {
   const { columns, data } = makeSimpleData<{
     firstName: string;

src/test/sorting.spec.tsx

@@ -102,7 +102,7 @@ export interface UseTableReturnType<T> {
   rows: RowType<T>[];
   selectedRows: RowType<T>[];
   dispatch: React.Dispatch<TableAction<T>>;
-  toggleSort: (columnName: string) => void;
+  toggleSort: (columnName: string, isAscOverride?: boolean) => void;
   selectRow: (id: number) => void;
   toggleAll: () => void;
   setSearchString: (searchString: string) => void;
@@ -133,7 +133,7 @@ export type TableState<T extends DataType> = {
 };
 
 export type TableAction<T extends DataType> =
-  | { type: 'TOGGLE_SORT'; columnName: string }
+  | { type: 'TOGGLE_SORT'; columnName: string; isAscOverride?: boolean }
   | { type: 'SELECT_ROW'; rowId: number }
   | { type: 'GLOBAL_FILTER'; filter: (row: RowType<T>[]) => RowType<T>[] }
   | { type: 'SEARCH_STRING'; searchString: string }