From 355b107f28149d7690026da371daf789b3f8530e Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Tue, 1 Oct 2024 18:25:02 -0500 Subject: [PATCH] feat: Add standard style props to UI table --- .../ui/src/deephaven/ui/components/table.py | 72 ++++++++++++++++++- .../src/js/src/elements/UITable/UITable.tsx | 10 ++- .../js/src/elements/UITable/UITableUtils.tsx | 4 +- plugins/ui/src/js/src/styles.scss | 9 ++- 4 files changed, 89 insertions(+), 6 deletions(-) diff --git a/plugins/ui/src/deephaven/ui/components/table.py b/plugins/ui/src/deephaven/ui/components/table.py index 96f274528..98a276535 100644 --- a/plugins/ui/src/deephaven/ui/components/table.py +++ b/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. """ diff --git a/plugins/ui/src/js/src/elements/UITable/UITable.tsx b/plugins/ui/src/js/src/elements/UITable/UITable.tsx index 200ce30a8..2950b0f5c 100644 --- a/plugins/ui/src/js/src/elements/UITable/UITable.tsx +++ b/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(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 ? ( -
+
setIrisGrid(ref)} model={model} diff --git a/plugins/ui/src/js/src/elements/UITable/UITableUtils.tsx b/plugins/ui/src/js/src/elements/UITable/UITableUtils.tsx index d3303975a..028367511 100644 --- a/plugins/ui/src/js/src/elements/UITable/UITableUtils.tsx +++ b/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< diff --git a/plugins/ui/src/js/src/styles.scss b/plugins/ui/src/js/src/styles.scss index 344867081..5e9158130 100644 --- a/plugins/ui/src/js/src/styles.scss +++ b/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) {