Json table (#904)

* enable json display in TableNext

* rename JSONTableNext

vuu-ui/packages/vuu-data/src/data-source.ts

@@ -485,7 +485,7 @@ export interface DataSource extends EventEmitter<DataSourceEvents> {
   applyEdit: DataSourceEditHandler;
   closeTreeNode: (key: string, cascade?: boolean) => void;
   columns: string[];
-  config: DataSourceConfig | undefined;
+  config: DataSourceConfig;
   suspend?: () => void;
   resume?: () => void;
   enable?: () => void;

vuu-ui/packages/vuu-data/src/json-data-source.ts

@@ -25,7 +25,9 @@ import type {
   DataSourceEvents,
   SubscribeCallback,
   SubscribeProps,
+  WithFullConfig,
 } from "./data-source";
+import { vanillaConfig } from "./data-source";
 import {
   MenuRpcResponse,
   VuuUIMessageInRPCEditReject,
@@ -59,7 +61,7 @@ export class JsonDataSource
   private visibleRows: DataSourceRow[] = [];
 
   #aggregations: VuuAggregation[] = [];
-  #columns: string[] = [];
+  #config: WithFullConfig = vanillaConfig;
   #data: DataSourceRow[];
   #filter: DataSourceFilter = { filter: "" };
   #groupBy: VuuGroupBy = [];
@@ -100,7 +102,7 @@ export class JsonDataSource
       this.#aggregations = aggregations;
     }
     if (this.columnDescriptors) {
-      this.#columns = this.columnDescriptors.map((c) => c.name);
+      this.#config.columns = this.columnDescriptors.map((c) => c.name);
     }
     if (filter) {
       this.#filter = filter;
@@ -134,7 +136,7 @@ export class JsonDataSource
       this.#aggregations = aggregations;
     }
     if (columns) {
-      this.#columns = columns;
+      this.#config.columns = columns;
     }
     if (filter) {
       this.#filter = filter;
@@ -162,7 +164,7 @@ export class JsonDataSource
       aggregations: this.#aggregations,
       type: "subscribed",
       clientViewportId: this.viewport,
-      columns: this.#columns,
+      columns: this.#config.columns,
       filter: this.#filter,
       groupBy: this.#groupBy,
       range: this.#range,
@@ -240,8 +242,6 @@ export class JsonDataSource
       size: this.visibleRows.length,
       type: "viewport-update",
     });
-
-    console.log(this.expandedRows);
   }
 
   closeTreeNode(key: string, cascade = false) {
@@ -258,7 +258,7 @@ export class JsonDataSource
   }
 
   get config() {
-    return undefined;
+    return this.#config;
   }
 
   get selectedRowsCount() {
@@ -295,12 +295,15 @@ export class JsonDataSource
   }
 
   get columns() {
-    return this.#columns;
+    return this.#config.columns;
   }
 
   set columns(columns: string[]) {
-    this.#columns = columns;
-    console.log(`ArrayDataSource setColumns ${columns.join(",")}`);
+    // TODO use setter
+    this.#config = {
+      ...this.#config,
+      columns,
+    };
   }
 
   get aggregations() {
@@ -327,7 +330,6 @@ export class JsonDataSource
   set filter(filter: DataSourceFilter) {
     // TODO should we wait until server ACK before we assign #sort ?
     this.#filter = filter;
-    console.log(`RemoteDataSource ${JSON.stringify(filter)}`);
   }
 
   get groupBy() {
@@ -402,9 +404,6 @@ export class JsonDataSource
       );
     }
 
-    const sections = rowKey.split("|").slice(1);
-    console.log({ sections, parentRow });
-
     return [];
   }
 

vuu-ui/packages/vuu-datatable/src/json-table/JsonTable.tsx

@@ -1,29 +1,34 @@
 import { TableProps } from "@finos/vuu-table";
 import { JsonData } from "@finos/vuu-utils";
-import { Table } from "@finos/vuu-table";
+import { TableNext } from "@finos/vuu-table";
 import { JsonDataSource } from "@finos/vuu-data";
 import { useMemo } from "react";
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { TableConfig } from "@finos/vuu-datagrid-types";
 
 export interface JsonTableProps
   extends Omit<TableProps, "config" | "dataSource"> {
+  config: Pick<
+    TableConfig,
+    "columns" | "columnSeparators" | "rowSeparators" | "zebraStripes"
+  >;
   source: JsonData | undefined;
 }
 
 export const JsonTable = ({
+  config,
   source = { "": "" },
   ...tableProps
 }: JsonTableProps) => {
-  const [dataSource, tableConfig] = useMemo((): [
-    JsonDataSource,
-    { columns: ColumnDescriptor[] }
-  ] => {
+  const [dataSource, tableConfig] = useMemo<
+    [JsonDataSource, JsonTableProps["config"]]
+  >(() => {
     const ds = new JsonDataSource({
       data: source,
     });
 
-    return [ds, { columns: ds.columnDescriptors }];
-  }, [source]);
-
-  return <Table {...tableProps} config={tableConfig} dataSource={dataSource} />;
+    return [ds, { ...config, columns: ds.columnDescriptors }];
+  }, [config, source]);
+  return (
+    <TableNext {...tableProps} config={tableConfig} dataSource={dataSource} />
+  );
 };

vuu-ui/packages/vuu-table/src/table-next/Row.tsx

@@ -100,7 +100,6 @@ export const Row = memo(
         {columns.filter(notHidden).map((column) => {
           const isGroup = isGroupColumn(column);
           const isJsonCell = isJsonColumn(column);
-
           const Cell = isGroup ? TableGroupCell : TableCell;
 
           return (

vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx

@@ -80,7 +80,6 @@ export const TableNext = forwardRef(function TableNext(
     rowHeight,
     selectionModel,
   });
-
   const getStyle = () => {
     return {
       ...styleProp,

vuu-ui/packages/vuu-table/src/table-next/table-cell/TableCell.tsx

@@ -1,7 +1,7 @@
 import { TableCellProps } from "@finos/vuu-datagrid-types";
 import { metadataKeys } from "@finos/vuu-utils";
 import { VuuColumnDataType } from "packages/vuu-protocol-types";
-import { useCallback } from "react";
+import { MouseEventHandler, useCallback } from "react";
 import { useCell } from "../useCell";
 
 import "./TableCell.css";
@@ -12,6 +12,7 @@ const classBase = "vuuTableNextCell";
 export const TableCell = ({
   column,
   columnMap,
+  onClick,
   onDataEdited,
   row,
 }: TableCellProps) => {
@@ -28,8 +29,20 @@ export const TableCell = ({
     [name, onDataEdited, row]
   );
 
+  const handleClick = useCallback<MouseEventHandler>(
+    (evt) => {
+      onClick?.(evt, column);
+    },
+    [column, onClick]
+  );
+
   return (
-    <div className={className} role="cell" style={style}>
+    <div
+      className={className}
+      onClick={onClick ? handleClick : undefined}
+      role="cell"
+      style={style}
+    >
       {CellRenderer ? (
         <CellRenderer
           column={column}

vuu-ui/packages/vuu-table/src/table-next/useTableNext.ts

@@ -204,9 +204,6 @@ export const useTable = ({
 
   const handleConfigChanged = useCallback(
     (tableConfig: TableConfig) => {
-      console.log(`useTableNext handleConfigChanged`, {
-        tableConfig,
-      });
       dispatchColumnAction({
         type: "init",
         tableConfig,
@@ -219,9 +216,6 @@ export const useTable = ({
 
   const handleDataSourceConfigChanged = useCallback(
     (dataSourceConfig: DataSourceConfig) => {
-      console.log("config changed", {
-        dataSourceConfig,
-      });
       dataSource.config = {
         ...dataSource.config,
         ...dataSourceConfig,
@@ -232,9 +226,6 @@ export const useTable = ({
 
   const handleCreateCalculatedColumn = useCallback(
     (column: ColumnDescriptor) => {
-      console.log(`useTableNext handleCreateCalculatedColumn`, {
-        column,
-      });
       dataSource.columns = dataSource.columns.concat(column.name);
       const newTableConfig = addColumn(tableConfig, column);
       dispatchColumnAction({

vuu-ui/packages/vuu-table/src/table/Table.tsx

@@ -61,6 +61,7 @@ export const Table = ({
     width,
   });
 
+  console.log({ tableProps });
   const style = {
     ...outerSize,
     "--content-height": `${viewportMeasurements.contentHeight}px`,

vuu-ui/packages/vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx

@@ -51,6 +51,7 @@ const JsonCell = ({ column, row }: TableCellProps) => {
   }
 };
 
+console.log("register JsonCell");
 registerComponent("json", JsonCell, "cell-renderer", {
   description: "JSON formatter",
   label: "JSON formatter",

vuu-ui/showcase/src/examples/Table/JsonTable.examples.tsx → vuu-ui/showcase/src/examples/DataTable/JsonTable.examples.tsx

@@ -56,7 +56,11 @@ export const DefaultJsonTable = () => {
         renderBufferSize={20}
         selectionModel="none"
         width={500}
-        zebraStripes
+        config={{
+          columnSeparators: true,
+          rowSeparators: true,
+          zebraStripes: true,
+        }}
       />
     </>
   );

vuu-ui/showcase/src/examples/DataTable/index.ts

@@ -1 +1,2 @@
 export * as FilterTable from "./FilterTable.examples";
+export * as JsonTable from "./JsonTable.examples";

vuu-ui/showcase/src/examples/Table/index.ts

@@ -1,6 +1,5 @@
 export * as TableArrayData from "./TableArrayData.examples";
 export * as TableVuuData from "./TableVuuData.examples";
-export * as JsonTable from "./JsonTable.examples";
 export * as TableExtras from "./TableExtras.examples";
 export * as TableList from "./TableList.examples";
 export * as TableNext from "./TableNext.examples";