fix: Use isSortable flag to determine if colBy and rowBy sources are sortable

plugins/pivot/src/js/src/PivotUtils.ts

@@ -245,18 +245,12 @@ export function makeColumnFromSource(
   source: CorePlusDhType.coreplus.pivot.PivotSource,
   index: number
 ): PivotDisplayColumn {
-  const {
-    name,
-    type,
-    // TODO: DH-21047
-    // isSortable,
-    description,
-  } = source;
+  const { name, type, isSortable, description } = source;
   return makeColumn({
     name,
     type,
     index,
-    isSortable: true,
+    isSortable,
     description,
     filter: source.filter.bind(source),
     sort: source.sort.bind(source),

plugins/pivot/src/js/src/PivotWidget.tsx

@@ -4,12 +4,10 @@ import { IrisGrid } from '@deephaven/iris-grid';
 import { LoadingOverlay } from '@deephaven/components';
 import { getErrorMessage } from '@deephaven/utils';
 import { useIrisGridPivotModel } from './useIrisGridPivotModel';
-import {
-  usePivotTableFetch,
-  usePivotMouseHandlers,
-  usePivotRenderer,
-  usePivotTheme,
-} from './usePivotTableUtils';
+import { usePivotTableFetch } from './hooks/usePivotTableFetch';
+import { usePivotMouseHandlers } from './hooks/usePivotMouseHandlers';
+import { usePivotRenderer } from './hooks/usePivotRenderer';
+import { usePivotTheme } from './hooks/usePivotTheme';
 
 export function PivotWidget({
   fetch,

plugins/pivot/src/js/src/hooks/usePivotMouseHandlers.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import type { MouseHandlersProp } from '@deephaven/iris-grid';
+import PivotColumnGroupMouseHandler from '../PivotColumnGroupMouseHandler';
+import PivotSortMouseHandler from '../PivotSortMouseHandler';
+
+/**
+ * Hook that creates mouse handlers for pivot grids
+ * @returns Mouse handlers array
+ */
+export function usePivotMouseHandlers(): MouseHandlersProp {
+  return useMemo(
+    () => [
+      irisGrid => new PivotColumnGroupMouseHandler(irisGrid),
+      irisGrid => new PivotSortMouseHandler(irisGrid),
+    ],
+    []
+  );
+}
+
+export default usePivotMouseHandlers;

plugins/pivot/src/js/src/hooks/usePivotRenderer.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import IrisGridPivotRenderer from '../IrisGridPivotRenderer';
+
+/**
+ * Hook that creates a pivot grid renderer
+ * @returns Pivot grid renderer
+ */
+export function usePivotRenderer(): IrisGridPivotRenderer {
+  return useMemo(() => new IrisGridPivotRenderer(), []);
+}
+
+export default usePivotRenderer;

plugins/pivot/src/js/src/hooks/usePivotTableFetch.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import type { dh } from '@deephaven-enterprise/jsapi-coreplus-types';
+import Log from '@deephaven/log';
+import { isCorePlusDh } from '../PivotUtils';
+
+const log = Log.module('@deephaven/js-plugin-pivot/usePivotTableFetch');
+
+/**
+ * Hook that creates a pivot table from a widget fetch function
+ * @param fetch Function to fetch the widget
+ * @returns Function that fetches and creates the pivot table
+ */
+export function usePivotTableFetch(
+  fetch: () => Promise<dh.Widget>
+): () => Promise<dh.coreplus.pivot.PivotTable> {
+  const api = useApi();
+
+  return useCallback(
+    () =>
+      fetch().then(widget => {
+        log.debug('Pivot fetch result:', widget);
+        if (!isCorePlusDh(api)) {
+          throw new Error('CorePlus is not available');
+        }
+        const pivotTable = new api.coreplus.pivot.PivotTable(widget);
+        log.debug('Created pivot table:', pivotTable);
+        return pivotTable;
+      }),
+    [api, fetch]
+  );
+}
+
+export default usePivotTableFetch;

plugins/pivot/src/js/src/hooks/usePivotTheme.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useTheme } from '@deephaven/components';
+import Log from '@deephaven/log';
+import { getIrisGridPivotTheme } from '../IrisGridPivotTheme';
+
+const log = Log.module('@deephaven/js-plugin-pivot/usePivotTheme');
+
+/**
+ * Hook that gets the pivot theme based on current theme
+ * @returns Pivot theme
+ */
+export function usePivotTheme(): ReturnType<typeof getIrisGridPivotTheme> {
+  const theme = useTheme();
+
+  return useMemo(() => {
+    log.debug('Theme changed, updating pivot theme', theme);
+    return getIrisGridPivotTheme();
+  }, [theme]);
+}
+
+export default usePivotTheme;

plugins/pivot/src/js/src/useHydratePivotGrid.ts

@@ -8,11 +8,9 @@ import { assertNotNull } from '@deephaven/utils';
 import Log from '@deephaven/log';
 import IrisGridPivotModel from './IrisGridPivotModel';
 import { isCorePlusDh } from './PivotUtils';
-import {
-  usePivotMouseHandlers,
-  usePivotRenderer,
-  usePivotTheme,
-} from './usePivotTableUtils';
+import { usePivotMouseHandlers } from './hooks/usePivotMouseHandlers';
+import { usePivotRenderer } from './hooks/usePivotRenderer';
+import { usePivotTheme } from './hooks/usePivotTheme';
 
 const log = Log.module('@deephaven/js-plugin-pivot/useHydratePivotGrid');