Export useOrderedRows hook

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 } from '../../types';
+import type { CompositeProps, Order } from '../../types';
 import { downcastRef } from '../../util/typing';
 import { ArrowDownIcon, ArrowUpIcon, SpinnerSpokesIcon } from '../icons';
 import { Button } from '../input';
@@ -22,11 +22,6 @@ export type TableColumn<Field> = {
   classes?: string;
 };
 
-export type Order<Field> = {
-  field: Field;
-  direction: 'ascending' | 'descending';
-};
-
 type ComponentProps<Row> = {
   rows: Row[];
   columns: TableColumn<keyof Row>[];

src/hooks/use-ordered-rows.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'preact/hooks';
+
+import type { Order } from '../types';
+
+export function useOrderedRows<Row>(rows: Row[], order?: Order<keyof Row>) {
+  return useMemo(() => {
+    if (!order) {
+      return rows;
+    }
+
+    return [...rows].sort((a, b) => {
+      if (a[order.field] === b[order.field]) {
+        return 0;
+      }
+
+      if (order.direction === 'ascending') {
+        return a[order.field] > b[order.field] ? 1 : -1;
+      }
+
+      return a[order.field] > b[order.field] ? -1 : 1;
+    });
+  }, [order, rows]);
+}

src/index.ts

@@ -3,6 +3,7 @@ export { useArrowKeyNavigation } from './hooks/use-arrow-key-navigation';
 export { useClickAway } from './hooks/use-click-away';
 export { useFocusAway } from './hooks/use-focus-away';
 export { useKeyPress } from './hooks/use-key-press';
+export { useOrderedRows } from './hooks/use-ordered-rows';
 export { useStableCallback } from './hooks/use-stable-callback';
 export { useSyncedRef } from './hooks/use-synced-ref';
 export { useToastMessages } from './hooks/use-toast-messages';
@@ -74,6 +75,7 @@ export type {
   BaseProps,
   CompositeProps,
   IconComponent,
+  Order,
   PresentationalProps,
   TransitionComponent,
 } from './types';

src/pattern-library/components/patterns/data/DataTablePage.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
 
-import { Button, DataTable, type DataTableProps, Scroll } from '../../../../';
-import type { Order } from '../../../../components/data/DataTable';
+import { Button, DataTable, Scroll } from '../../../../';
+import type { DataTableProps, Order } from '../../../../';
+import { useOrderedRows } from '../../../../hooks/use-ordered-rows';
 import Library from '../../Library';
 import { nabokovNovels } from '../samples';
 import type { NabokovNovel } from '../samples';
@@ -15,29 +16,6 @@ const nabokovColumns = [
 
 type SimpleNabokovNovel = Omit<NabokovNovel, 'translatedTitle'>;
 
-function useOrderedRows(
-  rows: SimpleNabokovNovel[],
-  order?: Order<keyof SimpleNabokovNovel>,
-) {
-  return useMemo(() => {
-    if (!order) {
-      return rows;
-    }
-
-    return [...rows].sort((a, b) => {
-      if (a[order.field] === b[order.field]) {
-        return 0;
-      }
-
-      if (order.direction === 'ascending') {
-        return a[order.field] > b[order.field] ? 1 : -1;
-      }
-
-      return a[order.field] > b[order.field] ? -1 : 1;
-    });
-  }, [order, rows]);
-}
-
 function ClientOrderableDataTable({
   rows,
   // By default, all columns are orderable

src/types.ts

@@ -34,3 +34,8 @@ export type TransitionComponent = FunctionComponent<{
   direction?: 'in' | 'out';
   onTransitionEnd?: (direction: 'in' | 'out') => void;
 }>;
+
+export type Order<Field> = {
+  field: Field;
+  direction: 'ascending' | 'descending';
+};