docs/notebooks/demo-ipyaggrid-javascript.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a309447d",
   "metadata": {},
   "source": [
    "# Use javascript in `grid_options` by using `__js__:` prefix"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "614ccb50",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyaggrid import Grid\n",
    "\n",
    "grid = Grid(\n",
    "    css_rules=\"\"\"\n",
    "        .ag-cell-not-inline-editing.price-high {\n",
    "          background-color: red;\n",
    "          color: white;\n",
    "        }\n",
    "        .my-tooltip {\n",
    "          background-color: white;\n",
    "          border: 1px solid black;\n",
    "          padding: 8px;\n",
    "        }\n",
    "    \"\"\",\n",
    "    grid_data=[\n",
    "        {\"make\": \"Toyota\", \"model\": \"Celica\", \"price\": 35000},\n",
    "        {\"make\": \"Ford\", \"model\": \"Mondeo\", \"price\": 32000},\n",
    "        {\"make\": \"Porsche\", \"model\": \"Boxster\", \"price\": 72000},\n",
    "    ],\n",
    "    grid_options={\n",
    "        'columnDefs': [\n",
    "            {\"headerName\": \"Make\", \"field\": \"make\", \"editable\": True},\n",
    "            {\"headerName\": \"Model\", \"field\": \"model\", \"editable\": True},\n",
    "            {\"headerName\": \"Price\", \"field\": \"price\", \"editable\": True, 'type': 'numericColumn',\n",
    "             'cellClass': \"\"\"function(params) {\n",
    "               return params.value >32000 ? 'price-high' : '';\n",
    "             }\"\"\",\n",
    "             \"tooltipField\": 'price',\n",
    "             \"tooltipComponent\": \"\"\"__js__: class {\n",
    "               init(params) {\n",
    "                 const eGui = this.eGui = document.createElement('div');\n",
    "                   \n",
    "                 if (params.value > 32000) {\n",
    "                   eGui.classList.add('my-tooltip');\n",
    "                   eGui.innerHTML = 'value to high';                           \n",
    "                 }\n",
    "               }\n",
    "               \n",
    "               getGui() {\n",
    "                 return this.eGui;\n",
    "               }\n",
    "             }\"\"\",\n",
    "             }\n",
    "        ],\n",
    "        'tooltipShowDelay': 0,\n",
    "        'tooltipHideDelay': 2000,\n",
    "    },\n",
    ")\n",
    "\n",
    "grid"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2ffb64ae",
   "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.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}