Ipyaggrid

https://github.com/widgetti/ipyaggrid
Admin
ipyaggrid is a Jupyter widget that harnesses the power of ag-Grid, a feature-rich JavaScript data...
Tokens:58,688
Snippets:193
Trust Score:8.1
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initial Project Setup and Run

Source: https://github.com/widgetti/ipyaggrid/blob/master/test-zone/js/README.md

This snippet covers the initial steps to navigate to the trial directory, install project dependencies using npm, and start the development server. It also mentions opening the browser to the specified localhost address.

```bash
$ cd trial
$ npm install
$ npm run dev

# in another terminal
$ npm run serve

# open browser to localhost:3001
```

--------------------------------

### Installing Core Dependencies

Source: https://github.com/widgetti/ipyaggrid/blob/master/test-zone/js/README.md

This section details the installation of essential development dependencies for the project using npm. It includes installing ag-grid for grid functionality and various webpack, babel, and loader packages for build processes.

```bash
$ cd trial

$ npm i -P ag-grid
# idem:
$ npm install --save ag-grid


$ npm i -D webpack webpack-cli
$ npm i -D babel-core babel-loader babel-preset-env
$ npm i -D style-loader css-loader less-loader extract-text-webpack-plugin
$ npm i -D html-webpack-plugin
$ npm i -D rimraf serve
# idem:
$ npm install --save-dev rimraf serve
```

--------------------------------

### Install ipyaggrid Notebook Extension

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Installs the ipyaggrid extension for the Classic Jupyter Notebook. It uses a symlink for efficient development, pointing to the source directory.

```bash
$ jupyter nbextension install --py --symlink --sys-prefix ipyaggrid
```

--------------------------------

### List Jupyter Notebook Extensions

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Lists all installed Jupyter Notebook extensions and their status. This command is used to verify if the ipyaggrid extension has been correctly installed and enabled.

```bash
# notebook extensions status
$ jupyter nbextension list
```

--------------------------------

### Clone ipyaggrid Repository

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Clones the ipyaggrid project from its GitLab repository using Git. This is the first step to obtain the project's source code.

```bash
$ git clone https://gitlab.com/DGothrek/ipyaggrid
cd ipyaggrid
```

--------------------------------

### Create and Activate Conda Environment

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Sets up a dedicated Conda environment named 'dev-ipyaggrid' with Python 3. It then installs the 'notebook' package and project dependencies from the 'requirements.txt' file.

```bash
# create conda env
$ conda create -n dev-ipyaggrid python=3
# activate env (without source for Windows)
$ source activate dev-ipyaggrid
# install dependencies
(dev-ipyaggrid) $ pip install notebook
(dev-ipyaggrid) $ pip install -r ipyaggrid/requirements.txt
```

--------------------------------

### Basic ipyaggrid Setup

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/create.md

Demonstrates a fundamental ipyaggrid setup with default configurations, showcasing the basic structure of a grid instance.

```python
from ipyaggrid import Grid
from IPython.display import display

# Assuming 'data' is a pandas DataFrame
# data = pd.DataFrame(...)

grid = Grid(data)
display(grid)
```

--------------------------------

### Notebook Extension Configuration

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Displays the content of the notebook configuration file, showing which extensions are loaded. This is a JSON file that lists enabled notebook extensions.

```bash
cat /usr/local/anaconda3/envs/dev-ipyaggrid/etc/jupyter/nbconfig/notebook.json
```

```json
{
  "load_extensions": {
    "jupyter-js-widgets/extension": true,
    "ipyaggrid/extension": true
  }
}
```

--------------------------------

### Jupyter Server Launch Commands

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Commands to launch the Jupyter Notebook and JupyterLab servers. The `--watch` flag for JupyterLab enables auto-rebuilding of extensions when changes are detected.

```bash
# from repo top folder
$ cd notebooks

# launch notebook server and open browser to the classic file system
$ jupyter notebook

# launch notebook server and open browser jupyterlab
$ jupyter lab --watch # auto rebuild
```

--------------------------------

### List Jupyter Paths (Classic Notebook)

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Displays the configuration and data paths used by Jupyter for Classic Notebook. This helps in understanding where Jupyter looks for extensions and configuration files.

```bash
# list jupyter folders
$ jupyter --paths
```

--------------------------------

### Build ipywidget Javascript Modules

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Installs Node.js dependencies using npm ci and builds the JavaScript part of the ipywidget, specifically the labextension. This is done from the 'ipyaggrid/js' directory.

```bash
# from repo top folder

# build ipywidget js
$ cd ipyaggrid/js
$ npm ci
$ npm run build:labextension

# (optional) auto rebuild js/ upon change - run in new terminal
$ npm run watch
```

--------------------------------

### List JupyterLab Paths

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Displays the application directory, user settings directory, and workspaces directory for JupyterLab. Useful for managing JupyterLab's file structure.

```bash
# list jupyterlab folders
$ jupyter lab path
```

--------------------------------

### Install JupyterLab and Node.js via Conda

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Installs JupyterLab and a compatible Node.js version from the conda-forge channel. This is an additional step required for JupyterLab development.

```bash
# node from conda forge for a compatible version
(dev-ipyaggrid) $ conda install jupyterlab nodejs -c conda-forge
```

--------------------------------

### Jupyter Extension Status Check

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Lists the status of installed JupyterLab extensions. It shows the version, enabled status, and validation result for each extension.

```bash
jupyter labextension list
```

--------------------------------

### Develop ipyauth Documentation

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/README.md

Command to start the development server for the ipyauth documentation. This is typically run from the terminal within the project's documentation directory.

```bash
$ yarn docs:dev
```

--------------------------------

### Link ipyaggrid JupyterLab Extension

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Links the ipyaggrid JupyterLab extension. The '--no-build' flag is used, implying that the JavaScript build step has already been completed.

```bash
$ jupyter labextension link ipyaggrid/js --no-build

# you also must have installed ipywidgets in jupyterlab:
# $ jupyter labextension install @jupyter-widgets/jupyterlab-manager
```

--------------------------------

### Enable ipyaggrid Notebook Extension

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Enables the ipyaggrid extension for the Classic Jupyter Notebook. This command makes the extension active in the notebook environment.

```bash
$ jupyter nbextension enable --py --sys-prefix ipyaggrid
```

--------------------------------

### Build VS Code Workspace for Notebook Folders

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Generates a '.code-workspace' file for Visual Studio Code to easily open all relevant folders for Classic Notebook development. Requires a Python script for generation.

```bash
# build .code-workspace file
$ python util/build_code_workspace_notebook.py
$ code ipyaggrid-ext-folders-notebook.code-workspace
```

--------------------------------

### Build VS Code Workspace for JupyterLab Folders

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Generates a '.code-workspace' file for Visual Studio Code to easily open all relevant folders for JupyterLab development. Requires a Python script for generation.

```bash
# build .code-workspace file
$ python util/build_code_workspace_jupyterlab.py
$ code ipyaggrid-ext-folders-jupyterlab.code-workspace
```

--------------------------------

### Setup Documentation Directories

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

Creates necessary directories for storing code snippets and Vue components. It also attempts to copy these generated files into the VuePress documentation structure, handling potential path issues.

```python
folder_code = 'code-snippets'
if not os.path.exists(folder_code):
    os.makedirs(folder_code)
    
try:
    folder_code_copy = os.path.join('..', 'content', 'code-snippets')
    if not os.path.exists(folder_code_copy):
        os.makedirs(folder_code_copy)
except:
    pass

folder_vue = 'example-vue-components'
if not os.path.exists(folder_vue):
    os.makedirs(folder_vue)
    
try:
    folder_code_copy = os.path.join('..', 'content', '.vuepress', 'components')
    if not os.path.exists(folder_code_copy):
        os.makedirs(folder_code_copy)
except:
    pass
    
grid_export = []
```

--------------------------------

### Install Python Package in Development Mode

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Installs the Python package for ipyaggrid in editable (development) mode using pip. This allows changes in the source code to be reflected immediately without reinstallation.

```bash
# install Python package
cd ..
$ pip install -e .
```

--------------------------------

### Simple ag-Grid Setup and Data Display

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/overview/ag-Grid.md

Demonstrates the basic setup for ag-Grid, including defining row data, column definitions, and grid options. It shows how to instantiate the grid and interact with its API to set data. Requires an HTML element with id 'myGrid'.

```javascript
var rowDat = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxter", price: 72000 }
];

var columnDef = [
  { headerName: "Make", field: "make" },
  { headerName: "Model", field: "model" },
  { headerName: "Price", field: "price" }
];

var gridOptions = {
  columnDefs: columnDef,
  enableFilter: true,
  defaultColDef: {
    editable: true
  },
  rowSelection: "multiple",
  enableSorting: true
};

var gridDiv = document.querySelector("#myGrid");
new agGrid.Grid(gridDiv, gridOptions);

gridOptions.api.setRowData(rowDat);
```

--------------------------------

### Generate Vue Components from ipyaggrid Examples

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

A Python script that iterates through saved ipyaggrid example configurations, generates Vue.js components with embedded grid HTML, and copies these components along with their Python source files to designated directories. This facilitates the integration of ipyaggrid examples into a Vue.js project.

```python
import re
import simplejson as json
import os
import shutil

# Assume grid_export is a list of dictionaries containing grid data and metadata
# Example structure:
# grid_export = [
#     {'name': 'country-codes-grid', 'height': 400, 'grid': {'manager_state': {...}, 'script_tags': '...', 'html_state': '...', 'grid_div': '...'}},
#     {'name': 'status-bar', 'height': 410, 'grid': {'manager_state': {...}, 'script_tags': '...', 'html_state': '...', 'grid_div': '...'}}
# ]

# Assume folder_vue and folder_code are defined
folder_vue = './vue'
folder_code = './code'

# Dummy data for demonstration if grid_export is not populated from previous steps
# In a real scenario, this would be populated by the grid generation steps.
grid_export = [
    {
        'name': 'example-grid-with-country-codes',
        'height': 400,
        'grid': {
            'manager_state': {'version': 1, 'state': {}},
            'script_tags': '<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>',
            'html_state': '<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>',
            'grid_div': '<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>'
        }
    },
    {
        'name': 'example-status-bar',
        'height': 410,
        'grid': {
            'manager_state': {'version': 1, 'state': {}},
            'script_tags': '<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>',
            'html_state': '<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>',
            'grid_div': '<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>'
        }
    }
]


def multiple_replace(text, dic):
  # Create a regex from the dict keys
  regex = re.compile('(%s)' % '|'.join(map(re.escape, dic.keys())))

  # For each match, lookup corresponding value in dict
  return regex.sub(lambda mo: dic[mo.string[mo.start():mo.end()]], text) 

content_tpl = """
<template>
  <div class="example-ipyaggrid">
      <iframe 
        srcdoc='__srcdoc__'
        height="__height__"
        width="100%"
        frameborder="0"
      ></iframe>
  </div>
</template>

<script>
export default {
  name: '__name__',
  data() {
    return {}
  }
}
</script>
"""


for d in grid_export:
    name_snippet = d['name']
    # Construct a more descriptive name for the Vue component
    vue_component_name = 'example-' + name_snippet.replace('_', '-') # e.g., 'example-status-bar'
    print(f'Processing: {vue_component_name}')
    
    # manager_state = json.dumps(d['grid']['manager_state']) # Original line
    # Escaping for srcdoc requires careful handling. JSON string itself is fine.
    manager_state_json = json.dumps(d['grid']['manager_state'])

    # Construct the srcdoc content. Ensure proper escaping for attributes.
    # The original code might have issues with escaping if manager_state contains quotes.
    # For srcdoc, the entire content is treated as HTML, so internal JS/HTML needs care.
    # Assuming script_tags, html_state, grid_div are already well-formed HTML/JS snippets.
    srcdoc_content = (
        d['grid']['script_tags'] + 
        d['grid']['html_state'].format(manager_state=manager_state_json) + 
        d['grid']['grid_div']
    )
    
    # Escape the srcdoc_content for embedding into the iframe's srcdoc attribute
    # This involves escaping quotes and potentially newlines if they cause issues.
    # For srcdoc, it's often better to ensure the content itself is valid HTML/JS.
    # The original code had a commented-out escape: .replace(r"'", r'\"') which might be problematic.
    # Let's assume srcdoc_content is directly embeddable or needs minimal escaping.
    # A common approach is to escape double quotes within the srcdoc content if it's placed inside a double-quoted attribute.
    # However, srcdoc itself takes the HTML string directly.
    # The template uses `__srcdoc__` which implies it will be substituted directly.
    # Let's ensure the JSON string itself is properly escaped if it contains problematic characters for the template.
    # The template uses `__srcdoc__` which is likely substituted directly into the `srcdoc='...'` attribute.
    # Thus, the `srcdoc_content` needs to be escaped for HTML attribute context.
    # Escaping double quotes within the srcdoc content for the `srcdoc="...
```

--------------------------------

### Install ipyaggrid

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/README.md

Installs the ipyaggrid package using pip. This command is compatible with Jupyter notebook versions 5.3 and later.

```bash
$ pip install ipyaggrid

```

--------------------------------

### Install ipyaggrid for Classic Notebook

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/install.md

Installs the ipyaggrid package using pip and enables the necessary Jupyter nbextension for Classic Notebook environments. This is typically for older notebook versions.

```bash
$ pip install ipyaggrid

# if notebook<5.3 - but why would you not upgrade ??
$ jupyter nbextension enable --py --sys-prefix ipyaggrid
```

--------------------------------

### Setup ipyaggrid Environment

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/demo-ipyaggrid-python-functions.ipynb

Loads necessary IPython extensions for autoreload and imports core libraries like pandas, numpy, json, and the ipyaggrid Grid component.

```python
%load_ext autoreload
%autoreload 2

import os
import json
import pandas as pd
import numpy as np
import urllib.request as ur
from copy import deepcopy as copy
from ipyaggrid import Grid
```

--------------------------------

### Serve HTML Files via HTTP

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/demo-build-multiindex-dataframe-html.ipynb

Starts a simple Python HTTP server in the 'dump' directory to serve the generated HTML files. This is useful for previewing the output in a web browser.

```shell
!cd dump && python -m http.server 8080
```

--------------------------------

### Simple ipyaggrid Menu Layout Example

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/customize.md

A basic example demonstrating a clean layout for the ipyaggrid widget's menu using default flexbox settings. This snippet illustrates how to apply sensible defaults for handling multiple inputs and buttons.

```python
# Assuming custom-menu-1.python contains the actual code
# Example structure:
# menu = {
#     'inputs': [
#         {'name': 'Dropdown Menu'},
#         {'name': 'Quick Filter'}
#     ],
#     'buttons': [
#         {'name': 'Export to CSV'},
#         {'name': 'Export to Excel'}
#     ]
# }
# ipyaggrid_widget.menu = menu
```

--------------------------------

### Python Grid Initialization with Export Options

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/create.md

Demonstrates how to initialize an ipyaggrid Grid object with specific export modes and data frame conversion settings. This example shows setting 'buttons' export mode and enabling DataFrame output.

```python
grid = Grid(grid_data=df,
            grid_options=grid_options,
            export_mode='buttons',
            export_to_df=True)
grid
```

--------------------------------

### ipywidgets Scatter Plot Setup

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/demo-ipyaggrid-customize.ipynb

Initializes scales and creates a scatter plot using ipywidgets and bqplot. Defines axes with appropriate formatting and labels for the plotted data.

```python
from ipywidgets import Layout
from bqplot import Figure, Scatter, Axis, LinearScale, DateScale

sc_x = DateScale()
sc_y = LinearScale()

scatt = Scatter(x=dates_all, y=sec2_levels, scales={'x': sc_x, 'y': sc_y})
ax_x = Axis(scale=sc_x, label='Date')
ax_y = Axis(scale=sc_y, orientation='vertical', tick_format='0.0f', label='Security 2')
```

--------------------------------

### ipyaggrid Grid Constructor API

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/create.md

Defines the parameters for the ipyaggrid.Grid constructor, covering widget options, grid setup, menu controls, customization, and licensing. This API allows for detailed configuration of the ag-Grid component within a Jupyter environment.

```APIDOC
ipyaggrid.Grid Constructor Parameters:

Widget options:
  width : int or str, optional
  height : int, optional
  center : bool, optional
  theme : str, optional (e.g., 'ag-theme-fresh')

Grid setup:
  grid_data : list or pandas dataframe, optional (default=[])
    The data for the grid. Can be a list of dictionaries (rows) or a pandas DataFrame.
  grid_options : dict, optional (default={})
    Dictionary containing ag-Grid specific options.
  grid_options_multi : list of dict, optional (default=[])
    For multiple grid options.
  columns_fit : str, optional (default='size_to_fit')
    Method for fitting columns.
  index : bool, optional (default=False)
    Whether to include the DataFrame index.
  keep_multiindex : bool, optional (default=False)
    Whether to preserve multi-index structure.
  compress_data : bool, optional (default=True)
    Whether to compress data for transfer.

Menu options:
  quick_filter : bool, optional (default=False)
    Enables a quick filter input.
  export_csv : bool, optional (default=False)
    Enables CSV export button.
  export_excel : bool, optional (default=False)
    Enables Excel export button.
  show_toggle_delete : bool, optional (default=False)
    Shows a toggle for deleting rows.
  show_toggle_edit : bool, optional (default=False)
    Shows a toggle for editing rows.
  paste_from_excel : bool, optional (default=False)
    Enables pasting data from Excel.
  export_mode : str, optional (default='disabled')
    Mode for export functionality.
  export_to_df : bool, optional (default=True)
    Whether to export data to a DataFrame.
  hide_grid : bool, optional (default=False)
    Hides the grid interface.

Customization options:
  menu: dict, optional (default=None)
    Custom menu configuration.
  css_rules : str, optional (default='')
    Custom CSS rules to apply.
  js_helpers_custom : str, optional (default='')
    Custom JavaScript helper functions.
  js_pre_helpers : list of str, optional (default=[])
    JavaScript code to run before helpers.
  js_pre_grid : list of str, optional (default=[])
    JavaScript code to run before the grid is initialized.
  js_post_grid : list of str, optional (default=[])
    JavaScript code to run after the grid is initialized.
  user_params: dict, optional (default={})
    User-defined parameters.

License:
  license : str, optional (default='')
    License key for ag-Grid enterprise features. Setting to 'community' uses the community version.
```

--------------------------------

### Simple ipyaggrid with Column Definitions and JavaScript Renderer

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

This example demonstrates creating a basic ipyaggrid with custom column definitions, including a JavaScript function for cell rendering. It utilizes a Python list of dictionaries as input data and configures grid options for sorting, filtering, and resizing.

```python
name = 'simple-grid'
height = 500
```

```python
column_defs = [{'headerName':'Continent','field':'continent','rowGroup':True, 'hide':True},
               {'headerName':'Country','field':'country','rowGroup':True, 'hide':True},
               {'headerName':'Status','field':'status'},
               {'headerName':'Date','field':'year','cellRenderer':'''function(params){
                   if (params.value !== undefined && params.value !== null){
                   return (params.value.substring(0,4));
                   }
                   return "" 
               }'''
                },
               {'headerName':'Name','field':'name'},
               {'headerName':'Mass','field':'mass', 'aggFunc':'avg'},
               {'headerName':'Latitude','field':'latitude'},
               {'headerName':'Longitude','field':'longitude'},
              ]

grid_options = {
    'columnDefs' : column_defs,
    'enableSorting': True,
    'enableFilter': True,
    'enableColResize': True,
    'enableRangeSelection': True,
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         quick_filter=True,
         show_toggle_edit=True,
         export_mode="buttons",
         export_csv=True,
         export_excel=True,
         theme='ag-theme-balham',
         show_toggle_delete=True,
         columns_fit='auto',
         index=False,
         keep_multiindex=False)
g
```

```python
grid_export.append({'name': name,
                    'height': height,
                    'grid': g.export_html(build=False)})

```

--------------------------------

### Configure ipyaggrid with Country Codes

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

Demonstrates how to initialize an ipyaggrid Grid component with specific grid options, including a dictionary mapping country names to their ISO codes. This setup is useful for data visualization or selection components.

```python
import os
import shutil
import ipyaggrid
from ipyaggrid import Grid

# Assume dfm and data are defined elsewhere
# Example data structure:
data = [
    {'country': 'United States', 'value': 100},
    {'country': 'Canada', 'value': 80},
    {'country': 'Mexico', 'value': 90}
]

# Assume folder_code and folder_vue are defined
folder_code = './code'
folder_vue = './vue'

# Ensure directories exist
os.makedirs(folder_code, exist=True)
os.makedirs(folder_vue, exist=True)

# Example grid options with country codes
grid_options = {
    'columnDefs': [
        {'field': 'country'},
        {'field': 'value'}
    ],
    'rowData': data,
    'defaultColDef': {
        'editable': True,
        'filter': True,
        'sortable': True,
        'resizable': True,
        'minWidth': 100,
        'flex': 1
    },
    'enableRangeSelection': True,
    'pagination': True,
    'paginationPageSize': 10,
    'domLayout': 'autoHeight',
    'countryCodes': {
        "El Salvador": "sv",
        "Syrian Arab Republic": "sy",
        "Swaziland": "sz",
        "Turks and Caicos Islands": "tc",
        "Chad": "td",
        "French Southern Territories": "tf",
        "Togo": "tg",
        "Thailand": "th",
        "Tajikistan": "tj",
        "Tokelau": "tk",
        "Timor-Leste": "tl",
        "Turkmenistan": "tm",
        "Tunisia": "tn",
        "Tonga": "to",
        "Turkey": "tr",
        "Trinidad and Tobago": "tt",
        "Tuvalu": "tv",
        "Chinese Taipei": "tw",
        "Tanzania, United Republic of": "tz",
        "Ukraine": "ua",
        "Uganda": "ug",
        "United States Minor Outlying Islands": "um",
        "United States": "us",
        "Uruguay": "uy",
        "Uzbekistan": "uz",
        "Holy See (Vatican City State)": "va",
        "Saint Vincent and the Grenadines": "vc",
        "Venezuela": "ve",
        "Virgin Islands, British": "vg",
        "Virgin Islands, U.S.": "vi",
        "Vietnam": "vn",
        "Vanuatu": "vu",
        "Wallis and Futuna": "wf",
        "Samoa": "ws",
        "Kosovo": "xk",
        "Yemen": "ye",
        "Mayotte": "yt",
        "South Africa": "za",
        "Zambia": "zm",
        "Zimbabwe": "zw"
    }
}

# Assume helpers_custom is defined if needed
helpers_custom = {}

g = Grid(grid_options=grid_options,
         theme='ag-theme-balham',
         grid_data=data,
         js_helpers_custom = helpers_custom
        )

# To display the grid in a Jupyter environment:
# g

# For saving or exporting, you might use:
# grid_export.append({'name': 'country-codes-grid', 'height': 400, 'grid': g.export_html(build=False)})

```

--------------------------------

### Serve HTML File Locally

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/demo-build-dataframe-output-html.ipynb

Starts a simple Python HTTP server in the 'dump' directory to serve the generated HTML file. This allows viewing the exported data in a web browser.

```shell
!cd dump && python -m http.server 8080
```

--------------------------------

### ipyaggrid Themes

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

Demonstrates applying different visual themes to the ipyaggrid. It shows how to select from a list of available themes like 'ag-theme-balham-dark', 'ag-theme-material', and 'ag-theme-fresh' to style the grid.

```python
name = 'themes'
height = 370
```

```python
column_defs = [{'field': c} for c in dfm.columns[:7]]

grid_options = {
    'columnDefs' : column_defs,
}

themes = [
    'ag-theme-balham',
    'ag-theme-balham-dark',
    'ag-theme-material',
    'ag-theme-fresh',
    'ag-theme-dark',
    'ag-theme-blue',
    'ag-theme-bootstrap',
    'ag-theme-excel', # custom style added by ipyaggrid
]

g = Grid(grid_data=dfm,
         theme='ag-theme-balham-dark',
#          theme='ag-theme-balham',
#          theme='ag-theme-excel',
         grid_options=grid_options)
g
```

```python
grid_export.append({'name': name,
                    'height': height,
                    'grid': g.export_html(build=False)})
```

--------------------------------

### ipyaggrid Uninstall Commands

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/dev_install.md

Provides commands to uninstall the ipyaggrid package and its associated Jupyter extensions. This includes removing the classic notebook extension, the JupyterLab extension, and the Python package itself.

```APIDOC
Jupyter Extension and Package Uninstall:

1. Remove Classic Notebook Extension:
   Command: jupyter nbextension uninstall --py --sys-prefix <package_name>
   Example: jupyter nbextension uninstall --py --sys-prefix ipyaggrid
   Description: Uninstalls the Python-based notebook extension from the system prefix.

2. Remove JupyterLab Extension:
   Command: jupyter labextension unlink <extension_path>
   Example: jupyter labextension unlink ipyaggrid/js
   Description: Unlinks the JupyterLab extension from the application directory.

3. Uninstall Python Package:
   Command: pip uninstall <package_name>
   Example: pip uninstall ipyaggrid
   Description: Removes the ipyaggrid Python package from the environment.
```

--------------------------------

### Manually Deploy ipyauth Documentation

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/README.md

A multi-step bash script for manually building and deploying the ipyauth documentation. It involves building the documentation, navigating to the output directory, committing changes, and pushing to a remote repository's pages branch.

```bash
# build
cd docs
export NODE_OPTIONS=--openssl-legacy-provider;
yarn docs:build

# navigate into the build output directory
cd ../public

# you need to remove public/ from .gitignore for manual run
git add .
git commit -m 'deploy'

# you are deploying to https://oscar6echo.gitlab.io/ipyauth
git push -f git@gitlab.com:oscar6echo/ipyauth.git master:pages
# or equivalently
git subtree push --prefix public/ origin pages

# back repo top level
cd ..
```

--------------------------------

### Install ipyaggrid for JupyterLab

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/install.md

Installs the ipyaggrid package using pip and the corresponding JupyterLab extension. It also includes a command to install the core JupyterLab manager if it's not already present.

```bash
$ pip install ipyaggrid
$ jupyter labextension install ipyaggrid

# if not already installed
$ jupyter labextension install @jupyter-widgets/jupyterlab-manager
```

--------------------------------

### Create ipyaggrid with Custom Menu Buttons (Python)

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

Configures an ipyaggrid instance with custom menu buttons. It sets up column definitions, grid options, and integrates a menu with multiple button actions for console logging, demonstrating a flexible menu system.

```python
column_defs = [{'field':'origin', 'headerName': 'Origin'},\n                  {'field':'make', 'headerName': 'Make'},\n                  {'field':'carName', 'headerName':'Model'},\n                  {'field':'price', 'headerName': 'Price'}]\n\n\ngrid_options = {\n    'enableColResize': True,\n    'columnDefs': column_defs,\n    'enableFilter':True,\n    'enableSorting':True,\n    'animateRows':True,\n    'groupMultiAutoColumn': True,\n};\n\ng = 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')\ng
```

--------------------------------

### Nominatim API Request Example

Source: https://github.com/widgetti/ipyaggrid/blob/master/test-zone/notebooks/build-data.ipynb

Defines a URL for the OpenStreetMap Nominatim API to perform a reverse geocoding lookup for specific latitude and longitude coordinates. This is a standalone example of constructing the API request URL.

```python
url = "https://nominatim.openstreetmap.org/reverse?format=json&lat=30&lon=21.3&zoom=10&addressdetails=1"
```

--------------------------------

### Elaborate ipyaggrid Menu Customization Example

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/customize.md

An advanced example showcasing detailed customization of the ipyaggrid widget's menu using the defined input structure. This allows for precise control over CSS styles and layout for both inputs and buttons.

```python
# Assuming custom-menu-2.python contains the actual code
# Example structure:
# menu = {
#     'inputs': [
#         {'name': 'Dropdown Menu', 'css_flex': {'flex': '1 1 0%'}},
#         {'name': 'Quick Filter', 'css_flex': {'flex': '0 0 200px'}}
#     ],
#     'buttons': [
#         {'name': 'Export to CSV', 'custom_css': {'color': 'blue'}},
#         {'name': 'Custom Button', 'action': 'alert("Custom Action!");'}
#     ],
#     'input_div_css': {'display': 'flex', 'justify_content': 'space-between'},
#     'button_div_css': {'display': 'flex', 'align_items': 'center'}
# }
# ipyaggrid_widget.menu = menu
```

--------------------------------

### MultiOptions Grid Configuration

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

Configures an ipyaggrid grid with multiple distinct sets of grid options, allowing users to switch between different grid behaviors. It also demonstrates custom CSS classes for styling cells, such as highlighting high prices.

```python
name = 'multi-options'
height = 410
```

```python
css_rules = """
.number-cell {
    text-align: left;
}
.price-high {
    color: red;
}

"""

ccf = "function(params) { return params.value >32000 ? 'price-high' : ''; }"
column_defs_1 = [{'field':'origin', 'headerName': 'Origin'},
                  {'field':'make', 'headerName': 'Make'},
                  {'field':'carName', 'headerName':'Model'},
                  {'field':'price', 'headerName': 'Price', 'cellClass': ccf}]

column_defs_2 = [{'field':'origin', 'headerName': 'Origin', 'hide':True, 'rowGroup':True},
                  {'field':'make', 'headerName': 'Make'},
                  {'field':'carName', 'headerName':'Model'},
                  {'field':'price', 'headerName': 'Price'}]


grid_options_1 = {
    'columnDefs' : column_defs_1,
    'enableSorting': True,
    'enableFilter': True,
    'enableColResize': False,
}

grid_options_2 = {
    'columnDefs' : column_defs_2,
    'enableSorting': False,
    'enableFilter': False,
    'enableColResize': True,
    'rowSelection': 'multiple',
}

g = Grid(grid_data=cars,
            css_rules=css_rules,
            grid_options_multi=[('Sorting, color, filter', grid_options_1),
                                ('Selection, grouping, no-filter', grid_options_2)],
            theme='ag-theme-balham')
g
```

```python
grid_export.append({'name': name,
                    'height': height,
                    'grid': g.export_html(build=False)})

```

--------------------------------

### Python: Initialize ag-grid with quick filter and data

Source: https://github.com/widgetti/ipyaggrid/blob/master/test-zone/notebooks/test-features.ipynb

Sets up another instance of the ag-grid widget, this time with a simpler dataset and enabling the quick filter functionality. It defines basic column headers and data rows, then configures the grid for interactive filtering.

```python
css_rules="""
.gridDiv"""

rowDat = [
            { 'make': 'Toyota', 'model': 'Celica', 'price': 35000 },
            { 'make': 'Ford', 'model': 'Mondeo', 'price': 32000 },
            { 'make': 'Porsche', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche2', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche4', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche45', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche56', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche1', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche43', 'model': 'Boxter', 'price': 72000 },
            { 'make': 'Porsche', 'model': 'Boxter', 'price': 73000 },
            { 'make': 'Porsche', 'model': 'Boxter', 'price': 72000 },
        ]

columnDef = [
            { 'headerName': 'Make', 'field': 'make'},
            { 'headerName': 'Model', 'field': 'model' },
            { 'headerName': 'Price', 'field': 'price'},
        ]

gridOptions = {'columnDefs': columnDef,}

a = Grid(grid_options = gridOptions,
         grid_data = rowDat,
         show_toggle_edit=True,
        sync_on_edit=False)
```

--------------------------------

### Uninstall ipyaggrid from JupyterLab

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/install.md

Uninstalls the ipyaggrid JupyterLab extension and the ipyaggrid Python package. This process removes the package and its associated frontend components.

```bash
$ jupyter labextension uninstall ipyaggrid
$ pip uninstall ipyaggrid
```

--------------------------------

### Uninstall ipyaggrid from Classic Notebook

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/install.md

Uninstalls the ipyaggrid package and disables its nbextension for Classic Notebook environments. This command is for older notebook versions.

```bash
# if notebook<5.3
$ jupyter nbextension uninstall --py --sys-prefix ipyaggrid

$ pip uninstall ipyaggrid
```

--------------------------------

### Node.js Package Publishing

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/dev/publish.md

Steps to build the Javascript files and publish the Node package to npmjs.org. This involves navigating to the 'js' directory, installing dependencies, and executing the publish command.

```bash
# starting from repo top folder
# make sure the version in js/package.json is correct

# build notebook extension javascript
$ cd js
$ npm ci

# test run to see what you will publish
# npm pack

# login npm if necessary
npm login

# publish npm package to npmjs.org - using ~/.npmrc
$ npm publish --access=public
# if you made a mistake you can unpublish in the first 24h
```

--------------------------------

### Prepare Car Data with Random Prices

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/doc-builder.ipynb

This Python snippet initializes a list of car dictionaries and adds a random 'price' attribute to each car. It serves as a data preparation step before displaying the data in a grid.

```python
import random as rd

cars = [
  { "carName": "100 ls", "origin": "Europe", "make":"Audi" },
  { "carName": "Chevelle Malibu", "origin": "US", "make":"Chevrolet" },
  { "carName": "Skylark 320", "origin": "US", "make":"Buick" },
  { "carName": "Satellite", "origin": "US", "make":"Plymouth" },
  { "carName": "Rebel SST", "origin": "US", "make":"AMC" },
  { "carName": "Torino", "origin": "US", "make":"Ford" },
  { "carName": "Peugeot 504", "origin": "Europe", "make":"Peugeot" },
  { "carName": "Galaxie 500", "origin": "US", "make":"Ford" },
  { "carName": "Impala", "origin": "US", "make":"Chevrolet" },
  { "carName": "Fury III", "origin": "US", "make":"Plymouth" },
  { "carName": "Catalina", "origin": "US", "make":"Pontiac" },
  { "carName": "Ambassador dpl", "origin": "US", "make":"AMC" },
  { "carName": "Challenger se", "origin": "US", "make":"Dodge" },
  { "carName": "Cuda 340", "origin": "US", "make":"Plymouth" },
  { "carName": "Monte Carlo", "origin": "US", "make":"Chevrolet" },
  { "carName": "Estate Wagon (SW)", "origin": "US", "make":"Buick" },
  { "carName": "Corona Mark II", "origin": "Asia", "make":"Toyota" },
  { "carName": "Duster", "origin": "US", "make":"Plymouth" },
  { "carName": "Hornet", "origin": "US", "make":"AMC" },
  { "carName": "Maverick", "origin": "US", "make":"Ford" },
  { "carName": "PL510", "origin": "Asia", "make":"Datsun" },
  { "carName": "1131 Deluxe Sedan", "origin": "Europe", "make":"Volkswagen" },
  { "carName": "SAAB 99e", "origin": "Europe", "make":"SAAB" },
  { "carName": "BMW 2002", "origin": "Europe", "make":"BMW" },
  { "carName": "Gremlin", "origin": "US", "make":"AMC" },
  { "carName": "F250", "origin": "US", "make":"Ford" },
  { "carName": "C20", "origin": "US", "make":"Chevy" },
  { "carName": "D200", "origin": "US", "make":"Dodge" },
  { "carName": "PL411", "origin": "Asia", "make":"Datsun" }
]


for elem in cars:
    elem.update({'price':rd.randint(20000,40000)})

```

--------------------------------

### Access Raw Meteorite Data

Source: https://github.com/widgetti/ipyaggrid/blob/master/test-zone/notebooks/build-data.ipynb

Provides an example of accessing a specific element within the raw meteorite data structure. This is useful for inspecting the data format before or during processing.

```python
meteorites['data'][2]
```

--------------------------------

### Ag-Grid Custom JavaScript Helpers

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/notebooks/demo-ipyaggrid-customize.ipynb

Provides custom JavaScript helper functions that can be used within other JavaScript code executed by ag-Grid. This example defines a d3 formatter for floats.

```javascript
helpersCustom = {
    formatFloat3: d3.format(',.3f')
}
```

--------------------------------

### Disable Data Synchronization

Source: https://github.com/widgetti/ipyaggrid/blob/master/docs/content/guide/create.md

Disables updates to `grid_data_out` when set to True. This option is intended to be set after grid creation, for example, by using `grid.unsync = True`, to control data synchronization flow.

```python
unsync: bool, default=False
```
Tokens:
Raw