docs/notebooks/doc-builder.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Build Documentation Notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Run this notebook** to create:\n",
    "+ the code snippets in the documentation - in folder `./code-snippets`\n",
    "+ the vue components displaying examples in the documentation - in folder `./example-vue-components`\n",
    "\n",
    "These files are then copied in the folder `docs/content` and read during the VuePress build.\n",
    "\n",
    "**Table of contents** : \n",
    "\n",
    "- 1 - [Sample Data](#1---Sample-Data)\n",
    "- 2 - [Build Examples](#2---Build-Examples)\n",
    "    - 2.1 - [Simple Grid](#2.1---Simple-Grid)\n",
    "    - 2.2 - [Grid Size](#2.2---Grid-Size)\n",
    "    - 2.3 - [Themes](#2.3---Themes)\n",
    "    - 2.4 - [Custom CSS](#2.4---Custom-CSS)\n",
    "    - 2.5 - [Export to CSV/Excel](#2.5---Export-to-CSV/Excel)\n",
    "    - 2.6 - [Quick Filter](#2.6---Quick-Filter)\n",
    "    - 2.7 - [Delete by Keypress](#2.7---Delete-by-Keypress)\n",
    "    - 2.8 - [Edit Data](#2.8---Edit-Data)\n",
    "    - 2.9 - [Index](#2.9---Index)\n",
    "    - 2.10 - [MultiIndex](#2.10---MultiIndex)\n",
    "    - 2.11 - [MultiOptions](#2.11---MultiOptions)\n",
    "    - 2.12 - [Columns Size](#2.12---Columns-Size)\n",
    "    - 2.13 - [Collapse/Expand](#2.13---Collapse-/-Expand-All)\n",
    "    - 2.14 - [Highlight Cells](#2.14---Highlight-Cells)\n",
    "    - 2.15 - [Custom Menu 1](#2.15---Custom-Menu-1)\n",
    "    - 2.16 - [Custom Menu 2](#2.16---Custom-Menu-2)\n",
    "    - 2.17 - [Paste from Excel](#2.17---Paste-from-Excel)\n",
    "    - 2.18 - [Export Data](#2.18---Export-Data)\n",
    "    - 2.19 - [Fancy Rendering](#2.19---Fancy-Rendering)\n",
    "    - 2.20 - [Status Bar](#2.20---Status-Bar)\n",
    "- 3 - [Build Files](#3---Build-Examples-Files)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import shutil\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import urllib.request as ur\n",
    "import simplejson as json\n",
    "from ipyaggrid import Grid\n",
    "from ipyaggrid import get_license\n",
    "\n",
    "from ipyaggrid.magics import CustomMagics"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "folder_code = 'code-snippets'\n",
    "if not os.path.exists(folder_code):\n",
    "    os.makedirs(folder_code)\n",
    "    \n",
    "try:\n",
    "    folder_code_copy = os.path.join('..', 'content', 'code-snippets')\n",
    "    if not os.path.exists(folder_code_copy):\n",
    "        os.makedirs(folder_code_copy)\n",
    "except:\n",
    "    pass\n",
    "\n",
    "folder_vue = 'example-vue-components'\n",
    "if not os.path.exists(folder_vue):\n",
    "    os.makedirs(folder_vue)\n",
    "    \n",
    "try:\n",
    "    folder_code_copy = os.path.join('..', 'content', '.vuepress', 'components')\n",
    "    if not os.path.exists(folder_code_copy):\n",
    "        os.makedirs(folder_code_copy)\n",
    "except:\n",
    "    pass\n",
    "    \n",
    "grid_export = []"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1 - Sample Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/var/folders/wq/sl9cqpsj3w76ywvkf3nbp24c0000gn/T/ipykernel_53926/3985297711.py:31: DeprecationWarning: `np.float` is a deprecated alias for the builtin `float`. To silence this warning, use `float` by itself. Doing this will not modify any behavior and is safe. If you specifically wanted the numpy scalar type, use `np.float64` here.\n",
      "Deprecated in NumPy 1.20; for more details and guidance: https://numpy.org/devdocs/release/1.20.0-notes.html#deprecations\n",
      "  data = np.arange(len(miindex) * len(micolumns), dtype=np.float).reshape((len(miindex),len(micolumns)))\n"
     ]
    }
   ],
   "source": [
    "# Sampledata : meteorites impacts\n",
    "url = 'https://raw.githubusercontent.com/DGothrek/ipyaggrid/master/data/meteorites.json'\n",
    "with ur.urlopen(url) as res:\n",
    "    meteorites = json.loads(res.read().decode('utf-8'))\n",
    "dfm = pd.DataFrame(meteorites)\n",
    "dfm.index = pd.Index(dfm['id'])\n",
    "dfm = dfm.drop(['id'],axis=1)\n",
    "\n",
    "# Data for Multiindex\n",
    "def mklbl(prefix, n):\n",
    "    return [\"%s%s\" % (prefix, i) for i in range(n)]\n",
    "\n",
    "miindex = pd.MultiIndex.from_product([mklbl('A', 4),\n",
    "                                      mklbl('B', 2),\n",
    "                                      mklbl('C', 4),\n",
    "                                      mklbl('D', 2)],\n",
    "                                    names=['RowIdx-1', 'RowIdx-2', 'RowIdx-3', 'RowIdx-4'])\n",
    "index  =['-'.join(col).strip() for col in miindex.values]\n",
    "micolumns = pd.MultiIndex.from_tuples([('a', 'foo', 'zap'),\n",
    "                                       ('a', 'foo', 'zip'),\n",
    "                                       ('a', 'bar', 'zap'),\n",
    "                                       ('a', 'bar', 'zip'),\n",
    "                                       ('b', 'foo', 'zap'),\n",
    "                                       ('b', 'foo', 'zep'),\n",
    "                                       ('b', 'bah', 'zep'),\n",
    "                                       ('b', 'bah', 'zyp'),\n",
    "                                       ('b', 'bah', 'zap'),\n",
    "                                      ],\n",
    "                                      names=['ColIdx-{}'.format(i) for i in range(1, 4)])\n",
    "cols  =['-'.join(col).strip() for col in micolumns.values]\n",
    "data = np.arange(len(miindex) * len(micolumns), dtype=np.float).reshape((len(miindex),len(micolumns)))\n",
    "data = data.tolist()\n",
    "\n",
    "\n",
    "df = pd.DataFrame(data, index=miindex, columns=micolumns).sort_index().sort_index(axis=1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Sample data: Olympic winners\n",
    "url = 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'\n",
    "with ur.urlopen(url) as res:\n",
    "    data = json.loads(res.read().decode('utf-8'))\n",
    "    \n",
    "# Other data\n",
    "import random as rd\n",
    "\n",
    "cars = [\n",
    "  { \"carName\": \"100 ls\", \"origin\": \"Europe\", \"make\":\"Audi\" },\n",
    "  { \"carName\": \"Chevelle Malibu\", \"origin\": \"US\", \"make\":\"Chevrolet\" },\n",
    "  { \"carName\": \"Skylark 320\", \"origin\": \"US\", \"make\":\"Buick\" },\n",
    "  { \"carName\": \"Satellite\", \"origin\": \"US\", \"make\":\"Plymouth\" },\n",
    "  { \"carName\": \"Rebel SST\", \"origin\": \"US\", \"make\":\"AMC\" },\n",
    "  { \"carName\": \"Torino\", \"origin\": \"US\", \"make\":\"Ford\" },\n",
    "  { \"carName\": \"Peugeot 504\", \"origin\": \"Europe\", \"make\":\"Peugeot\" },\n",
    "  { \"carName\": \"Galaxie 500\", \"origin\": \"US\", \"make\":\"Ford\" },\n",
    "  { \"carName\": \"Impala\", \"origin\": \"US\", \"make\":\"Chevrolet\" },\n",
    "  { \"carName\": \"Fury III\", \"origin\": \"US\", \"make\":\"Plymouth\" },\n",
    "  { \"carName\": \"Catalina\", \"origin\": \"US\", \"make\":\"Pontiac\" },\n",
    "  { \"carName\": \"Ambassador dpl\", \"origin\": \"US\", \"make\":\"AMC\" },\n",
    "  { \"carName\": \"Challenger se\", \"origin\": \"US\", \"make\":\"Dodge\" },\n",
    "  { \"carName\": \"Cuda 340\", \"origin\": \"US\", \"make\":\"Plymouth\" },\n",
    "  { \"carName\": \"Monte Carlo\", \"origin\": \"US\", \"make\":\"Chevrolet\" },\n",
    "  { \"carName\": \"Estate Wagon (SW)\", \"origin\": \"US\", \"make\":\"Buick\" },\n",
    "  { \"carName\": \"Corona Mark II\", \"origin\": \"Asia\", \"make\":\"Toyota\" },\n",
    "  { \"carName\": \"Duster\", \"origin\": \"US\", \"make\":\"Plymouth\" },\n",
    "  { \"carName\": \"Hornet\", \"origin\": \"US\", \"make\":\"AMC\" },\n",
    "  { \"carName\": \"Maverick\", \"origin\": \"US\", \"make\":\"Ford\" },\n",
    "  { \"carName\": \"PL510\", \"origin\": \"Asia\", \"make\":\"Datsun\" },\n",
    "  { \"carName\": \"1131 Deluxe Sedan\", \"origin\": \"Europe\", \"make\":\"Volkswagen\" },\n",
    "  { \"carName\": \"SAAB 99e\", \"origin\": \"Europe\", \"make\":\"SAAB\" },\n",
    "  { \"carName\": \"BMW 2002\", \"origin\": \"Europe\", \"make\":\"BMW\" },\n",
    "  { \"carName\": \"Gremlin\", \"origin\": \"US\", \"make\":\"AMC\" },\n",
    "  { \"carName\": \"F250\", \"origin\": \"US\", \"make\":\"Ford\" },\n",
    "  { \"carName\": \"C20\", \"origin\": \"US\", \"make\":\"Chevy\" },\n",
    "  { \"carName\": \"D200\", \"origin\": \"US\", \"make\":\"Dodge\" },\n",
    "  { \"carName\": \"PL411\", \"origin\": \"Asia\", \"make\":\"Datsun\" }\n",
    "]\n",
    "\n",
    "\n",
    "for elem in cars:\n",
    "    elem.update({'price':rd.randint(20000,40000)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2 - Build Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.1 - Simple Grid"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The data can be input as a list of rows containing data, or as a dataframe. Be aware that for the moment, the dataframe must have all column names set to get a correct output. The data is input through the `grid_data` parameter to undergo a pre-treatment.\n",
    "\n",
    "The options of the grid are defined exactly as they are read by ag-Grid. Basically, it should contain [column definitions](https://www.ag-grid.com/javascript-grid-column-properties/), and some basic options that you may want for the grid. For more information on all the `grid_options` posibilities, see [ag-Grid documentation on gridOptions](https://www.ag-grid.com/javascript-grid-properties/).\n",
    "\n",
    "The api is ***very easy to use even for someone who knows no JavaScript***."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'simple-grid'\n",
    "height = 500"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c4712fd20bb348089a9a8a2e083d3355",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='buttons', height='350px', menu={'buttons': [{'name':…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Overwriting code-snippets/simple-grid.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'headerName':'Continent','field':'continent','rowGroup':True, 'hide':True},\n",
    "               {'headerName':'Country','field':'country','rowGroup':True, 'hide':True},\n",
    "               {'headerName':'Status','field':'status'},\n",
    "               {'headerName':'Date','field':'year','cellRenderer':'''function(params){\n",
    "                   if (params.value !== undefined && params.value !== null){\n",
    "                   return (params.value.substring(0,4));\n",
    "                   }\n",
    "                   return \"\" \n",
    "               }'''\n",
    "                },\n",
    "               {'headerName':'Name','field':'name'},\n",
    "               {'headerName':'Mass','field':'mass', 'aggFunc':'avg'},\n",
    "               {'headerName':'Latitude','field':'latitude'},\n",
    "               {'headerName':'Longitude','field':'longitude'},\n",
    "              ]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'enableSorting': True,\n",
    "    'enableFilter': True,\n",
    "    'enableColResize': True,\n",
    "    'enableRangeSelection': True,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         quick_filter=True,\n",
    "         show_toggle_edit=True,\n",
    "         export_mode=\"buttons\",\n",
    "         export_csv=True,\n",
    "         export_excel=True,\n",
    "         theme='ag-theme-balham',\n",
    "         show_toggle_delete=True,\n",
    "         columns_fit='auto',\n",
    "         index=False,\n",
    "         keep_multiindex=False)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.2 - Grid Size"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The size of the grid is determined through `width` and `height` parameters. If they are not set, the weight will automatically be set to 100%."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'grid-size'\n",
    "height = 520"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f25c28ee311a4b5a8a4c3d70cdff5450",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(center=True, columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='500px', menu=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/grid-size.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field': c} for c in dfm.columns[:3]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         width=600,\n",
    "         height=500,\n",
    "         grid_options=grid_options,\n",
    "         center=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.3 - Themes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "ag-Grid comes with many different themes that you can choose from. `ag-theme-fresh` is the default theme, and `ag-theme-balham` is definitely one of the nicest but is an enterprise feature.\n",
    "\n",
    "The available themes can be found on [ag-Grid documentation on themes](https://www.ag-grid.com/javascript-grid-styling/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'themes'\n",
    "height = 370"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "50efe552f7fd4e01839d22bfd9ffcf1e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/themes.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field': c} for c in dfm.columns[:7]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "themes = [\n",
    "    'ag-theme-balham',\n",
    "    'ag-theme-balham-dark',\n",
    "    'ag-theme-material',\n",
    "    'ag-theme-fresh',\n",
    "    'ag-theme-dark',\n",
    "    'ag-theme-blue',\n",
    "    'ag-theme-bootstrap',\n",
    "    'ag-theme-excel', # custom style added by ipyaggrid\n",
    "]\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         theme='ag-theme-balham-dark',\n",
    "#          theme='ag-theme-balham',\n",
    "#          theme='ag-theme-excel',\n",
    "         grid_options=grid_options)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.4 - Custom CSS\n",
    "\n",
    "The user may want to define his own custom css rules to insert them in the page css sheet. This is available throught the `css_rules` parameter. Below is a very interesting example using some ag-Grid-built classes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'custom-css'\n",
    "height = 370"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f4411801215746a5aabe57e21cdc40a7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, css_rules_down=['.ag-row-hover {background-color: lightblu…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/custom-css.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "# putting in !important so it overrides the theme's styling as it hovers the row also\n",
    "css_rules = \"\"\"\n",
    ".ag-row-hover {\n",
    "    background-color: lightblue !important;\n",
    "}\n",
    "\n",
    ".ag-column-hover {\n",
    "    background-color: powderblue;\n",
    "}\n",
    "\n",
    ".ag-row-hover .ag-column-hover {\n",
    "    background-color: deepskyblue !important;\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "column_defs = [{'field': c} for c in dfm.columns[:7]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         css_rules=css_rules,\n",
    "         grid_options=grid_options)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.5 - Export to CSV/Excel\n",
    "\n",
    "As ag-Grid provides, the export in CSV is available through buttons above the grid."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'excel-csv'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "19a75f55496f4719b98f0d1ec6521a97",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/excel-csv.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field': c} for c in dfm.columns[:7]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         export_csv=True,\n",
    "         export_excel=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.6 - Quick Filter\n",
    "\n",
    "This is an ag-Grid feature that is implemented very simply as an option `quick_filter` in the input parameters."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'quick-filter'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9d5f49b84a4e4243984ab4ed70fb9666",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/quick-filter.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field':'origin', 'headerName': 'Origin'},\n",
    "                  {'field':'make', 'headerName': 'Make'},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price'}]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=cars,\n",
    "         grid_options=grid_options,\n",
    "         quick_filter=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.7 - Delete by Keypress\n",
    "\n",
    "Once your grid is correctly displayed, you may want to delete some lines on a key press, from python or a keyboard shortcut.\n",
    "\n",
    "Once `show_toggle_delete` is set to `True`, the user gets a checkbox that he can use to choose wether he wants to delete on key press or not."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'show-toggle-delete'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5834d482a86047eb8f1bb21d893fbfda",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/show-toggle-delete.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field': c} for c in dfm.columns[:7]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'rowSelection': 'multiple',\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         show_toggle_delete=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'show-toggle-delete-2'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1e7304af758543c39c1ceff08b6bd060",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/show-toggle-delete-2.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'enableRangeSelection': True,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         quick_filter=False,\n",
    "         show_toggle_delete=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.8 - Edit Data\n",
    "\n",
    "If you want to modify your data, you can enable `show_toggle_edit` through the parameters. This will create a checkbox so that you can choose to be in edit mode or not."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'show-toggle-edit'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "dacf297245ca42688a63a5e3a7d592ed",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/show-toggle-edit.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field': c} for c in dfm.columns[:11]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         show_toggle_edit=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Additionally if you want the Python dataframe to be instantly synced on edit use the `sync_on_edit` param (False by default)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'sync-on-edit'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "723bcf27c89c4a62b704144e811848ab",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='100px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/sync-on-edit.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "df2 = pd.DataFrame({'val':['a']})\n",
    "column_defs = [{'headerName': 'Col', 'field': 'val', 'editable': True}]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs': column_defs\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=df2,\n",
    "         grid_options=grid_options, \n",
    "         sync_on_edit=True, \n",
    "         width=200,\n",
    "         height=100)\n",
    "\n",
    "display(g)\n",
    "\n",
    "# upon edit the updated dataframe is: g.grid_data_out['grid']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Also if you want the Python dataframe to be automatically synced on initialization and any grid data update use the `sync_grid` param (True by default)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'sync-grid'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a5082e2130fc48a9941aa1a7f1322c95",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='100px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/sync-grid.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "df2 = pd.DataFrame({'val':['a']})\n",
    "column_defs = [{'headerName': 'Col', 'field': 'val', 'editable': True}]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs': column_defs\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=df2,\n",
    "         grid_options=grid_options, \n",
    "         sync_grid=True, \n",
    "         width=200,\n",
    "         height=100)\n",
    "\n",
    "display(g)\n",
    "\n",
    "# upon initialization or grid data update the dataframe is: g.grid_data_out['grid']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.9 - Index"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Imagine that your index contains some information that you still want to display in the grid. You should then use the `index` param **without forgetting to add the column to the columnDefs**."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'index'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6d4119fb492e467fa1f2eeb03c66c207",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/index.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field': dfm.index.name}] + [{'field': c} for c in dfm.columns[:3]]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         index=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.10 - MultiIndex"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Managing a multiindex dataframe can sometimes get tedious. `keep_multiindex=True` manages your indexes and ensures that "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'multiindex'\n",
    "height = 400"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ae361f840913450e9195a45efd4281f2",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': [], 'inp…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/multiindex.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = []\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'suppressColumnVirtualisation':True,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=df,\n",
    "         grid_options=grid_options,\n",
    "         keep_multiindex=True,\n",
    "         columns_fit='auto')\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.11 - MultiOptions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'multi-options'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 45,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "04181aedf063463f9b4559b2dd9d1aab",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, css_rules_down=['.number-cell {text-align: left;}', '.pric…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/multi-options.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "css_rules = \"\"\"\n",
    ".number-cell {\n",
    "    text-align: left;\n",
    "}\n",
    ".price-high {\n",
    "    color: red;\n",
    "}\n",
    "\n",
    "\"\"\"\n",
    "\n",
    "ccf = \"function(params) { return params.value >32000 ? 'price-high' : ''; }\"\n",
    "column_defs_1 = [{'field':'origin', 'headerName': 'Origin'},\n",
    "                  {'field':'make', 'headerName': 'Make'},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price', 'cellClass': ccf}]\n",
    "\n",
    "column_defs_2 = [{'field':'origin', 'headerName': 'Origin', 'hide':True, 'rowGroup':True},\n",
    "                  {'field':'make', 'headerName': 'Make'},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price'}]\n",
    "\n",
    "\n",
    "grid_options_1 = {\n",
    "    'columnDefs' : column_defs_1,\n",
    "    'enableSorting': True,\n",
    "    'enableFilter': True,\n",
    "    'enableColResize': False,\n",
    "}\n",
    "\n",
    "grid_options_2 = {\n",
    "    'columnDefs' : column_defs_2,\n",
    "    'enableSorting': False,\n",
    "    'enableFilter': False,\n",
    "    'enableColResize': True,\n",
    "    'rowSelection': 'multiple',\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=cars,\n",
    "            css_rules=css_rules,\n",
    "            grid_options_multi=[('Sorting, color, filter', grid_options_1),\n",
    "                                ('Selection, grouping, no-filter', grid_options_2)],\n",
    "            theme='ag-theme-balham')\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 46,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.12 - Columns Size"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 47,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'columns-size'\n",
    "height = 370"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 48,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f975b0d645a34a4e899b04e111fb4a1c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='auto', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': [], 'inp…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/columns-size.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field': c, 'width':500} for c in dfm.columns]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         columns_fit=\"auto\")\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 49,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.13 - Collapse / Expand All"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'collapse-expand'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "db2df7f016614bf4a718eb900c0064b7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/collapse-expand.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "\n",
    "column_defs = [{'field':'origin', 'headerName': 'Origin', 'rowGroup':True, 'hide':True},\n",
    "                  {'field':'make', 'headerName': 'Make', 'rowGroup':True, 'hide':True},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price', 'aggFunc':'avg'}]\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'enableSorting': True,\n",
    "    'enableFilter': True,\n",
    "    'enableColResize': True,\n",
    "    'groupMultiAutoColumn': True,\n",
    "    'animateRows':True\n",
    "}\n",
    "\n",
    "buttons = [\n",
    "{'name':'Expand All', 'action':'''gridOptions.api.expandAll();'''},\n",
    "{'name':'Collapse All', 'action':'''gridOptions.api.collapseAll();'''},\n",
    "]\n",
    "\n",
    "g = Grid(grid_data=cars,\n",
    "         theme=\"ag-theme-balham\",\n",
    "         grid_options=grid_options,\n",
    "         menu = {'buttons':buttons},\n",
    "         quick_filter=False)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.14 - Highlight Cells"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'simple-highlight'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ef26832454e549fe8e233f6bde4633ee",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', js_post_grid=['gri…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/simple-highlight.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field':'origin', 'headerName': 'Origin', 'rowGroup':True, 'hide':True},\n",
    "                  {'field':'make', 'headerName': 'Make', 'rowGroup':True, 'hide':True},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price', 'aggFunc':'avg'}]\n",
    "\n",
    "\n",
    "gridOptions = {\n",
    "    'enableColResize': True,\n",
    "    'columnDefs': column_defs,\n",
    "    'enableFilter':True,\n",
    "    'enableSorting':True,\n",
    "    'animateRows':True,\n",
    "    'groupMultiAutoColumn': True,\n",
    "};\n",
    "\n",
    "buttons=[{'name':'Highlight', 'action':\"\"\"\n",
    "gridOptions.api.forEachNodeAfterFilterAndSort(node => {\n",
    "    if (node.aggData){\n",
    "        if (node.aggData.price.value > 30000){\n",
    "            gridOptions.api.flashCells({rowNodes: [node], columns: [\"price\"]});\n",
    "        }\n",
    "    } else {\n",
    "        if (node.data.price>30000){\n",
    "            gridOptions.api.flashCells({rowNodes: [node], columns: [\"price\"]});\n",
    "        }\n",
    "    }\n",
    "});\n",
    "\"\"\"}]\n",
    "\n",
    "\n",
    "g = Grid(quick_filter=False,\n",
    "         theme='ag-theme-balham',\n",
    "         compress_data=True,\n",
    "         menu = {'buttons':buttons},\n",
    "         grid_options=gridOptions,\n",
    "         js_post_grid=[\"gridOptions.api.expandAll();\"],\n",
    "         grid_data=cars)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.15 - Custom Menu 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create regular menu very simply. Buttons, inputs will arrange very simply in a convenient way, without any setting. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'custom-menu-1'\n",
    "height = 480"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d570feaf72c94c46bdd2a44746c9e9b5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='buttons', height='350px', menu={'buttons': [{…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/custom-menu-1.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field':'origin', 'headerName': 'Origin'},\n",
    "                  {'field':'make', 'headerName': 'Make'},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price'}]\n",
    "\n",
    "\n",
    "grid_options = {\n",
    "    'enableColResize': True,\n",
    "    'columnDefs': column_defs,\n",
    "    'enableFilter':True,\n",
    "    'enableSorting':True,\n",
    "    'animateRows':True,\n",
    "    'groupMultiAutoColumn': True,\n",
    "};\n",
    "\n",
    "g = Grid(grid_data = cars,\n",
    "            quick_filter=True,\n",
    "            show_toggle_edit=True,\n",
    "            show_toggle_delete=True,\n",
    "            export_excel=True,\n",
    "            export_csv=True,\n",
    "            grid_options=grid_options, \n",
    "            menu={'buttons':\n",
    "                  [\n",
    "                      {'name':'Log foo 1', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log bar 1', 'action':'console.log(\"bar\");'},\n",
    "                      {'name':'Log foo 2', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log foo 3', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log foo 4', 'action':'console.log(\"foo\");'},\n",
    "                  ],\n",
    "                 },\n",
    "            export_mode=\"buttons\",\n",
    "            theme='ag-theme-balham')\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 58,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.16 - Custom Menu 2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create a fancy menu header with [flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 59,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'custom-menu-2'\n",
    "height = 500"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 60,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d2866dc6fd214d008cdf2a3023724567",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='buttons', height='350px', menu={'buttons': [{…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/custom-menu-2.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field':'origin', 'headerName': 'Origin'},\n",
    "                  {'field':'make', 'headerName': 'Make'},\n",
    "                  {'field':'carName', 'headerName':'Model'},\n",
    "                  {'field':'price', 'headerName': 'Price'}]\n",
    "\n",
    "\n",
    "grid_options = {\n",
    "    'enableColResize': True,\n",
    "    'columnDefs': column_defs,\n",
    "    'enableFilter':True,\n",
    "    'enableSorting':True,\n",
    "    'animateRows':True,\n",
    "    'groupMultiAutoColumn': True,\n",
    "};\n",
    "\n",
    "g = Grid(grid_data = cars,\n",
    "            quick_filter=True,\n",
    "            show_toggle_edit=True,\n",
    "            show_toggle_delete=True,\n",
    "            export_excel=True,\n",
    "            export_csv=True,\n",
    "            grid_options=grid_options, \n",
    "            menu={'buttons':\n",
    "                  [\n",
    "                      {'name':'Log foo 1', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log bar 1', 'action':'console.log(\"bar\");'},\n",
    "                      {'name':'Log foo 2', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Export to Excel', 'custom_css':{ # Changing the order\n",
    "                          'background':'lightgrey',             # and the CSS of\n",
    "                          'border':'solid darkgrey 1px',        # builtin buttons\n",
    "                          'border-radius': '10px'}\n",
    "                      },\n",
    "                      {'name':'Export to CSV', 'custom_css':{\n",
    "                          'background':'lightgrey',\n",
    "                          'border':'solid darkgrey 1px',\n",
    "                          'border-radius': '10px'}\n",
    "                      },\n",
    "                      {'name':'Export Grid', 'custom_css':{\n",
    "                          'background':'lightgrey',\n",
    "                          'border':'solid darkgrey 1px',\n",
    "                          'border-radius': '10px'}\n",
    "                      },\n",
    "                      {'name':'Log foo 3', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log foo 4', 'action':'console.log(\"foo\");'},\n",
    "                      {'name':'Log foo 5', 'action':'console.log(\"foo\");'},\n",
    "                  ],\n",
    "                  'inputs':[\n",
    "                      {'name':'Quick Filter', 'flex_css': \n",
    "                       {'width':'100px', \n",
    "                        'border-radius':'10px'}\n",
    "                      }\n",
    "                  ],\n",
    "                  'button_default_css':\n",
    "                  {\n",
    "                      'color':'slateblue',\n",
    "                      'border':'solid darkgrey 1px',\n",
    "                      'border-radius': '10px',\n",
    "                  },\n",
    "                  'menu_div_css':\n",
    "                  {\n",
    "                      'flex-wrap':'nowrap',\n",
    "                      'justify-content':'space-between',\n",
    "                      'border':'solid 1px black',\n",
    "                      'border-radius':'5px',\n",
    "                      'align-items':'stretch'\n",
    "                  },\n",
    "                  'input_div_css':\n",
    "                  {\n",
    "                      'flex-direction':'column',\n",
    "                      'align-items':'flex-end',\n",
    "                      'border':'solid 1px red',\n",
    "                      'border-radius':'5px',\n",
    "                      'margin':'5px'\n",
    "                  },\n",
    "                  'button_div_css':\n",
    "                  {\n",
    "                      'flex-direction':'row-reverse',\n",
    "                      'flex-wrap': 'wrap',\n",
    "                      'flex-basis':'485px',\n",
    "                      'border':'solid 1px darkred',\n",
    "                      'border-radius':'5px',\n",
    "                      'margin':'5px'\n",
    "                  }\n",
    "                 },\n",
    "            export_mode=\"buttons\",\n",
    "            theme='ag-theme-balham')\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 61,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.17 - Paste from Excel"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to paste from Excel, pay attention to select the columns headers in Excel. They must not contain any dot, or \"too special\" character."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 62,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'paste-from-excel'\n",
    "height = 370"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 63,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "43b99ec044494636bdcadcfb786f7b64",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', menu={'buttons': […"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/paste-from-excel.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "grid_options = {\n",
    "    'columnDefs':[{'field':''}],\n",
    "    'enableFilter':True,\n",
    "    'enableSorting':True,\n",
    "    'animateRows':True,\n",
    "}\n",
    "\n",
    "g = Grid(grid_options=grid_options,\n",
    "         grid_data=[{'':''}],\n",
    "         paste_from_excel=True)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 64,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.18 - Export Data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to paste from Excel, pay attention to select the columns headers in Excel. They must not contain any dot, or \"too special\" character."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 65,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'export-grid'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 66,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f207cd365a6849fc8087fb41169c8490",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='buttons', height='350px', menu={'buttons': [{…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/export-grid.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "columnDefs = [\n",
    "    {'headerName': \"Country\", 'field': \"country\", 'rowGroup':True, 'hide':True},\n",
    "    {'headerName': \"Sport\", 'field': \"sport\", 'rowGroup':True, 'hide':True},\n",
    "    {\n",
    "        'headerName': \"Results\",\n",
    "        'children': [\n",
    "            {'headerName': \"Total\", 'field': 'total', 'columnGroupShow': 'closed', 'aggFunc':'sum'},\n",
    "            {'headerName': \"Gold\", 'field': 'gold', 'columnGroupShow': 'open', 'aggFunc':'sum'},\n",
    "            {'headerName': \"Silver\", 'field': 'silver', 'columnGroupShow': 'open', 'aggFunc':'sum'},\n",
    "            {'headerName': \"Bronze\", 'field': 'bronze', 'columnGroupShow': 'open', 'aggFunc':'sum'}\n",
    "        ]\n",
    "    },\n",
    "]\n",
    "\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs': columnDefs,\n",
    "    'enableFilter': True,\n",
    "    'enableSorting':True,\n",
    "}\n",
    "\n",
    "g = Grid(grid_data = data,\n",
    "            grid_options=grid_options, \n",
    "            export_mode=\"buttons\",\n",
    "            theme='ag-theme-balham')\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 67,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.19 - Fancy Rendering"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 68,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8ca7fcd67211467da62df94f812252ef",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, export_mode='disabled', height='350px', js_helpers_custom=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "column_defs = [\n",
    "      { 'headerName': \"Athlete\", 'field': \"athlete\", 'width': 200 },\n",
    "      {\n",
    "        'headerName': \"Gold\",\n",
    "        'field': \"gold\",\n",
    "        'width': 100,\n",
    "        'aggFunc': \"sum\",\n",
    "        'cellRenderer': 'helpers.goldRendering'\n",
    "      },\n",
    "      {\n",
    "        'headerName': \"Silver\",\n",
    "        'field': \"silver\",\n",
    "        'width': 100,\n",
    "        'aggFunc': \"sum\",\n",
    "        'cellRenderer': 'helpers.silverRendering'\n",
    "      },\n",
    "      {\n",
    "        'headerName': \"Bronze\",\n",
    "        'field': \"bronze\",\n",
    "        'width': 100,\n",
    "        'aggFunc': \"sum\",\n",
    "        'cellRenderer': 'helpers.bronzeRendering'\n",
    "      },\n",
    "      {\n",
    "        'headerName': \"Total\",\n",
    "        'field': \"total\",\n",
    "        'width': 100,\n",
    "        'aggFunc': \"sum\",\n",
    "        'cellRenderer': 'helpers.medalRendering'\n",
    "      },\n",
    "      {\n",
    "        'headerName': \"Country\",\n",
    "        'field': \"country\",\n",
    "        'width': 120,\n",
    "        'rowGroup': True,\n",
    "        'hide': True\n",
    "      },\n",
    "      {\n",
    "        'headerName': \"Sport\",\n",
    "        'field': \"sport\",\n",
    "        'width': 110,\n",
    "        'cellRenderer': 'helpers.sportRendering'\n",
    "      }\n",
    "    ]\n",
    "\n",
    "helpers_custom = \"\"\"\n",
    "    function GroupRowInnerRenderer() {}\n",
    "\n",
    "    GroupRowInnerRenderer.prototype.init = function(params) {\n",
    "      this.eGui = document.createElement(\"div\");\n",
    "      this.eGui.style = \"display: inline-block\";\n",
    "\n",
    "      var flagCode = params.flagCodes[params.node.key];\n",
    "\n",
    "      var html = \"\";\n",
    "      if (flagCode) {\n",
    "        html +=\n",
    "          '<img class=\"flag\" border=\"0\" width=\"20\" height=\"15\" src=\"https://flags.fmcdn.net/data/flags/mini/' +\n",
    "          flagCode +\n",
    "          '.png\">';\n",
    "      }\n",
    "\n",
    "      var node = params.node;\n",
    "      var aggData = node.aggData;\n",
    "\n",
    "      html += '<span class=\"groupTitle\"> &nbsp COUNTRY_NAME</span>'.replace(\n",
    "        \"COUNTRY_NAME\",\n",
    "        node.key\n",
    "      );\n",
    "      html += '<span class=\"medal gold\"> Gold: GOLD_COUNT</span>'.replace(\n",
    "        \"GOLD_COUNT\",\n",
    "        aggData.gold\n",
    "      );\n",
    "      html += '<span class=\"medal silver\"> Silver: SILVER_COUNT</span>'.replace(\n",
    "        \"SILVER_COUNT\",\n",
    "        aggData.silver\n",
    "      );\n",
    "      html += '<span class=\"medal bronze\"> Bronze: BRONZE_COUNT</span>'.replace(\n",
    "        \"BRONZE_COUNT\",\n",
    "        aggData.bronze\n",
    "      );\n",
    "\n",
    "      this.eGui.innerHTML = html;\n",
    "    };\n",
    "\n",
    "    GroupRowInnerRenderer.prototype.getGui = function() {\n",
    "      return this.eGui;\n",
    "    };\n",
    "\n",
    "helpersCustom.groupRowInnerRenderer = GroupRowInnerRenderer;\n",
    "\n",
    "helpersCustom.sportRendering = function(params) {\n",
    "      if (params.value == \"Swimming\") {\n",
    "        return \"🏊 Swimming\";\n",
    "      } else if (params.value == \"Athletics\") {\n",
    "        return \"🏃 Athletics\";\n",
    "      } else if (params.value == \"Archery\") {\n",
    "        return \"🏹 Archery\";\n",
    "      } else if (params.value == \"Equestrian\") {\n",
    "        return \"🏇 Equestrian\";\n",
    "      }\n",
    "      return params.value;\n",
    "    }\n",
    "\n",
    "\n",
    "helpersCustom.medalRendering = function(params) {\n",
    "      let res = '';\n",
    "      if (params.value) {\n",
    "        for (let i = 0; i < parseInt(params.value, 10); i += 1) {\n",
    "          res = res + \"🏅\";\n",
    "        }\n",
    "      }\n",
    "      return `<span style=\"color:lightblue\">${res}</span>`;\n",
    "};\n",
    "\n",
    "\n",
    "helpersCustom.goldRendering = function(params) {\n",
    "      let res = '';\n",
    "      if (params.value) {\n",
    "        for (let i = 0; i < parseInt(params.value, 10); i += 1) {\n",
    "          res = res + \"🏅\";\n",
    "        }\n",
    "      }\n",
    "      return `<span style=\"color:gold\">${res}</span>`;\n",
    "};\n",
    "\n",
    "helpersCustom.silverRendering = function(params) {\n",
    "      let res = '';\n",
    "      if (params.value) {\n",
    "        for (let i = 0; i < parseInt(params.value, 10); i += 1) {\n",
    "          res = res + \"🏅\";\n",
    "        }\n",
    "      }\n",
    "      return `<span style=\"color:silver\">${res}</span>`;\n",
    "};\n",
    "\n",
    "helpersCustom.bronzeRendering = function(params) {\n",
    "      let res = '';\n",
    "      if (params.value) {\n",
    "        for (let i = 0; i < parseInt(params.value, 10); i += 1) {\n",
    "          res = res + \"🏅\";\n",
    "        }\n",
    "      }\n",
    "      return `<span style=\"color:#cd7f32\">${res}</span>`;\n",
    "};\n",
    "\"\"\"\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs':column_defs,\n",
    "    'enableSorting':True,\n",
    "    'enableColResize':True,\n",
    "    'rowSelection':'multiple',\n",
    "    'animateRows':True,\n",
    "    'groupUseEntireRow':True,\n",
    "    'components':'groupRowInnerRenderer',\n",
    "    'groupRowInnerRenderer':'helpers.groupRowInnerRenderer',\n",
    "    'groupRowRendererParams':{\n",
    "      \"flagCodes\": {\n",
    "        \"Andorra\": \"ad\",\n",
    "        \"United Arab Emirates\": \"ae\",\n",
    "        \"Afghanistan\": \"af\",\n",
    "        \"Antigua and Barbuda\": \"ag\",\n",
    "        \"Anguilla\": \"ai\",\n",
    "        \"Albania\": \"al\",\n",
    "        \"Armenia\": \"am\",\n",
    "        \"Netherlands Antilles\": \"an\",\n",
    "        \"Angola\": \"ao\",\n",
    "        \"Antarctica\": \"aq\",\n",
    "        \"Argentina\": \"ar\",\n",
    "        \"American Samoa\": \"as\",\n",
    "        \"Austria\": \"at\",\n",
    "        \"Australia\": \"au\",\n",
    "        \"Aruba\": \"aw\",\n",
    "        \"Åland Islands\": \"ax\",\n",
    "        \"Azerbaijan\": \"az\",\n",
    "        \"Bosnia and Herzegovina\": \"ba\",\n",
    "        \"Barbados\": \"bb\",\n",
    "        \"Bangladesh\": \"bd\",\n",
    "        \"Belgium\": \"be\",\n",
    "        \"Burkina Faso\": \"bf\",\n",
    "        \"Bulgaria\": \"bg\",\n",
    "        \"Bahrain\": \"bh\",\n",
    "        \"Burundi\": \"bi\",\n",
    "        \"Benin\": \"bj\",\n",
    "        \"Bermuda\": \"bm\",\n",
    "        \"Brunei Darussalam\": \"bn\",\n",
    "        \"Bolivia\": \"bo\",\n",
    "        \"Brazil\": \"br\",\n",
    "        \"Bahamas\": \"bs\",\n",
    "        \"Bhutan\": \"bt\",\n",
    "        \"Bouvet Island\": \"bv\",\n",
    "        \"Botswana\": \"bw\",\n",
    "        \"Belarus\": \"by\",\n",
    "        \"Belize\": \"bz\",\n",
    "        \"Canada\": \"ca\",\n",
    "        \"Cocos (Keeling) Islands\": \"cc\",\n",
    "        \"Congo, The Democratic Republic of the\": \"cd\",\n",
    "        \"Central African Republic\": \"cf\",\n",
    "        \"Congo\": \"cg\",\n",
    "        \"Switzerland\": \"ch\",\n",
    "        \"Cote D'Ivoire\": \"ci\",\n",
    "        \"Cook Islands\": \"ck\",\n",
    "        \"Chile\": \"cl\",\n",
    "        \"Cameroon\": \"cm\",\n",
    "        \"China\": \"cn\",\n",
    "        \"Colombia\": \"co\",\n",
    "        \"Costa Rica\": \"cr\",\n",
    "        \"Cuba\": \"cu\",\n",
    "        \"Cape Verde\": \"cv\",\n",
    "        \"Christmas Island\": \"cx\",\n",
    "        \"Cyprus\": \"cy\",\n",
    "        \"Czech Republic\": \"cz\",\n",
    "        \"Germany\": \"de\",\n",
    "        \"Djibouti\": \"dj\",\n",
    "        \"Denmark\": \"dk\",\n",
    "        \"Dominica\": \"dm\",\n",
    "        \"Dominican Republic\": \"do\",\n",
    "        \"Algeria\": \"dz\",\n",
    "        \"Ecuador\": \"ec\",\n",
    "        \"Estonia\": \"ee\",\n",
    "        \"Egypt\": \"eg\",\n",
    "        \"Western Sahara\": \"eh\",\n",
    "        \"Eritrea\": \"er\",\n",
    "        \"Spain\": \"es\",\n",
    "        \"Ethiopia\": \"et\",\n",
    "        \"European Union\": \"eu\",\n",
    "        \"Finland\": \"fi\",\n",
    "        \"Fiji\": \"fj\",\n",
    "        \"Falkland Islands (Malvinas)\": \"fk\",\n",
    "        \"Micronesia, Federated States of\": \"fm\",\n",
    "        \"Faroe Islands\": \"fo\",\n",
    "        \"France\": \"fr\",\n",
    "        \"Gabon\": \"ga\",\n",
    "        \"Great Britain\": \"gb\",\n",
    "        \"Grenada\": \"gd\",\n",
    "        \"Georgia\": \"ge\",\n",
    "        \"French Guiana\": \"gf\",\n",
    "        \"Guernsey\": \"gg\",\n",
    "        \"Ghana\": \"gh\",\n",
    "        \"Gibraltar\": \"gi\",\n",
    "        \"Greenland\": \"gl\",\n",
    "        \"Gambia\": \"gm\",\n",
    "        \"Guinea\": \"gn\",\n",
    "        \"Guadeloupe\": \"gp\",\n",
    "        \"Equatorial Guinea\": \"gq\",\n",
    "        \"Greece\": \"gr\",\n",
    "        \"South Georgia\": \"gs\",\n",
    "        \"Guatemala\": \"gt\",\n",
    "        \"Guam\": \"gu\",\n",
    "        \"Guinea-Bissau\": \"gw\",\n",
    "        \"Guyana\": \"gy\",\n",
    "        \"Hong Kong\": \"hk\",\n",
    "        \"Heard Island and Mcdonald Islands\": \"hm\",\n",
    "        \"Honduras\": \"hn\",\n",
    "        \"Croatia\": \"hr\",\n",
    "        \"Haiti\": \"ht\",\n",
    "        \"Hungary\": \"hu\",\n",
    "        \"Indonesia\": \"id\",\n",
    "        \"Ireland\": \"ie\",\n",
    "        \"Israel\": \"il\",\n",
    "        \"Isle of Man\": \"im\",\n",
    "        \"India\": \"in\",\n",
    "        \"British Indian Ocean Territory\": \"io\",\n",
    "        \"Iraq\": \"iq\",\n",
    "        \"Iran\": \"ir\",\n",
    "        \"Iceland\": \"is\",\n",
    "        \"Italy\": \"it\",\n",
    "        \"Jersey\": \"je\",\n",
    "        \"Jamaica\": \"jm\",\n",
    "        \"Jordan\": \"jo\",\n",
    "        \"Japan\": \"jp\",\n",
    "        \"Kenya\": \"ke\",\n",
    "        \"Kyrgyzstan\": \"kg\",\n",
    "        \"Cambodia\": \"kh\",\n",
    "        \"Kiribati\": \"ki\",\n",
    "        \"Comoros\": \"km\",\n",
    "        \"Saint Kitts and Nevis\": \"kn\",\n",
    "        \"North Korea\": \"kp\",\n",
    "        \"South Korea\": \"kr\",\n",
    "        \"Kuwait\": \"kw\",\n",
    "        \"Cayman Islands\": \"ky\",\n",
    "        \"Kazakhstan\": \"kz\",\n",
    "        \"Lao People's Democratic Republic\": \"la\",\n",
    "        \"Lebanon\": \"lb\",\n",
    "        \"Saint Lucia\": \"lc\",\n",
    "        \"Liechtenstein\": \"li\",\n",
    "        \"Sri Lanka\": \"lk\",\n",
    "        \"Liberia\": \"lr\",\n",
    "        \"Lesotho\": \"ls\",\n",
    "        \"Lithuania\": \"lt\",\n",
    "        \"Luxembourg\": \"lu\",\n",
    "        \"Latvia\": \"lv\",\n",
    "        \"Libyan Arab Jamahiriya\": \"ly\",\n",
    "        \"Morocco\": \"ma\",\n",
    "        \"Monaco\": \"mc\",\n",
    "        \"Moldova\": \"md\",\n",
    "        \"Montenegro\": \"me\",\n",
    "        \"Madagascar\": \"mg\",\n",
    "        \"Marshall Islands\": \"mh\",\n",
    "        \"Macedonia\": \"mk\",\n",
    "        \"Mali\": \"ml\",\n",
    "        \"Myanmar\": \"mm\",\n",
    "        \"Mongolia\": \"mn\",\n",
    "        \"Macao\": \"mo\",\n",
    "        \"Northern Mariana Islands\": \"mp\",\n",
    "        \"Martinique\": \"mq\",\n",
    "        \"Mauritania\": \"mr\",\n",
    "        \"Montserrat\": \"ms\",\n",
    "        \"Malta\": \"mt\",\n",
    "        \"Mauritius\": \"mu\",\n",
    "        \"Maldives\": \"mv\",\n",
    "        \"Malawi\": \"mw\",\n",
    "        \"Mexico\": \"mx\",\n",
    "        \"Malaysia\": \"my\",\n",
    "        \"Mozambique\": \"mz\",\n",
    "        \"Namibia\": \"na\",\n",
    "        \"New Caledonia\": \"nc\",\n",
    "        \"Niger\": \"ne\",\n",
    "        \"Norfolk Island\": \"nf\",\n",
    "        \"Nigeria\": \"ng\",\n",
    "        \"Nicaragua\": \"ni\",\n",
    "        \"Netherlands\": \"nl\",\n",
    "        \"Norway\": \"no\",\n",
    "        \"Nepal\": \"np\",\n",
    "        \"Nauru\": \"nr\",\n",
    "        \"Niue\": \"nu\",\n",
    "        \"New Zealand\": \"nz\",\n",
    "        \"Oman\": \"om\",\n",
    "        \"Panama\": \"pa\",\n",
    "        \"Peru\": \"pe\",\n",
    "        \"French Polynesia\": \"pf\",\n",
    "        \"Papua New Guinea\": \"pg\",\n",
    "        \"Philippines\": \"ph\",\n",
    "        \"Pakistan\": \"pk\",\n",
    "        \"Poland\": \"pl\",\n",
    "        \"Saint Pierre and Miquelon\": \"pm\",\n",
    "        \"Pitcairn\": \"pn\",\n",
    "        \"Puerto Rico\": \"pr\",\n",
    "        \"Palestinian Territory, Occupied\": \"ps\",\n",
    "        \"Portugal\": \"pt\",\n",
    "        \"Palau\": \"pw\",\n",
    "        \"Paraguay\": \"py\",\n",
    "        \"Qatar\": \"qa\",\n",
    "        \"Reunion\": \"re\",\n",
    "        \"Romania\": \"ro\",\n",
    "        \"Serbia\": \"rs\",\n",
    "        \"Russia\": \"ru\",\n",
    "        \"Rwanda\": \"rw\",\n",
    "        \"Saudi Arabia\": \"sa\",\n",
    "        \"Solomon Islands\": \"sb\",\n",
    "        \"Seychelles\": \"sc\",\n",
    "        \"Sudan\": \"sd\",\n",
    "        \"Sweden\": \"se\",\n",
    "        \"Singapore\": \"sg\",\n",
    "        \"Saint Helena\": \"sh\",\n",
    "        \"Slovenia\": \"si\",\n",
    "        \"Svalbard and Jan Mayen\": \"sj\",\n",
    "        \"Slovakia\": \"sk\",\n",
    "        \"Sierra Leone\": \"sl\",\n",
    "        \"San Marino\": \"sm\",\n",
    "        \"Senegal\": \"sn\",\n",
    "        \"Somalia\": \"so\",\n",
    "        \"Suriname\": \"sr\",\n",
    "        \"Sao Tome and Principe\": \"st\",\n",
    "        \"El Salvador\": \"sv\",\n",
    "        \"Syrian Arab Republic\": \"sy\",\n",
    "        \"Swaziland\": \"sz\",\n",
    "        \"Turks and Caicos Islands\": \"tc\",\n",
    "        \"Chad\": \"td\",\n",
    "        \"French Southern Territories\": \"tf\",\n",
    "        \"Togo\": \"tg\",\n",
    "        \"Thailand\": \"th\",\n",
    "        \"Tajikistan\": \"tj\",\n",
    "        \"Tokelau\": \"tk\",\n",
    "        \"Timor-Leste\": \"tl\",\n",
    "        \"Turkmenistan\": \"tm\",\n",
    "        \"Tunisia\": \"tn\",\n",
    "        \"Tonga\": \"to\",\n",
    "        \"Turkey\": \"tr\",\n",
    "        \"Trinidad and Tobago\": \"tt\",\n",
    "        \"Tuvalu\": \"tv\",\n",
    "        \"Chinese Taipei\": \"tw\",\n",
    "        \"Tanzania, United Republic of\": \"tz\",\n",
    "        \"Ukraine\": \"ua\",\n",
    "        \"Uganda\": \"ug\",\n",
    "        \"United States Minor Outlying Islands\": \"um\",\n",
    "        \"United States\": \"us\",\n",
    "        \"Uruguay\": \"uy\",\n",
    "        \"Uzbekistan\": \"uz\",\n",
    "        \"Holy See (Vatican City State)\": \"va\",\n",
    "        \"Saint Vincent and the Grenadines\": \"vc\",\n",
    "        \"Venezuela\": \"ve\",\n",
    "        \"Virgin Islands, British\": \"vg\",\n",
    "        \"Virgin Islands, U.S.\": \"vi\",\n",
    "        \"Vietnam\": \"vn\",\n",
    "        \"Vanuatu\": \"vu\",\n",
    "        \"Wallis and Futuna\": \"wf\",\n",
    "        \"Samoa\": \"ws\",\n",
    "        \"Kosovo\": \"xk\",\n",
    "        \"Yemen\": \"ye\",\n",
    "        \"Mayotte\": \"yt\",\n",
    "        \"South Africa\": \"za\",\n",
    "        \"Zambia\": \"zm\",\n",
    "        \"Zimbabwe\": \"zw\"\n",
    "        }\n",
    "    },\n",
    "    'onGridReady':'onGridReady'\n",
    "}\n",
    "\n",
    "g = Grid(grid_options=grid_options,\n",
    "         theme='ag-theme-balham',\n",
    "         grid_data=data,\n",
    "         js_helpers_custom = helpers_custom,\n",
    "        )\n",
    "g"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.20 - Status Bar\n",
    "\n",
    "As ag-Grid has a status bar that shows some statistics about the selected range or cells."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 69,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'status-bar'\n",
    "height = 410"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 70,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "950792543a0540cca4acf1796a1fa670",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Grid(columns_fit='size_to_fit', compress_data=True, css_rules_down=['.ag-status-bar { min-height: 35px; }'], e…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing code-snippets/status-bar.python\n"
     ]
    }
   ],
   "source": [
    "%%runandwrite {folder_code}/{name}.python\n",
    "column_defs = [{'field': c} for c in dfm.columns[:7]]\n",
    "\n",
    "css = \".ag-status-bar { min-height: 35px; }\"\n",
    "\n",
    "grid_options = {\n",
    "    'columnDefs' : column_defs,\n",
    "    'enableRangeSelection': True,\n",
    "    'statusBar': { # new syntax since 19.0\n",
    "        'statusPanels': [\n",
    "            { 'statusPanel': 'agTotalRowCountComponent', 'align': 'left' },\n",
    "            { 'statusPanel': 'agFilteredRowCountComponent' },\n",
    "            { 'statusPanel': 'agSelectedRowCountComponent' },\n",
    "            { 'statusPanel': 'agAggregationComponent' }\n",
    "        ]\n",
    "    },\n",
    "#     'enableStatusBar': True, # deprecated since 19.0\n",
    "}\n",
    "\n",
    "g = Grid(grid_data=dfm,\n",
    "         grid_options=grid_options,\n",
    "         css_rules=css)\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 71,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_export.append({'name': name,\n",
    "                    'height': height,\n",
    "                    'grid': g.export_html(build=False)})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 3 - Build Examples Files\n",
    "\n",
    "+ They are used in the [documentation](https://widgetti.github.io/ipyaggrid/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 72,
   "metadata": {},
   "outputs": [],
   "source": [
    "import re\n",
    "import simplejson as json\n",
    "\n",
    "def multiple_replace(text, dic):\n",
    "  # Create a regex from the dict keys\n",
    "  regex = re.compile('(%s)' % '|'.join(map(re.escape, dic.keys())))\n",
    "\n",
    "  # For each match, lookup corresponding value in dict\n",
    "  return regex.sub(lambda mo: dic[mo.string[mo.start():mo.end()]], text) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 73,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "example-simple-grid\n",
      "vue component example-vue-components/example-simple-grid.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-simple-grid saved to disk\n",
      "code snippet ../content/code-snippets/example-simple-grid saved to disk\n",
      "example-grid-size\n",
      "vue component example-vue-components/example-grid-size.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-grid-size saved to disk\n",
      "code snippet ../content/code-snippets/example-grid-size saved to disk\n",
      "example-themes\n",
      "vue component example-vue-components/example-themes.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-themes saved to disk\n",
      "code snippet ../content/code-snippets/example-themes saved to disk\n",
      "example-custom-css\n",
      "vue component example-vue-components/example-custom-css.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-custom-css saved to disk\n",
      "code snippet ../content/code-snippets/example-custom-css saved to disk\n",
      "example-excel-csv\n",
      "vue component example-vue-components/example-excel-csv.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-excel-csv saved to disk\n",
      "code snippet ../content/code-snippets/example-excel-csv saved to disk\n",
      "example-quick-filter\n",
      "vue component example-vue-components/example-quick-filter.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-quick-filter saved to disk\n",
      "code snippet ../content/code-snippets/example-quick-filter saved to disk\n",
      "example-show-toggle-delete\n",
      "vue component example-vue-components/example-show-toggle-delete.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-show-toggle-delete saved to disk\n",
      "code snippet ../content/code-snippets/example-show-toggle-delete saved to disk\n",
      "example-show-toggle-delete-2\n",
      "vue component example-vue-components/example-show-toggle-delete-2.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-show-toggle-delete-2 saved to disk\n",
      "code snippet ../content/code-snippets/example-show-toggle-delete-2 saved to disk\n",
      "example-show-toggle-edit\n",
      "vue component example-vue-components/example-show-toggle-edit.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-show-toggle-edit saved to disk\n",
      "code snippet ../content/code-snippets/example-show-toggle-edit saved to disk\n",
      "example-sync-on-edit\n",
      "vue component example-vue-components/example-sync-on-edit.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-sync-on-edit saved to disk\n",
      "code snippet ../content/code-snippets/example-sync-on-edit saved to disk\n",
      "example-sync-grid\n",
      "vue component example-vue-components/example-sync-grid.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-sync-grid saved to disk\n",
      "code snippet ../content/code-snippets/example-sync-grid saved to disk\n",
      "example-index\n",
      "vue component example-vue-components/example-index.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-index saved to disk\n",
      "code snippet ../content/code-snippets/example-index saved to disk\n",
      "example-multiindex\n",
      "vue component example-vue-components/example-multiindex.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-multiindex saved to disk\n",
      "code snippet ../content/code-snippets/example-multiindex saved to disk\n",
      "example-multi-options\n",
      "vue component example-vue-components/example-multi-options.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-multi-options saved to disk\n",
      "code snippet ../content/code-snippets/example-multi-options saved to disk\n",
      "example-columns-size\n",
      "vue component example-vue-components/example-columns-size.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-columns-size saved to disk\n",
      "code snippet ../content/code-snippets/example-columns-size saved to disk\n",
      "example-collapse-expand\n",
      "vue component example-vue-components/example-collapse-expand.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-collapse-expand saved to disk\n",
      "code snippet ../content/code-snippets/example-collapse-expand saved to disk\n",
      "example-simple-highlight\n",
      "vue component example-vue-components/example-simple-highlight.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-simple-highlight saved to disk\n",
      "code snippet ../content/code-snippets/example-simple-highlight saved to disk\n",
      "example-custom-menu-1\n",
      "vue component example-vue-components/example-custom-menu-1.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-custom-menu-1 saved to disk\n",
      "code snippet ../content/code-snippets/example-custom-menu-1 saved to disk\n",
      "example-custom-menu-2\n",
      "vue component example-vue-components/example-custom-menu-2.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-custom-menu-2 saved to disk\n",
      "code snippet ../content/code-snippets/example-custom-menu-2 saved to disk\n",
      "example-paste-from-excel\n",
      "vue component example-vue-components/example-paste-from-excel.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-paste-from-excel saved to disk\n",
      "code snippet ../content/code-snippets/example-paste-from-excel saved to disk\n",
      "example-export-grid\n",
      "vue component example-vue-components/example-export-grid.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-export-grid saved to disk\n",
      "code snippet ../content/code-snippets/example-export-grid saved to disk\n",
      "example-status-bar\n",
      "vue component example-vue-components/example-status-bar.vue saved to disk\n",
      "vue component ../content/.vuepress/components/example-status-bar saved to disk\n",
      "code snippet ../content/code-snippets/example-status-bar saved to disk\n"
     ]
    }
   ],
   "source": [
    "content_tpl = \"\"\"\n",
    "<template>\n",
    "  <div class=\"example-ipyaggrid\">\n",
    "      <iframe \n",
    "        srcdoc='__srcdoc__'\n",
    "        height=\"__height__\"\n",
    "        width=\"100%\"\n",
    "        frameborder=\"0\"\n",
    "      ></iframe>\n",
    "  </div>\n",
    "</template>\n",
    "\n",
    "<script>\n",
    "export default {\n",
    "  name: '__name__',\n",
    "  data() {return {}}\n",
    "}\n",
    "</script>\n",
    "\"\"\"\n",
    "\n",
    "\n",
    "for d in grid_export:\n",
    "    name_snippet = d['name']\n",
    "    name = 'example-'+d['name']\n",
    "    print(name)\n",
    "#     manager_state = json.dumps(d['grid']['manager_state']).replace(r\"'\", r'\\\"')\n",
    "    manager_state = json.dumps(d['grid']['manager_state'])#.replace(r\"'\", r\"\\'\")\n",
    "    srcdoc = d['grid']['script_tags'] + \\\n",
    "             d['grid']['html_state'].format(manager_state=manager_state) + \\\n",
    "             d['grid']['grid_div']\n",
    "    path = os.path.join(folder_vue, name+'.vue')\n",
    "    path_snippet = os.path.join(folder_code, name_snippet+'.python')\n",
    "    with open(path, 'w') as f:\n",
    "        dic = {\n",
    "            '__name__': name,\n",
    "            '__srcdoc__': srcdoc,\n",
    "            '__height__': str(d['height']),\n",
    "        }\n",
    "        content = multiple_replace(content_tpl, dic)        \n",
    "        f.write(content)\n",
    "        print('vue component {} saved to disk'.format(path))\n",
    "\n",
    "    try:\n",
    "        folder_path = os.path.join('..', 'content', '.vuepress', 'components')\n",
    "        shutil.copy(path, folder_path)\n",
    "        print('vue component {}/{} saved to disk'.format(folder_path, name))\n",
    "    except:\n",
    "        print('saving vue component {} failed'.format(name))\n",
    "    try:\n",
    "        folder_path_snippets = os.path.join('..', 'content', 'code-snippets')\n",
    "        shutil.copy(path_snippet, folder_path_snippets)\n",
    "        print('code snippet {}/{} saved to disk'.format(folder_path_snippets, name))\n",
    "    except:\n",
    "        print('saving code snippet {} failed'.format(name))"
   ]
  }
 ],
 "metadata": {
  "@webio": {
   "lastCommId": null,
   "lastKernelId": null
  },
  "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.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}