feat: Add input filter support to UITable

Author: mattrunyon

plugins/ui/src/js/src/elements/UITable/UITable.tsx

@@ -27,6 +27,7 @@ import {
   useTheme,
   viewStyleProps,
 } from '@deephaven/components';
+import { useGlobalFilters } from '@deephaven/dashboard-core-plugins';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
@@ -527,6 +528,8 @@ export function UITable({
     };
   }, [irisGridServerProps, initialHydratedState]);
 
+  const inputFilters = useGlobalFilters(model?.columns ?? EMPTY_ARRAY);
+
   return model ? (
     <div
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -539,6 +542,7 @@ export function UITable({
         onStateChange={onStateChange}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...mergedIrisGridProps}
+        inputFilters={inputFilters}
       />
     </div>
   ) : null;

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -10,6 +10,7 @@ import { nanoid } from 'nanoid';
 import {
   LayoutUtils,
   PanelEvent,
+  PanelIdContext,
   useLayoutManager,
   useListener,
 } from '@deephaven/dashboard';
@@ -218,52 +219,52 @@ function ReactPanel({
   return portal
     ? ReactDOM.createPortal(
         <ReactPanelContext.Provider value={panelId}>
-          <View
-            height="100%"
-            width="100%"
-            backgroundColor={backgroundColor}
-            padding={padding}
-            paddingTop={paddingTop}
-            paddingBottom={paddingBottom}
-            paddingStart={paddingStart}
-            paddingEnd={paddingEnd}
-            paddingX={paddingX}
-            paddingY={paddingY}
-            overflow={overflow}
-            UNSAFE_style={UNSAFE_style}
-            UNSAFE_className={
-              UNSAFE_className == null
-                ? 'dh-react-panel'
-                : `${UNSAFE_className} dh-react-panel`
-            }
-          >
-            <Flex
-              UNSAFE_className="dh-inner-react-panel"
-              wrap={wrap}
-              direction={direction}
-              justifyContent={justifyContent}
-              alignContent={alignContent}
-              alignItems={alignItems}
-              gap={gap}
-              rowGap={rowGap}
-              columnGap={columnGap}
+          <PanelIdContext.Provider value={panelId}>
+            <View
+              height="100%"
+              width="100%"
+              backgroundColor={backgroundColor}
+              padding={padding}
+              paddingTop={paddingTop}
+              paddingBottom={paddingBottom}
+              paddingStart={paddingStart}
+              paddingEnd={paddingEnd}
+              paddingX={paddingX}
+              paddingY={paddingY}
+              overflow={overflow}
+              UNSAFE_style={UNSAFE_style}
+              UNSAFE_className={
+                UNSAFE_className == null
+                  ? 'dh-react-panel'
+                  : `${UNSAFE_className} dh-react-panel`
+              }
             >
-              <ReactPanelErrorBoundary onReset={onErrorReset}>
-                {/**
-                 * Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
-                 * but we still want the panels to appear so things don't disappear/jump around.
-                 */}
-                <PersistentStateProvider
-                  initialState={initialData}
-                  onChange={onDataChange}
-                >
-                  {React.Children.map(renderedChildren, child =>
-                    React.cloneElement(child as React.ReactElement)
-                  )}
-                </PersistentStateProvider>
-              </ReactPanelErrorBoundary>
-            </Flex>
-          </View>
+              <Flex
+                UNSAFE_className="dh-inner-react-panel"
+                wrap={wrap}
+                direction={direction}
+                justifyContent={justifyContent}
+                alignContent={alignContent}
+                alignItems={alignItems}
+                gap={gap}
+                rowGap={rowGap}
+                columnGap={columnGap}
+              >
+                <ReactPanelErrorBoundary onReset={onErrorReset}>
+                  {/**
+                   * Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
+                   * but we still want the panels to appear so things don't disappear/jump around.
+                   */}
+                  <PersistentStateProvider
+                    initialState={initialData}
+                    onChange={onDataChange}
+                  >
+                    {renderedChildren ?? null}
+                  </PersistentStateProvider>
+                </ReactPanelErrorBoundary>
+              </Flex>
+            </View>
+          </PanelIdContext.Provider>
         </ReactPanelContext.Provider>,
         portal,
         contentKey

plugins/ui/src/js/vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => ({
         '@deephaven/components',
         '@deephaven/console',
         '@deephaven/dashboard',
+        '@deephaven/dashboard-core-plugins',
         '@deephaven/icons',
         '@deephaven/iris-grid',
         '@deephaven/jsapi-bootstrap',