feat: Add column_display_names to ui.table (#1008)

Fixes #653. Adds `column_display_names` prop to `ui.table` which allows
users to rename a column for display purposes. The original column name
is still shown in column statistics. The column widths should be
initially sized based on the display name.

Can test with this Python

```py
from deephaven import ui
import deephaven.plot.express as dx

t = ui.table(
    dx.data.stocks(),
    column_display_names={
        "Price": "Price (USD)",
        "Side": "Buy/Sell"
    }
)
```

plugins/ui/docs/components/table.md

@@ -284,6 +284,23 @@ t = ui.table(
 
 ![Example of column order and visibility](../_assets/table_column_order.png)
 
+## Column display names
+
+You can set custom display names for columns using the `column_display_names` prop. The `column_display_names` prop takes a dictionary where the key is the column name and the value is the display name. The display name can be any string, so this can be used to show a user-friendly name that does not adhere to column naming rules.
+
+```py
+from deephaven import ui
+import deephaven.plot.express as dx
+
+t = ui.table(
+    dx.data.stocks(),
+    column_display_names={
+        "Price": "Price (USD)",
+        "Side": "Buy/Sell"
+    }
+)
+```
+
 ## Grouping columns
 
 Columns can be grouped visually using the `column_groups` prop. Columns in a column group are moved so they are next to each other, and a header spanning all columns in the group is added. Columns can be rearranged within a group, but they cannot be moved outside of the group without using the table sidebar menu.

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

@@ -125,6 +125,8 @@ class table(Element):
         column_groups: Columns to group together by default. The groups will be shown in the table header.
             Group names must be unique within the column and group names.
             Groups may be nested by providing the group name as a child of another group.
+        column_display_names: A dictionary of column names to an alternate display name.
+            E.g. {"column1": "Column 1", "column2": "C2"}.
         density: The density of the data displayed in the table.
             One of "compact", "regular", or "spacious".
             If not provided, the app default will be used.
@@ -202,6 +204,7 @@ def __init__(
         frozen_columns: list[ColumnName] | None = None,
         hidden_columns: list[ColumnName] | None = None,
         column_groups: list[ColumnGroup] | None = None,
+        column_display_names: dict[ColumnName, str] | None = None,
         density: Literal["compact", "regular", "spacious"] | None = None,
         context_menu: (
             ResolvableContextMenuItem | list[ResolvableContextMenuItem] | None

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

@@ -65,6 +65,7 @@ export function UITable({
   frozenColumns,
   hiddenColumns,
   columnGroups,
+  columnDisplayNames: columnDisplayNamesProp = {},
   density,
   contextMenu,
   contextHeaderMenu,
@@ -131,6 +132,7 @@ export function UITable({
 
   // TODO: #982 respond to prop changes here
   const [format] = useState(formatProp != null ? ensureArray(formatProp) : []);
+  const [columnDisplayNames] = useState(columnDisplayNamesProp ?? {});
   // TODO: #981 move databars to format and rewire for databar support
   const [databars] = useState(databarsProp ?? []);
 
@@ -230,7 +232,8 @@ export function UITable({
           table,
           databars,
           layoutHints,
-          format
+          format,
+          columnDisplayNames
         );
         if (!isCancelled) {
           setError(null);
@@ -251,7 +254,7 @@ export function UITable({
     return () => {
       isCancelled = true;
     };
-  }, [databars, dh, exportedTable, layoutHints, format]);
+  }, [databars, dh, exportedTable, layoutHints, format, columnDisplayNames]);
 
   const modelColumns = model?.columns ?? EMPTY_ARRAY;
 

plugins/ui/src/js/src/elements/UITable/UITableModel.ts

@@ -27,7 +27,8 @@ export async function makeUiTableModel(
   table: DhType.Table,
   databars: DatabarConfig[],
   layoutHints: UITableLayoutHints,
-  format: FormattingRule[]
+  format: FormattingRule[],
+  displayNameMap: Record<string, string>
 ): Promise<UITableModel> {
   const joinColumns: string[] = [];
   const totalsOperationMap: Record<string, string[]> = {};
@@ -113,6 +114,7 @@ export async function makeUiTableModel(
     table: uiTableProxy,
     databars,
     format,
+    displayNameMap,
   });
 }
 
@@ -150,6 +152,8 @@ class UITableModel extends IrisGridModel {
    */
   private colorMap: Map<string, string> = new Map();
 
+  private displayNameMap: Record<string, string>;
+
   private format: FormattingRule[];
 
   constructor({
@@ -158,17 +162,20 @@ class UITableModel extends IrisGridModel {
     table,
     databars,
     format,
+    displayNameMap,
   }: {
     dh: typeof DhType;
     model: IrisGridModel;
     table: DhType.Table;
     databars: DatabarConfig[];
     format: FormattingRule[];
+    displayNameMap: Record<string, string>;
   }) {
     super(dh);
 
     this.model = model;
     this.table = table;
+    this.displayNameMap = displayNameMap;
 
     this.databars = new Map<ColumnName, DatabarConfig>();
     databars.forEach(databar => {
@@ -220,6 +227,21 @@ class UITableModel extends IrisGridModel {
     });
   }
 
+  override textForColumnHeader(
+    column: ModelIndex,
+    depth?: number
+  ): string | undefined {
+    const originalText = this.model.textForColumnHeader(column, depth);
+    if (originalText == null) {
+      return originalText;
+    }
+
+    if (originalText in this.displayNameMap) {
+      return this.displayNameMap[originalText];
+    }
+    return originalText;
+  }
+
   setColorMap(colorMap: Map<string, string>): void {
     this.colorMap = colorMap;
   }

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

@@ -69,6 +69,7 @@ export type UITableProps = StyleProps & {
   frozenColumns?: string[];
   hiddenColumns?: string[];
   columnGroups?: dh.ColumnGroup[];
+  columnDisplayNames?: Record<ColumnName, string>;
   density?: 'compact' | 'regular' | 'spacious';
   contextMenu?: ResolvableUIContextItem | ResolvableUIContextItem[];
   contextHeaderMenu?: ResolvableUIContextItem | ResolvableUIContextItem[];

tests/app.d/ui_table.py

@@ -3,6 +3,7 @@
 import deephaven.plot.express as dx
 
 _t = empty_table(100).update(["x = i", "y = sin(i)"])
+_stocks = dx.data.stocks(False)
 
 t_alignment = ui.table(
     _t,
@@ -46,10 +47,15 @@
 )
 
 t_value_format = ui.table(
-    dx.data.stocks(False),
+    _stocks,
     format_=[
         ui.TableFormat(value="0.00"),
         ui.TableFormat(cols="Timestamp", value="MM/dd/yyyy"),
         ui.TableFormat(cols=["Price", "Dollars"], value="$0.00"),
     ],
 )
+
+t_display_names = ui.table(
+    _stocks,
+    column_display_names={"Price": "Price (USD)", "Dollars": "$$$"},
+)

tests/ui_table.spec.ts

@@ -11,6 +11,7 @@ test.describe('UI flex components', () => {
     't_color',
     't_priority',
     't_value_format',
+    't_display_names',
   ].forEach(name => {
     test(name, async ({ page }) => {
       await gotoPage(page, '');