Add HTML Renderer

examples/HtmlRenderer.ipynb

@@ -0,0 +1,124 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "f2b527c8-901e-488f-b08e-ae3daa4cf4a1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import json\n",
+    "\n",
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "from bqplot import  ColorScale\n",
+    "\n",
+    "from ipydatagrid import Expr, DataGrid, TextRenderer, BarRenderer, HtmlRenderer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "3d2537f5-ae31-4ccb-bc74-700b08f85bcc",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "n = 5\n",
+    "\n",
+    "df = pd.DataFrame(\n",
+    "    {\n",
+    "        \"Value 1\": [1, 2, 3, 4, 5],\n",
+    "        \"Value 2\": '<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>',\n",
+    "        \"Value 3\": '<p><strong style=\"color: olive\">Bold Text</strong></p><p><em style=\"background-color: yellow\">Italic Text</em></p><p><u>Underlined Text</u></p><p><s>Strikethrough Text</s></p>'\n",
+    "    }\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 11,
+   "id": "e6ec592c-5811-487c-bd8a-b2a3b14e892e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "text_renderer = TextRenderer(\n",
+    "    text_color=\"black\", background_color=ColorScale(min=-5, max=5)\n",
+    ")\n",
+    "\n",
+    "html_renderer = HtmlRenderer(text_color='blue', background_color='aliceblue', horizontal_alignment='right', vertical_alignment='bottom')\n",
+    "\n",
+    "renderers = {\n",
+    "    \"Value 1\": text_renderer,\n",
+    "    \"Value 2\": html_renderer,\n",
+    "    \"Value 3\": html_renderer,\n",
+    "   \n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "id": "9113bdb2-92a4-46ec-bcf0-ad350616fcea",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "grid = DataGrid(df, renderers=renderers,base_row_size=140, base_column_size=100)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "ea4d76ec-9efe-41c3-84cb-399c46b53f02",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "750bcc6f601d4d79876995609422dd1e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "DataGrid(auto_fit_params={'area': 'all', 'padding': 30, 'numCols': None}, base_column_size=100, base_row_size=…"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "grid"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "dd2dfa48-2624-4258-b2fa-dc759adf20e0",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

ipydatagrid/__init__.py

@@ -6,6 +6,7 @@
     BarRenderer,
     CellRenderer,
     Expr,
+    HtmlRenderer,
     HyperlinkRenderer,
     ImageRenderer,
     TextRenderer,
@@ -37,6 +38,7 @@ def _jupyter_labextension_paths():
     "HyperlinkRenderer",
     "ImageRenderer",
     "TextRenderer",
+    "HtmlRenderer",
     "VegaExpr",
     "DataGrid",
     "SelectionHelper",

ipydatagrid/cellrenderer.py

@@ -193,3 +193,44 @@ class ImageRenderer(CellRenderer):
         allow_none=True,
         default_value="100%",
     ).tag(sync=True, **widget_serialization)
+
+
+class HtmlRenderer(CellRenderer):
+    _model_name = Unicode("HtmlRendererModel").tag(sync=True)
+    _view_name = Unicode("HtmlRendererView").tag(sync=True)
+
+    font = Union(
+        (Unicode(), Instance(VegaExpr), Instance(Scale)),
+        default_value="12px sans-serif",
+    ).tag(sync=True, **widget_serialization)
+    text_color = Union(
+        (Color(), Instance(VegaExpr), Instance(ColorScale)),
+    ).tag(sync=True, **widget_serialization)
+    background_color = Union(
+        (Color(), Instance(VegaExpr), Instance(ColorScale)),
+    ).tag(sync=True, **widget_serialization)
+    placeholder = Unicode().tag(sync=True)
+    vertical_alignment = Union(
+        (
+            Enum(values=["top", "center", "bottom"]),
+            Instance(VegaExpr),
+            Instance(Scale),
+        ),
+        default_value="center",
+    ).tag(sync=True, **widget_serialization)
+    horizontal_alignment = Union(
+        (
+            Enum(values=["left", "center", "right"]),
+            Instance(VegaExpr),
+            Instance(Scale),
+        ),
+        default_value="left",
+    ).tag(sync=True, **widget_serialization)
+
+    @default("text_color")
+    def _default_text_color(self):
+        return Expr("default_value")
+
+    @default("background_color")
+    def _default_background_color(self):
+        return Expr("default_value")

js/cellrenderer.ts

@@ -1,23 +1,22 @@
 // Copyright (c) Bloomberg
 // Distributed under the terms of the Modified BSD License.
 
-import * as _ from 'underscore';
-
 const d3Format: any = require('d3-format');
 const d3TimeFormat: any = require('d3-time-format');
 
 import {
+  AsyncCellRenderer,
   CellRenderer,
-  TextRenderer,
   HyperlinkRenderer,
   ImageRenderer,
+  TextRenderer,
 } from '@lumino/datagrid';
 
 import {
   Dict,
+  ISerializers,
   WidgetModel,
   WidgetView,
-  ISerializers,
   resolvePromisesDict,
   unpack_models,
 } from '@jupyter-widgets/base';
@@ -28,6 +27,7 @@ import { BarRenderer } from './core/barrenderer';
 
 import { VegaExprView } from './vegaexpr';
 
+import { HtmlRenderer, exportedClass } from './core/htmlRenderer';
 import { Scalar, Theme } from './utils';
 
 // Temporary, will be removed when the scales are exported from bqplot
@@ -524,3 +524,91 @@ export class ImageRendererView extends CellRendererView {
 
   model: ImageRendererModel;
 }
+
+export class HtmlRendererModel extends CellRendererModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: HtmlRendererModel.model_name,
+      _view_name: HtmlRendererModel.view_name,
+      font: '12px sans-serif',
+      placeholder: '...',
+      text_color: null,
+      background_color: null,
+      vertical_alignment: 'center',
+      horizontal_alignment: 'left',
+    };
+  }
+
+  get_attrs(): ICellRendererAttribute[] {
+    return [
+      { name: 'font', phosphorName: 'font', defaultValue: '12px sans-serif' },
+      { name: 'placeholder', phosphorName: 'placeholder', defaultValue: '...' },
+      {
+        name: 'text_color',
+        phosphorName: 'textColor',
+        defaultValue: Theme.getFontColor(),
+      },
+      {
+        name: 'background_color',
+        phosphorName: 'backgroundColor',
+        defaultValue: Theme.getBackgroundColor(),
+      },
+      {
+        name: 'vertical_alignment',
+        phosphorName: 'verticalAlignment',
+        defaultValue: 'center',
+      },
+      {
+        name: 'horizontal_alignment',
+        phosphorName: 'horizontalAlignment',
+        defaultValue: 'left',
+      },
+    ];
+  }
+
+  static serializers: ISerializers = {
+    ...CellRendererModel.serializers,
+    font: { deserialize: unpack_models as any },
+    placeholder: { deserialize: unpack_models as any },
+    text_color: { deserialize: unpack_models as any },
+    background_color: { deserialize: unpack_models as any },
+    vertical_alignment: { deserialize: unpack_models as any },
+    horizontal_alignment: { deserialize: unpack_models as any },
+  };
+
+  static model_name = 'HtmlRendererModel';
+  static view_name = 'HtmlRendererView';
+}
+
+export class HtmlRendererView extends CellRendererView {
+  createRenderer(options: HtmlRenderer.IOptions) {
+    // Workaround for Jupyter Lab 3 / ipywidget 7 compatibility
+    let htmRenderer: any;
+
+    if (!AsyncCellRenderer) {
+      htmRenderer = new TextRenderer({
+        format: (config) => {
+          return 'AsyncCellRenderer not available. Check that you are using JupyterLab>=4.1.';
+        },
+        wrapText: true,
+      });
+    } else {
+      htmRenderer = new exportedClass({
+        ...options,
+      });
+      htmRenderer.imageLoaded.connect(() => {
+        setTimeout(() => {
+          this.trigger('renderer-needs-update');
+        }, 0);
+      });
+    }
+
+    return htmRenderer;
+  }
+
+  // Workaround for Jupyter Lab 3 / ipywidget 7 compatibility
+  renderer: any;
+
+  model: HtmlRendererModel;
+}