added plotly tableview

playground/src/demo.editable.json

@@ -9,6 +9,9 @@
 			"name": "Plotly 3D Mesh Visualizer"
 		},
 		{
+			"dataSrc": "{\r\n    \"kind\":{ \"plotly\": true },\r\n    \"data\": [{\r\n      \"header\": {\r\n         \"values\": [\"H1\", \"H2\", \"H3\"]\r\n      },\r\n      \"cells\": {\r\n         \"values\": [\r\n            [\"A\", \"B\", \"C\"],\r\n            [341319, 281489, 294786],\r\n            [4488916, 3918072, 3892124]\r\n         ]\r\n      },\r\n      \"type\": \"table\"\r\n   }],\r\n   \"layout\": {}\r\n}",
+			"name": "Plotly Table Visualizer"
+		},
 			"dataSrc": "{\r\n    \"kind\": { \"graph\": true },\r\n    \"nodes\": [\r\n        { \"id\": \"1\", \"label\": \"1\" },\r\n        { \"id\": \"2\", \"label\": \"2\", \"color\": \"orange\" },\r\n        { \"id\": \"3\", \"label\": \"3\" }\r\n    ],\r\n    \"edges\": [\r\n        { \"from\": \"1\", \"to\": \"2\", \"color\": \"red\" },\r\n        { \"from\": \"1\", \"to\": \"3\" }\r\n    ]\r\n}",
 			"name": "VisJS Graph Visualizer"
 		},

visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx

@@ -3,6 +3,11 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import Plot from "react-plotly.js";
 
+// needs to be overwriten since the table layout is not defined in @types/plotly.js
+interface PlotlyLayoutAnyTemplate extends Plotly.Layout {
+	template: any;
+}
+
 @observer
 export class PlotlyViewer extends React.Component<{
 	data: Plotly.Data[];
@@ -47,7 +52,7 @@ export class PlotlyViewer extends React.Component<{
 	}
 }
 
-function getLayout(theme: Theme): Partial<Plotly.Layout> {
+function getLayout(theme: Theme): Partial<PlotlyLayoutAnyTemplate> {
 	return {
 		colorway: [
 			"#636efa",
@@ -140,11 +145,19 @@ function getLayout(theme: Theme): Partial<Plotly.Layout> {
 				"--visualizer-plotly-background"
 			),
 		},
+		template: {
+			data: {
+				table: [{
+					cells: { fill: { color: theme.resolveVarToColor("--visualizer-background") } },
+					header: { fill: { color: "rgb(17, 17, 17)" } },
+				}]
+			}
+		}
 	};
 }
 
 // extracted from the plotly website
-const darkLayout: Partial<Plotly.Layout> = {
+const darkLayout: Partial<PlotlyLayoutAnyTemplate> = {
 	colorway: [
 		"#636efa",
 		"#EF553B",

visualization-bundle/src/visualizers/plotly-visualizer/index.tsx

@@ -45,6 +45,12 @@ export const plotlyVisualizer = createVisualizer({
 					x: sOptionalProp(sDatumArr),
 					y: sOptionalProp(sDatumArr),
 					z: sOptionalProp(sDatumArr),
+					cells: sOptionalProp(sOpenObject({
+						values: sArrayOf(sDatumArr),
+					})),
+					header: sOptionalProp(sOpenObject({
+						values: sDatumArr,
+					})),
 					type: sOptionalProp(
 						sUnion([
 							sLiteral("bar"),
@@ -73,6 +79,7 @@ export const plotlyVisualizer = createVisualizer({
 							sLiteral("funnel"),
 							sLiteral("funnelarea"),
 							sLiteral("scattermapbox"),
+							sLiteral("table"),
 						])
 					),
 					mode: sOptionalProp(