add setSelection to tableControl + add onOrderByChange and onSelectio…

…nChange to Hightable
hyparam · Jan 8, 2025 · 6025e59 · 6025e59
1 parent 2c1e1d2
commit 6025e59
Showing 1 changed file with 47 additions and 34 deletions.
diff --git a/src/HighTable.tsx b/src/HighTable.tsx
@@ -17,6 +17,7 @@ export {
   wrapPromise,
 } from './dataframe.js'
 export { rowCache } from './rowCache.js'
+export type { Selection } from './selection.js'
 export { HighTable }
 
 const rowHeight = 33 // row height px
@@ -29,6 +30,8 @@ interface TableProps {
   focus?: boolean // focus table on mount? (default true)
   tableControl?: TableControl // control the table from outside
   selectable?: boolean // enable row selection (default false)
+  onOrderByChange?: (orderBy: string | undefined) => void
+  onSelectionChange?: (selection: Selection) => void
   onDoubleClickCell?: (event: React.MouseEvent, col: number, row: number) => void
   onMouseDownCell?: (event: React.MouseEvent, col: number, row: number) => void
   onError?: (error: Error) => void
@@ -53,39 +56,6 @@ type Action =
   | { type: 'DATA_CHANGED' }
   | { type: 'SET_SELECTION', selection: Selection, anchor?: number }
 
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-  case 'SET_ROWS':
-    return {
-      ...state,
-      startIndex: action.start,
-      rows: action.rows,
-      invalidate: false,
-      hasCompleteRow: state.hasCompleteRow || action.hasCompleteRow,
-    }
-  case 'SET_COLUMN_WIDTH': {
-    const columnWidths = [...state.columnWidths]
-    columnWidths[action.columnIndex] = action.columnWidth
-    return { ...state, columnWidths }
-  }
-  case 'SET_COLUMN_WIDTHS':
-    return { ...state, columnWidths: action.columnWidths }
-  case 'SET_ORDER': {
-    if (state.orderBy === action.orderBy) {
-      return state
-    } else {
-      return { ...state, orderBy: action.orderBy, rows: [], selection: [], anchor: undefined }
-    }
-  }
-  case 'DATA_CHANGED':
-    return { ...state, invalidate: true, hasCompleteRow: false, selection: [], anchor: undefined }
-  case 'SET_SELECTION':
-    return { ...state, selection: action.selection, anchor: action.anchor }
-  default:
-    return state
-  }
-}
-
 const initialState: State = {
   columnWidths: [],
   startIndex: 0,
@@ -106,10 +76,49 @@ export default function HighTable({
   focus = true,
   tableControl,
   selectable = false,
+  onOrderByChange,
+  onSelectionChange,
   onDoubleClickCell,
   onMouseDownCell,
   onError = console.error,
 }: TableProps) {
+  function reducer(state: State, action: Action): State {
+    switch (action.type) {
+    case 'SET_ROWS':
+      return {
+        ...state,
+        startIndex: action.start,
+        rows: action.rows,
+        invalidate: false,
+        hasCompleteRow: state.hasCompleteRow || action.hasCompleteRow,
+      }
+    case 'SET_COLUMN_WIDTH': {
+      const columnWidths = [...state.columnWidths]
+      columnWidths[action.columnIndex] = action.columnWidth
+      return { ...state, columnWidths }
+    }
+    case 'SET_COLUMN_WIDTHS':
+      return { ...state, columnWidths: action.columnWidths }
+    case 'SET_ORDER': {
+      onOrderByChange?.(action.orderBy)
+      onSelectionChange?.([])
+      if (state.orderBy === action.orderBy) {
+        return state
+      } else {
+        return { ...state, orderBy: action.orderBy, rows: [], selection: [], anchor: undefined }
+      }
+    }
+    case 'DATA_CHANGED':
+      onSelectionChange?.([])
+      return { ...state, invalidate: true, hasCompleteRow: false, selection: [], anchor: undefined }
+    case 'SET_SELECTION':
+      onSelectionChange?.(action.selection)
+      return { ...state, selection: action.selection, anchor: action.anchor }
+    default:
+      return state
+    }
+  }
+
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const { anchor, columnWidths, startIndex, rows, orderBy, invalidate, hasCompleteRow, selection } = state
@@ -231,7 +240,7 @@ export default function HighTable({
     return () => {
       tableControl?.publisher.unsubscribe(dispatch)
     }
-  }, [tableControl])
+  }, [tableControl, dispatch])
 
   /**
    * Validate row length
@@ -423,6 +432,7 @@ interface PubSub<T> extends Publisher<T> {
 export interface TableControl {
   publisher: Publisher<Action>
   setOrderBy: (columnName: string) => void
+  setSelection: (selection: Selection) => void
 }
 
 function createPubSub<T>(): PubSub<T> {
@@ -449,5 +459,8 @@ export function createTableControl(): TableControl {
     setOrderBy(columnName: string) {
       publisher.publish({ type: 'SET_ORDER', orderBy: columnName })
     },
+    setSelection(selection: Selection) {
+      publisher.publish({ type: 'SET_SELECTION', selection })
+    },
   }
 }