feat: Add standard style props to UI table

plugins/ui/src/deephaven/ui/components/table.py

@@ -3,6 +3,7 @@
 
 from deephaven.table import Table
 from ..elements import UITable
+from .types import AlignSelf, DimensionValue, JustifySelf, LayoutFlex, Position
 from ..types import (
     CellPressCallback,
     ColumnGroup,
@@ -43,6 +44,41 @@ def table(
     ) = None,
     databars: list[DatabarConfig] | None = None,
     key: str | None = None,
+    flex: LayoutFlex | None = None,
+    flex_grow: float | None = None,
+    flex_shrink: float | None = None,
+    flex_basis: DimensionValue | None = None,
+    align_self: AlignSelf | None = None,
+    justify_self: JustifySelf | None = None,
+    order: int | None = None,
+    grid_area: str | None = None,
+    grid_row: str | None = None,
+    grid_row_start: str | None = None,
+    grid_row_end: str | None = None,
+    grid_column: str | None = None,
+    grid_column_start: str | None = None,
+    grid_column_end: str | None = None,
+    margin: DimensionValue | None = None,
+    margin_top: DimensionValue | None = None,
+    margin_bottom: DimensionValue | None = None,
+    margin_start: DimensionValue | None = None,
+    margin_end: DimensionValue | None = None,
+    margin_x: DimensionValue | None = None,
+    margin_y: DimensionValue | None = None,
+    width: DimensionValue | None = None,
+    height: DimensionValue | None = None,
+    min_width: DimensionValue | None = None,
+    min_height: DimensionValue | None = None,
+    max_width: DimensionValue | None = None,
+    max_height: DimensionValue | None = None,
+    position: Position | None = None,
+    top: DimensionValue | None = None,
+    bottom: DimensionValue | None = None,
+    start: DimensionValue | None = None,
+    end: DimensionValue | None = None,
+    left: DimensionValue | None = None,
+    right: DimensionValue | None = None,
+    z_index: int | None = None,
 ) -> UITable:
     """
     Customization to how a table is displayed, how it behaves, and listen to UI events.
@@ -88,7 +124,41 @@ def table(
             May also be a function that receives the column header data and returns the context menu items or None.
         databars: Databars are experimental and will be moved to column_formatting in the future.
         key: A unique identifier used by React to render elements in a list.
-
+        flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
+        flex_grow: When used in a flex layout, specifies how much the element will grow to fit the space available.
+        flex_shrink: When used in a flex layout, specifies how much the element will shrink to fit the space available.
+        flex_basis: When used in a flex layout, specifies the initial size of the element.
+        align_self: Overrides the align_items property of a flex or grid container.
+        justify_self: Specifies how the element is justified inside a flex or grid container.
+        order: The layout order for the element within a flex or grid container.
+        grid_area: The name of the grid area to place the element in.
+        grid_row: The name of the grid row to place the element in.
+        grid_row_start: The name of the grid row to start the element in.
+        grid_row_end: The name of the grid row to end the element in.
+        grid_column: The name of the grid column to place the element in.
+        grid_column_start: The name of the grid column to start the element in.
+        grid_column_end: The name of the grid column to end the element in.
+        margin: The margin to apply around the element.
+        margin_top: The margin to apply above the element.
+        margin_bottom: The margin to apply below the element.
+        margin_start: The margin to apply before the element.
+        margin_end: The margin to apply after the element.
+        margin_x: The margin to apply to the left and right of the element.
+        margin_y: The margin to apply to the top and bottom of the element.
+        width: The width of the element.
+        height: The height of the element.
+        min_width: The minimum width of the element.
+        min_height: The minimum height of the element.
+        max_width: The maximum width of the element.
+        max_height: The maximum height of the element.
+        position: Specifies how the element is positioned.
+        top: The distance from the top of the containing element.
+        bottom: The distance from the bottom of the containing element.
+        start: The distance from the start of the containing element.
+        end: The distance from the end of the containing element.
+        left: The distance from the left of the containing element.
+        right: The distance from the right of the containing element.
+        z_index: The stack order of the element.
     Returns:
         The rendered Table.
     """

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import classNames from 'classnames';
 import {
   DehydratedQuickFilter,
   IrisGrid,
@@ -11,6 +12,7 @@ import {
 import {
   colorValueStyle,
   resolveCssVariablesInRecord,
+  useStyleProps,
   useTheme,
 } from '@deephaven/components';
 import { useApi } from '@deephaven/jsapi-bootstrap';
@@ -50,8 +52,10 @@ export function UITable({
   contextMenu,
   contextHeaderMenu,
   databars: databarsProp,
+  ...userStyleProps
 }: UITableProps): JSX.Element | null {
   const [error, setError] = useState<unknown>(null);
+  const { styleProps } = useStyleProps(userStyleProps);
 
   if (error != null) {
     // Re-throw the error so that the error boundary can catch it
@@ -261,7 +265,11 @@ export function UITable({
   useEffect(() => () => model?.close(), [model]);
 
   return model ? (
-    <div className="ui-object-container">
+    <div
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...styleProps}
+      className={classNames('ui-table-container', styleProps.className)}
+    >
       <IrisGrid
         ref={ref => setIrisGrid(ref)}
         model={model}

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

@@ -1,3 +1,4 @@
+import { type StyleProps } from '@react-types/shared';
 import type { dh } from '@deephaven/jsapi-types';
 import {
   ColumnName,
@@ -72,7 +73,7 @@ export type DatabarConfig = {
   markers?: { value: number | string; color?: string }[];
 };
 
-export type UITableProps = {
+export type UITableProps = StyleProps & {
   table: dh.WidgetExportedObject;
   onCellPress?: (data: CellData) => void;
   onCellDoublePress?: (data: CellData) => void;
@@ -96,6 +97,7 @@ export type UITableProps = {
   contextMenu?: ResolvableUIContextItem | ResolvableUIContextItem[];
   contextHeaderMenu?: ResolvableUIContextItem | ResolvableUIContextItem[];
   databars?: DatabarConfig[];
+  [key: string]: unknown; // Needed because StyleProps is an interface which removes the implicit index signature of the type
 };
 
 export type UITableNode = Required<

plugins/ui/src/js/src/styles.scss

@@ -7,8 +7,11 @@
   overflow: hidden;
 }
 
-.ui-object-container {
-  display: contents;
+.ui-table-container {
+  height: -webkit-fill-available;
+  height: -moz-available;
+  width: -webkit-fill-available;
+  width: -moz-available;
   position: relative;
 }
 
@@ -58,7 +61,7 @@
   &:has(.dh-inner-react-panel > .iris-grid:only-child),
   &:has(
       .dh-inner-react-panel
-        > .ui-object-container:only-child
+        > .ui-table-container:only-child
         > .iris-grid:only-child
     ),
   &:has(.dh-inner-react-panel > .chart-wrapper:only-child) {