Add HyperlinkRenderer usage example

Signed-off-by: Itay Dafna <[email protected]>

Author: ibdafna

examples/HyperlinkRenderer.ipynb

@@ -0,0 +1,86 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "fabulous-environment",
+   "metadata": {},
+   "source": [
+    "## `ipydatagrid`\n",
+    "### HyperlinkRenderer\n",
+    "\n",
+    "A renderer which allows for rendering text-based clickable links as cells in your DataGrid. It takes two parameters:\n",
+    "\n",
+    "1. `url`: A Vega Expression function which points to a full URL (with the http(s) prefix)\n",
+    "2. `urlName`: A Vega Expression function which points to a friendly URL display name\n",
+    "\n",
+    "**To preserve default cell selections behaviour, a link can only be opened by clicking whilst holding the `Ctrl` or `Command` key pressed.**\n",
+    "\n",
+    "The `HyperlinkRenderer` can be styled using all properties supported by the `TextRenderer`!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 36,
+   "id": "separate-mattress",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "36f9e008917b4d6d96c9329d1bc3dd54",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "DataGrid(base_column_size=200, corner_renderer=None, default_renderer=TextRenderer(), header_renderer=None, la…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import pandas as pd\n",
+    "import numpy as np\n",
+    "from ipydatagrid import VegaExpr, DataGrid, TextRenderer, HyperlinkRenderer\n",
+    "\n",
+    "df = pd.DataFrame(\n",
+    "    data={\"Name\":[\"Tech at Bloomberg\", \"Twitter Handle\"], \n",
+    "          \"Link\":[[\"https://www.techatbloomberg.com/\", \"Tech at BBG Website\"]]})\n",
+    "\n",
+    "link_renderer = HyperlinkRenderer(\n",
+    "    url = VegaExpr(\"cell.value[0]\"),\n",
+    "    url_name = VegaExpr(\"cell.value[1]\"),\n",
+    "    background_color=\"moccasin\",\n",
+    "    text_color=\"blue\",\n",
+    "    font='bold 14px Arial, sans-serif'\n",
+    ")\n",
+    "\n",
+    "\n",
+    "grid = DataGrid(df, layout={\"height\":\"120px\"}, base_column_size=200, renderers={'Link':link_renderer})\n",
+    "grid"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.9.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}