tslab-widgets 0.1.0 → 1.1.0

package/dist/gauge/gauge.js

@@ -3,53 +3,391 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.gauge = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
-// https://www.npmjs.com/package/react-gauge-chart
-function gauge(width = 200, props) {
-    var _a;
+const versions_1 = require("../config/versions");
+function gauge(params) {
     const reactComponentId = `_gauge_widget${Math.random().toString(36).substring(2, 9)}`;
     const html = `
-    <div id="${reactComponentId}"></div>
-    <style type="text/css">
-      g.text-group {
-        text-shadow: 5px 5px 5px #000;
-      }
-    </style>
+    <div id="${reactComponentId}" />
     <script type="module">
-      import React from "https://esm.sh/react@18.3.1";
-      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
-      import GaugeChart from "https://esm.sh/react-gauge-chart@0.5.1";
-      const h = React.createElement;
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      
+      import { Cell, Pie, PieChart, ZIndexLayer } from "${versions_1.CDN_URLS.recharts}";
 
-      const reactJupyterLabComponentId = "${reactComponentId}";
-      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
-      const props = JSON.parse('${JSON.stringify(props)}');
-      const styles = {
-        wrapper: { 
-          width: '${width}px',
-          margin: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          backgroundColor: '#000',
-          border: '1px solid #ccc',
-          color: '#fff',
+      const DEFAULT_SECTIONS = [
+        { value: 25, fill: "#ef4444" },
+        { value: 25, fill: "#f57c0bff" },
+        { value: 25, fill: "#f5be0bff" },
+        { value: 25, fill: "#10b981" },
+      ];
+
+      const TOTAL_VALUE = 100;
+
+      const SIZE_CONFIG = {
+        S: {
+          width: 180,
+          height: 170,
+          chartWidth: 170,
+          chartHeight: 120,
+          baseRadius: 80,
+          fontSize: {
+            value: "20px",
+            unit: "14px",
+            percentage: "11px",
+          },
+          valueDisplayOffset: 32,
+        },
+        M: {
+          width: 220,
+          height: 180,
+          chartWidth: 210,
+          chartHeight: 120,
+          baseRadius: 90,
+          fontSize: {
+            value: "28px",
+            unit: "20px",
+            percentage: "14px",
+          },
+          valueDisplayOffset: 38,
+        },
+        L: {
+          width: 310,
+          height: 230,
+          chartWidth: 300,
+          chartHeight: 175,
+          baseRadius: 140,
+          valueDisplayOffset: 38,
         },
-        title: { fontWeight: 'bold', fontSize: 13, marginBottom: '5px', paddingTop: '8px', whiteSpace: 'pre', color: '#fff' },
-        legend: { fontWeight: 'normal', fontSize: 12, marginBottom: '5px', whiteSpace: 'pre', color: '#dcdcdc' },
       };
-      ReactDOM.render(
-        h('div', { style: styles.wrapper }, [
-          h('div', { style: styles.title }, '${(_a = props.title) !== null && _a !== void 0 ? _a : ''}'),
-          h(GaugeChart, {
-            id: 'rg-${reactComponentId}',
-            colors: ['#D10363', '#4CCD99'],
-            needleColor: '#888',
-            ${props.score ? `formatTextValue: value => '${props.score}',` : ''}
-            ...props,
+
+      function Needle({
+        cx = 0,
+        cy = 0,
+        outerRadius = 0,
+        value = 0,
+        animate = true,
+        baseRadius,
+      }) {
+        const needleBaseCenterX = cx;
+        const needleBaseCenterY = cy;
+        // Calculate angle based on value (0-180 degrees for half circle)
+        const maxValue = TOTAL_VALUE;
+        const calculatedAngle = value
+          ? 180 - Math.min(Math.max((value / maxValue) * 180, 0), 180)
+          : 180;
+
+        // Needle dimensions
+        const needleLength = outerRadius * 0.94;
+        const needleWidth = Math.max(2, baseRadius * 0.04); // Proportional to size
+
+        const needlePath =
+          "M " + needleBaseCenterX.toString() +
+          " " + (needleBaseCenterY - needleWidth / 2).toString() +
+          " L " + (needleBaseCenterX + needleLength).toString() +
+          " " + (needleBaseCenterY - 1).toString() +
+          " L " + (needleBaseCenterX + needleLength).toString() +
+          " " + (needleBaseCenterY + 1).toString() +
+          " L " + needleBaseCenterX.toString() +
+          " " + (needleBaseCenterY + needleWidth / 2).toString() +
+          " Z";
+
+        return h("g", { style: { cursor: "pointer" } }, [
+          h("defs", {}, [
+            // Needle gradient
+            h(
+              "linearGradient",
+              {
+                id: "needleGradient",
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "0%",
+              },
+              [
+                h("stop", { offset: "0%", stopColor: "#778599" }, []),
+                h("stop", { offset: "100%", stopColor: "#4e596b" }, []),
+              ],
+            ),
+            // Needle shadow
+            h(
+              "filter",
+              {
+                id: "needleShadow",
+                x: "-50%",
+                y: "-50%",
+                width: "200%",
+                height: "200%",
+              },
+              [
+                h("feDropShadow", {
+                  dx: "2",
+                  dy: "2",
+                  stdDeviation: "3",
+                  floodOpacity: "0.3",
+                }),
+              ],
+            ),
+            // Needle base gradient
+            h("radialGradient", { id: "needleBaseGradient" }, [
+              h("stop", { offset: "0%", stopColor: "#64748b" }),
+              h("stop", { offset: "100%", stopColor: "#334155" }),
+            ]),
+          ]),
+
+          // Needle base
+          h("circle", {
+            cx: needleBaseCenterX,
+            cy: needleBaseCenterY,
+            r: baseRadius * 0.06,
+            fill: "url(#needleBaseGradient)",
+            stroke: "#475569",
+            strokeWidth: "1.5",
+            filter: "url(#needleShadow)",
+            style: {
+              transition: animate ? "all 0.3s ease" : "none",
+              zIndex: 100,
+            },
+          }),
+
+          // Needle pointer
+          h("path", {
+            d: needlePath,
+            fill: "url(#needleGradient)",
+            stroke: "#334155",
+            strokeWidth: "1",
+            filter: "url(#needleShadow)",
+            style: {
+              transform: "rotate(-" + calculatedAngle.toString() + "deg)",
+              transformOrigin:
+                needleBaseCenterX.toString() +
+                "px " +
+                needleBaseCenterY.toString() +
+                "px",
+              transition: animate
+                ? "transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)"
+                : "none",
+              zIndex: 99,
+            },
+          }),
+
+          // Needle tip accent
+          h("circle", {
+            cx: needleBaseCenterX + needleLength,
+            cy: needleBaseCenterY,
+            r: baseRadius * 0.02,
+            fill: "#334155",
+            stroke: "#94a3b8",
+            strokeWidth: "1",
+            style: {
+              transform: "rotate(-" + calculatedAngle.toString() + "deg)",
+              transformOrigin:
+                needleBaseCenterX.toString() +
+                "px " +
+                needleBaseCenterY.toString() +
+                "px",
+              transition: animate
+                ? "transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)"
+                : "none",
+            },
           }),
-          h('div', { style: styles.legend }, '${props.legend}'),
-        ]),
-        jupyterLabReactComponentContainer
+        ]);
+      }
+
+      function HalfPie({
+        animateSegments = true,
+        baseRadius,
+        centerX,
+        centerY,
+        sections = DEFAULT_SECTIONS,
+        ...pieProps
+      }) {
+        const outerRadius = baseRadius;
+        const innerRadius = baseRadius * 0.7;
+        return h(
+          Pie,
+          {
+            ...pieProps,
+            stroke: "none",
+            dataKey: "value",
+            startAngle: 180,
+            endAngle: 0,
+            data: sections,
+            cx: centerX,
+            cy: centerY,
+            innerRadius,
+            outerRadius,
+            isAnimationActive: animateSegments,
+            animationDuration: 600,
+            animationEasing: "ease-out",
+            style: { marginLeft: 0 },
+          },
+          sections.map((entry, i) =>
+            h(Cell, {
+              key: "cell-" + entry.fill.toString() + "-" + i.toString(),
+              fill: entry.fill,
+              style: {
+                filter: "drop-shadow(0px 2px 3px rgba(0,0,0,0.2))",
+                stroke: "rgba(255,255,255,0.4)",
+                strokeWidth: 0.5,
+              },
+            }),
+          ),
+        );
+      }
+
+      function ValueDisplay({
+        value,
+        totalValue,
+        title,
+        unit = "",
+        centerX,
+        centerY,
+        offsetY,
+      }) {
+        const percentage = ((value / totalValue) * 100).toFixed(1);
+
+        return h(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: (centerY + offsetY).toString() + "px",
+              left: (centerX + 5).toString() + "px",
+              transform: "translate(-50%, -50%)",
+              textAlign: "center",
+              pointerEvents: "none",
+              zIndex: 90,
+            },
+          },
+          [
+            h(
+              "div",
+              {
+                style: {
+                  fontSize: "28px",
+                  fontWeight: "600",
+                  color: "#fff7fa",
+                  lineHeight: "1",
+                  marginBottom: "2px",
+                  fontVariantNumeric: "tabular-nums",
+                  letterSpacing: "-0.5px",
+                },
+              },
+              [
+                value,
+                h(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "20px",
+                      color: "#64748b",
+                      marginLeft: "2px",
+                      fontWeight: "500",
+                    },
+                  },
+                  [unit],
+                ),
+
+                h(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      color: "#64748b",
+                      fontWeight: "500",
+                      marginTop: "2px",
+                    },
+                  },
+                  [
+                    title || percentage.toString() + "% of " + totalValue.toString() + " " + unit,
+                  ],
+                ),
+              ],
+            ),
+          ],
+        );
+      }
+
+      function GaugeWithNeedle({
+        isAnimationActive = true,
+        showValueDisplay = true,
+        currentValue = 0,
+        sections,
+        unit = "",
+        size = "M",
+        title = "",
+      }) {
+        const totalValue = TOTAL_VALUE;
+        const displayValue = currentValue || 0;
+        const config = SIZE_CONFIG[size];
+        const { width, height, chartWidth, chartHeight, baseRadius } = config;
+        const centerX = chartWidth / 2;
+        const centerY = chartHeight * 0.9; // 90% down for visual balance
+
+        return h(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: width.toString() + "px",
+              height: height.toString() + "px",
+              margin: "0 auto",
+              pointerEvents: "none",
+              outline: "none",
+              backgroundColor: "#1F1826",
+            },
+          },
+          [
+            h(PieChart, { width: chartWidth, height: chartHeight }, [
+              h(HalfPie, {
+                isAnimationActive: isAnimationActive,
+                animateSegments: isAnimationActive,
+                baseRadius: baseRadius,
+                centerX: centerX,
+                centerY: centerY - 5,
+                sections: sections,
+              }),
+              h(ZIndexLayer, { zIndex: 800 }, [
+              	h(Needle, {
+              		cx: centerX + 5,
+              		cy: centerY,
+              		outerRadius: baseRadius - 12,
+              		value: displayValue,
+              		animate: isAnimationActive,
+              		baseRadius: baseRadius,
+              	}),
+              ]),
+            ]),
+            showValueDisplay &&
+              h(ValueDisplay, {
+                value: displayValue,
+                totalValue: totalValue,
+                unit: unit,
+                centerX: centerX,
+                centerY: centerY,
+                offsetY: config.valueDisplayOffset,
+                title: title,
+              }),
+          ],
+        );
+      }
+
+      
+      const h = React.createElement;
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+
+      root.render(
+        h('div', {}, [
+          h(GaugeWithNeedle, {
+            sections: ${JSON.stringify(params.sections || undefined)},
+            title: "${params.title}",
+            currentValue: ${params.value},
+            unit: "${params.unit}",
+            size: "${params.size}",
+          })
+        ])
       );
 
     </script>
@@ -57,3 +395,4 @@ function gauge(width = 200, props) {
     tslab.display.html(html);
 }
 exports.gauge = gauge;
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","sourceRoot":"","sources":["../../src/gauge/gauge.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,iDAA8C;AAE9C,SAAS,KAAK,CAAC,MAMd;IACA,MAAM,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACtF,MAAM,IAAI,GAAG;eACC,gBAAgB;;2BAEJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;;0DAEW,mBAAQ,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA0W/B,gBAAgB;2EACe,gBAAgB;;;;;;wBAMnE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,IAAI,SAAS,CAAC;sBAC9C,MAAM,CAAC,KAAK;4BACN,MAAM,CAAC,KAAK;qBACnB,MAAM,CAAC,IAAI;qBACX,MAAM,CAAC,IAAI;;;;;;GAM7B,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,sBAAK"}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { chart } from './chart/chart';
-export { csv } from './csv/csv';
-export { gauge } from './gauge/gauge';
-export { json } from './json/json';
-export type { IPoint } from './chart/plugins/trendLine';
-export type { IVertLineOptions } from './chart/plugins/verticalLine';
-export type { IVolumeProfileData } from './chart/plugins/volumeProfile';
+export { chart } from "./chart/chart";
+export type { IPoint } from "./chart/plugins/trendLine";
+export type { IVertLineOptions } from "./chart/plugins/verticalLine";
+export type { IVolumeProfileData } from "./chart/plugins/volumeProfile";
+export { gauge } from "./gauge/gauge";
+export { json } from "./json/json";
+export { table } from "./table/table";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.json = exports.gauge = exports.csv = exports.chart = void 0;
+exports.table = exports.json = exports.gauge = exports.chart = void 0;
 var chart_1 = require("./chart/chart");
 Object.defineProperty(exports, "chart", { enumerable: true, get: function () { return chart_1.chart; } });
-var csv_1 = require("./csv/csv");
-Object.defineProperty(exports, "csv", { enumerable: true, get: function () { return csv_1.csv; } });
 var gauge_1 = require("./gauge/gauge");
 Object.defineProperty(exports, "gauge", { enumerable: true, get: function () { return gauge_1.gauge; } });
 var json_1 = require("./json/json");
 Object.defineProperty(exports, "json", { enumerable: true, get: function () { return json_1.json; } });
+var table_1 = require("./table/table");
+Object.defineProperty(exports, "table", { enumerable: true, get: function () { return table_1.table; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AAId,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AACb,uCAAsC;AAA7B,8FAAA,KAAK,OAAA"}

package/dist/json/json.d.ts

@@ -4,3 +4,4 @@ declare function json<T extends object>(opts: {
     width?: number;
 }): void;
 export { json };
+//# sourceMappingURL=json.d.ts.map

package/dist/json/json.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":"AAIA,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,QA2BA;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/json/json.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.json = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
 function json(opts) {
     const width = opts.width || 400;
     const height = opts.height || 200;
@@ -13,20 +14,23 @@ function json(opts) {
       style="width:${width + 50}px;height:${height + 50}px;margin:auto;max-height:${height + 50}px;overflow:scroll;">
     </div>
     <script type="module">
-      import React from "https://esm.sh/react@18.3.1";
-      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
-      import ReactJsonTree from "https://esm.sh/react-json-tree@0.15.0";
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import {JSONTree} from "${versions_1.CDN_URLS.reactJsonTree}";
 
       const reactJupyterLabComponentId = "${reactComponentId}";
       const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
       const args = JSON.parse('${JSON.stringify(opts.data)}');
-      ReactDOM.render(React.createElement(
-        ReactJsonTree,
+
+      const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+      root.render(React.createElement(
+        JSONTree,
         { data: args },
-      ), jupyterLabReactComponentContainer);
+      ));
 
     </script>
   `;
     tslab.display.html(html);
 }
 exports.json = json;
+//# sourceMappingURL=json.js.map

package/dist/json/json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,SAAS,IAAI,CAAmB,IAI/B;IACA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAClC,MAAM,gBAAgB,GAAG,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACrF,MAAM,IAAI,GAAG;;YAEF,gBAAgB;qBACP,KAAK,GAAG,EAAE,aAAa,MAAM,GAAG,EAAE,6BAA6B,MAAM,GAAG,EAAE;;;2BAGpE,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;gCACf,mBAAQ,CAAC,aAAa;;4CAEV,gBAAgB;2EACe,gBAAgB;iCAC1D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;GASvD,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,oBAAI"}

package/dist/table/table.d.ts

@@ -0,0 +1,9 @@
+import type { GridOptions } from "ag-grid-community";
+type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
+declare function table(params: {
+    options: RequiredFields<GridOptions, "rowData">;
+    height?: number;
+    width?: number;
+}): void;
+export { table };
+//# sourceMappingURL=table.d.ts.map

package/dist/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,KAAK,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAErE,iBAAS,KAAK,CAAC,MAAM,EAAE;IACtB,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,QA4CA;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/table/table.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.table = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
+function table(params) {
+    const width = params.width || 550;
+    const height = params.height || 330;
+    const reactComponentId = `_table_widget${Math.random().toString(36).substring(2, 9)}`;
+    if (!params.options.columnDefs &&
+        params.options.rowData &&
+        params.options.rowData.length > 0) {
+        params.options.columnDefs = Object.keys(params.options.rowData[0]).map((key) => ({ field: key, filter: true, sortable: true }));
+    }
+    const html = `
+    <div id="${reactComponentId}" />
+
+    <link rel="stylesheet" href="${versions_1.CDN_URLS.agGridStyles}" />
+    <link rel="stylesheet" href="${versions_1.CDN_URLS.agGridThemeAlpine}" />
+
+    <script type="module">
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      
+      import { AllCommunityModule, ModuleRegistry, themeBalham, colorSchemeDarkBlue } from "${versions_1.CDN_URLS.agGridCommunity}";
+      ModuleRegistry.registerModules([AllCommunityModule]);
+      
+      import { AgGridReact } from "${versions_1.CDN_URLS.agGridReact}";
+
+      const h = React.createElement;
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const options = JSON.parse('${JSON.stringify(params.options)}');
+      const theme = themeBalham.withPart(colorSchemeDarkBlue);
+      const gridOptions = { theme, ...options };
+      const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+      root.render(
+        h('div', { style: { width: ${width}, height: ${height}, margin: 'auto' }}, [
+          h(AgGridReact, { gridOptions })
+        ])
+      );
+
+    </script>
+  `;
+    tslab.display.html(html);
+}
+exports.table = table;
+//# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/table/table.ts"],"names":[],"mappings":";;;;AACA,qDAA+B;AAC/B,iDAA8C;AAI9C,SAAS,KAAK,CAAC,MAId;IACA,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,GAAG,CAAC;IAClC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC;IACpC,MAAM,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACtF,IACC,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU;QAC1B,MAAM,CAAC,OAAO,CAAC,OAAO;QACtB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAChC;QACD,MAAM,CAAC,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CACrE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACvD,CAAC;KACF;IACD,MAAM,IAAI,GAAG;eACC,gBAAgB;;mCAEI,mBAAQ,CAAC,YAAY;mCACrB,mBAAQ,CAAC,iBAAiB;;;2BAGlC,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;;8FAE+C,mBAAQ,CAAC,eAAe;;;qCAGjF,mBAAQ,CAAC,WAAW;;;4CAGb,gBAAgB;2EACe,gBAAgB;oCACvD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;qCAK7B,KAAK,aAAa,MAAM;;;;;;GAM1D,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,sBAAK"}