Allow to provide initial order per DataTable column

Author: acelaya

src/components/data/DataTable.tsx

@@ -4,7 +4,7 @@ import { useCallback, useContext, useEffect, useMemo } from 'preact/hooks';
 import { useArrowKeyNavigation } from '../../hooks/use-arrow-key-navigation';
 import { useStableCallback } from '../../hooks/use-stable-callback';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
-import type { CompositeProps, Order } from '../../types';
+import type { CompositeProps, Order, OrderDirection } from '../../types';
 import { downcastRef } from '../../util/typing';
 import { ArrowDownIcon, ArrowUpIcon, SpinnerSpokesIcon } from '../icons';
 import { Button } from '../input';
@@ -67,6 +67,11 @@ type ComponentProps<Row> = Pick<
   /** Current sort order */
   order?: Order<keyof Row>;
 
+  /**
+   * The initial order direction to set when a column becomes the ordered one.
+   */
+  initialColumnsOrderDir?: Partial<Record<keyof Row, OrderDirection>>;
+
   /**
    * Callback invoked when user clicks a column header to change the sort order.
    * When a header is clicked, if that's not the active order, it is set with
@@ -98,9 +103,13 @@ function defaultRenderItem<Row>(r: Row, field: keyof Row): ComponentChildren {
 function calculateNewOrder<T extends string | number | symbol>(
   newField: T,
   prevOrder?: Order<T>,
+  initialColumnsOrderDir?: Partial<Record<T, OrderDirection>>,
 ): Order<T> {
   if (newField !== prevOrder?.field) {
-    return { field: newField, direction: 'ascending' };
+    return {
+      field: newField,
+      direction: initialColumnsOrderDir?.[newField] ?? 'ascending',
+    };
   }
 
   const newDirection =
@@ -151,6 +160,7 @@ export default function DataTable<Row>({
   order,
   onOrderChange,
   orderableColumns = [],
+  initialColumnsOrderDir,
 
   // Forwarded to Table
   title,
@@ -164,10 +174,14 @@ export default function DataTable<Row>({
   const scrollContext = useContext(ScrollContext);
   const updateOrder = useCallback(
     (newField: keyof Row) => {
-      const newOrder = calculateNewOrder(newField, order);
+      const newOrder = calculateNewOrder(
+        newField,
+        order,
+        initialColumnsOrderDir,
+      );
       onOrderChange?.(newOrder);
     },
-    [onOrderChange, order],
+    [initialColumnsOrderDir, onOrderChange, order],
   );
 
   const noContent = loading || (!rows.length && emptyMessage);

src/types.ts

@@ -59,7 +59,9 @@ export type TransitionComponent = FunctionComponent<{
   onTransitionEnd?: (direction: 'in' | 'out') => void;
 }>;
 
+export type OrderDirection = 'ascending' | 'descending';
+
 export type Order<Field extends string | number | symbol> = {
   field: Field;
-  direction: 'ascending' | 'descending';
+  direction: OrderDirection;
 };