ListView table support (deephaven#1909)

packages/components/src/spectrum/listView/ListView.tsx

@@ -3,6 +3,11 @@ import {
   ListView as SpectrumListView,
   SpectrumListViewProps,
 } from '@adobe/react-spectrum';
+import { EMPTY_FUNCTION } from '@deephaven/utils';
+import {
+  extractSpectrumHTMLElement,
+  useOnScrollRef,
+} from '@deephaven/react-hooks';
 import cl from 'classnames';
 import {
   ItemElementOrPrimitive,
@@ -33,6 +38,9 @@ export type ListViewProps = {
    */
   onChange?: (keys: 'all' | Set<ItemKey>) => void;
 
+  /** Handler that is called when the picker is scrolled. */
+  onScroll?: (event: Event) => void;
+
   /**
    * Handler that is called when the selection changes.
    * @deprecated Use `onChange` instead
@@ -56,6 +64,7 @@ export function ListView({
   disabledKeys,
   UNSAFE_className,
   onChange,
+  onScroll = EMPTY_FUNCTION,
   onSelectionChange,
   ...spectrumListViewProps
 }: ListViewProps): JSX.Element {
@@ -84,10 +93,13 @@ export function ListView({
     onChange: onChange ?? onSelectionChange,
   });
 
+  const scrollRef = useOnScrollRef(onScroll, extractSpectrumHTMLElement);
+
   return (
     <SpectrumListView
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...spectrumListViewProps}
+      ref={scrollRef}
       UNSAFE_className={cl('dh-list-view', UNSAFE_className)}
       items={normalizedItems}
       selectedKeys={selectedStringKeys}

packages/components/src/spectrum/picker/Picker.tsx

@@ -151,7 +151,6 @@ export function Picker({
     <SpectrumPicker
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...spectrumPickerProps}
-      // The `ref` prop type defined by React Spectrum is incorrect here
       ref={scrollRef as unknown as DOMRef<HTMLDivElement>}
       onOpenChange={onOpenChangeInternal}
       UNSAFE_className={cl('dh-picker', UNSAFE_className)}

packages/jsapi-components/src/spectrum/ListView.tsx

@@ -0,0 +1,62 @@
+import {
+  ListView as ListViewBase,
+  ListViewProps as ListViewPropsBase,
+  NormalizedItemData,
+} from '@deephaven/components';
+import { dh as DhType } from '@deephaven/jsapi-types';
+import { Settings } from '@deephaven/jsapi-utils';
+import { LIST_VIEW_ROW_HEIGHT } from '@deephaven/utils';
+import useFormatter from '../useFormatter';
+import useViewportData from '../useViewportData';
+import { useItemRowDeserializer } from './utils';
+
+export interface ListViewProps extends Omit<ListViewPropsBase, 'children'> {
+  table: DhType.Table;
+  /* The column of values to use as item keys. Defaults to the first column. */
+  keyColumn?: string;
+  /* The column of values to display as primary text. Defaults to the `keyColumn` value. */
+  labelColumn?: string;
+
+  // TODO #1890 : descriptionColumn, iconColumn
+
+  settings?: Settings;
+}
+
+export function ListView({
+  table,
+  keyColumn: keyColumnName,
+  labelColumn: labelColumnName,
+  settings,
+  ...props
+}: ListViewProps): JSX.Element {
+  const { getFormattedString: formatValue } = useFormatter(settings);
+
+  const deserializeRow = useItemRowDeserializer({
+    table,
+    keyColumnName,
+    labelColumnName,
+    formatValue,
+  });
+
+  const { viewportData, onScroll } = useViewportData<
+    NormalizedItemData,
+    DhType.Table
+  >({
+    reuseItemsOnTableResize: true,
+    table,
+    itemHeight: LIST_VIEW_ROW_HEIGHT,
+    deserializeRow,
+  });
+
+  return (
+    <ListViewBase
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      onScroll={onScroll}
+    >
+      {viewportData.items}
+    </ListViewBase>
+  );
+}
+
+export default ListView;

packages/jsapi-components/src/spectrum/index.ts

@@ -1 +1,2 @@
+export * from './ListView';
 export * from './Picker';