ipyaggrid

https://widgetti.github.io/ipyaggrid/guide/
Admin
ipyaggrid is a Python widget that wraps ag-Grid to create interactive, editable data grids in...
Tokens:11,889
Snippets:39
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Simple ipyaggrid Example with Custom Buttons (Python)

Source: https://widgetti.github.io/ipyaggrid/guide/customize

This comprehensive example illustrates a basic ipyaggrid setup, including defining column definitions, grid options, and integrating custom menu buttons with JavaScript actions. It showcases how to configure the `Grid` object with various features like quick filtering, export options, and theming.

```Python
column_defs = [{'field':'origin', 'headerName': 'Origin'},
                  {'field':'make', 'headerName': 'Make'},
                  {'field':'carName', 'headerName':'Model'},
                  {'field':'price', 'headerName': 'Price'}]

grid_options = {
    'enableColResize': True,
    'columnDefs': column_defs,
    'enableFilter':True,
    'enableSorting':True,
    'animateRows':True,
    'groupMultiAutoColumn': True,
};

g = Grid(grid_data = cars,
            quick_filter=True,
            show_toggle_edit=True,
            show_toggle_delete=True,
            export_excel=True,
            export_csv=True,
            grid_options=grid_options,
            menu={'buttons':
                  [
                      {'name':'Log foo 1', 'action':'console.log("foo");'},
                      {'name':'Log bar 1', 'action':'console.log("bar");'},
                      {'name':'Log foo 2', 'action':'console.log("foo");'},
                      {'name':'Log foo 3', 'action':'console.log("foo");'},
                      {'name':'Log foo 4', 'action':'console.log("foo");'},
                  ],
                 },
            export_mode="buttons",
            theme='ag-theme-balham')
g
```

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

### Install ipyaggrid for Classic Notebook

Source: https://widgetti.github.io/ipyaggrid/guide/install

Installs the ipyaggrid package using pip and enables the necessary Jupyter nbextension for classic Notebook environments. Assumes pip and Jupyter are already installed.

```shell
$ pip install ipyaggrid

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

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

### ipyaggrid Grid Constructor Parameters

Source: https://widgetti.github.io/ipyaggrid/guide/create

Details the parameters available for the ipyaggrid Grid constructor, categorized by widget options, grid setup, and menu options.

```APIDOC
ipyaggrid.Grid(
    # Widget options
    width : int or str,
    height : int,
    center : bool,
    theme : str,

    # Grid setup
    grid_data : list or pandas dataframe,
    grid_options : dict,
    grid_options_multi : list of dict,
    columns_fit : str,
    index : bool,
    keep_multiindex : bool,
    compress_data : bool,

    # Menu options
    quick_filter : bool,
    export_csv : bool,
    export_excel : bool,
    show_toggle_delete : bool,
    show_toggle_edit : bool,
    paste_from_excel : bool,
    export_mode : str,
    export_to_df : bool,
    hide_grid : bool
)

# Parameter Descriptions:
# Widget options:
#   width: Sets the width of the grid widget.
#   height: Sets the height of the grid widget.
#   center: If True, centers the grid widget on the page.
#   theme: Specifies the ag-Grid theme to apply (e.g., 'ag-theme-alpine', 'ag-theme-balham').
#
# Grid setup:
#   grid_data: The data to be displayed in the grid. Can be a list of dictionaries or a pandas DataFrame.
#   grid_options: A dictionary containing ag-Grid specific configurations (e.g., column definitions, row data, etc.). Refer to ag-Grid documentation for details.
#   grid_options_multi: A list of dictionaries, used for advanced multi-grid configurations.
#   columns_fit: Controls how columns are sized (e.g., 'auto_size', 'size_to_fit').
#   index: If True, includes the DataFrame index as a column.
#   keep_multiindex: If True, preserves multi-level indexes when converting to grid_data.
#   compress_data: If True, compresses the data for potentially faster transfer.
#
# Menu options:
#   quick_filter: If True, enables a quick filter input box above the grid.
#   export_csv: If True, enables a button to export data to CSV.
#   export_excel: If True, enables a button to export data to Excel.
#   show_toggle_delete: If True, shows a button to toggle data deletion.
#   show_toggle_edit: If True, shows a button to toggle data editing mode.
#   paste_from_excel: If True, enables pasting data from Excel into the grid.
#   export_mode: Defines the mode for exporting data (e.g., 'all', 'filtered').
#   export_to_df: If True, allows exporting the grid data back to a pandas DataFrame.
#   hide_grid: If True, hides the grid interface.

# Example Usage:
# grid = ipyaggrid.Grid(
#     grid_data=my_dataframe,
#     grid_options=my_grid_options_dict,
#     theme='ag-theme-balham',
#     quick_filter=True,
#     export_excel=True
# )
```

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

### Install ipyaggrid for JupyterLab

Source: https://widgetti.github.io/ipyaggrid/guide/install

Installs the ipyaggrid package using pip and the JupyterLab extension manager. Includes a step to install the JupyterLab manager if it's not already present.

```shell
$ pip install ipyaggrid
$ jupyter labextension install ipyaggrid

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

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

### ipyaggrid: Elaborate Example with Custom Menu and Export

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Demonstrates advanced ipyaggrid configuration, including defining column structures, enabling grid features like filtering and sorting, and customizing the context menu with JavaScript actions and specific button styling. This example highlights the flexibility in creating interactive grid elements and export functionalities.

```python
column_defs = [{'field':'origin', 'headerName': 'Origin'},
                  {'field':'make', 'headerName': 'Make'},
                  {'field':'carName', 'headerName':'Model'},
                  {'field':'price', 'headerName': 'Price'}]

grid_options = {
    'enableColResize': True,
    'columnDefs': column_defs,
    'enableFilter':True,
    'enableSorting':True,
    'animateRows':True,
    'groupMultiAutoColumn': True,
};

g = Grid(grid_data = cars,
            quick_filter=True,
            show_toggle_edit=True,
            show_toggle_delete=True,
            export_excel=True,
            export_csv=True,
            grid_options=grid_options,
            menu={'buttons':
                  [
                      {'name':'Log foo 1', 'action':'console.log("foo");'},
                      {'name':'Log bar 1', 'action':'console.log("bar");'},
                      {'name':'Log foo 2', 'action':'console.log("foo");'},
                      {'name':'Export to Excel', 'custom_css': { # Changing the order
                          'background':'lightgrey',
                          'border':'solid darkgrey 1px',
                          'border-radius': '10px'}
                      },
                      {'name':'Export to CSV', 'custom_css':{
                          'background':'lightgrey',
                          'border':'solid darkgrey 1px',
                          'border-radius': '10px'}
                      },
                      {'name':'Export Grid', 'custom_css':{
                          'background':'lightgrey',
                          'border':'solid darkgrey 1px',
                          'border-radius': '10px'}
                      },
                      {'name':'Log foo 3', 'action':'console.log("foo");'},
                      {'name':'Log foo 4', 'action':'console.log("foo");'},
                      {'name':'Log foo 5', 'action':'console.log("foo");'},
                  ],
                  'inputs':[
                      {'name':'Quick Filter', 'flex_css':
                       {'width':'100px',
                        'border-radius':'10px'}
                      }
                  ],
                  'button_default_css':
                  {
                      'color':'slateblue',
                      'border':'solid darkgrey 1px',
                      'border-radius': '10px',
                  },
                  'menu_div_css':
                  {
                      'flex-wrap':'nowrap',
                      'justify-content':'space-between',
                      'border':'solid 1px black',
                      'border-radius':'5px',
                      'align-items':'stretch'
                  },
                  'input_div_css':
                  {
                      'flex-direction':'column',
                      'align-items':'flex-end',
                      'border':'solid 1px red',
                      'border-radius':'5px',
                      'margin':'5px'
                  },
                  'button_div_css':
                  {
                      'flex-direction':'row-reverse',
                      'flex-wrap': 'wrap',
                      'flex-basis':'485px',
                      'border':'solid 1px darkred',
                      'border-radius':'5px',
                      'margin':'5px'
                  }
                 },
            export_mode="buttons",
            theme='ag-theme-balham')
g
```

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

### ipyaggrid Menu Structure Example

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Illustrates the DOM structure of the ipyaggrid widget's menu, showing the hierarchy of divs and common CSS classes used for styling. This structure is based on flexbox for layout.

```html
# Widget DOM structure with CSS classes
main-div
├── menu-div
|   ├── input-div
|   |   ├── dropdown-menu
|   |   ├── quick-filter
|   |   ├── toggle-edit
|   |   └── toggle-delete
|   └── button-div
|       ├── export-to-csv
|       ├── export-to-excel
|       ...
|       └── custom-button
└── grid-div

# Styling notes:
# `menu-div`, `input-div`, `button-div` are flexbox divs (display: flex).
# CSS style options can be applied via `menu` keys like `menu_div_css`, `input_div_css`, `button_div_css`.
# Inner elements can be styled using `css_flex` and `css` keys in `menu['buttons']` or `menu['inputs']`.
```

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

### Create ipyaggrid Grid

Source: https://widgetti.github.io/ipyaggrid/guide/create

Demonstrates the fundamental steps to create an ipyaggrid grid. This involves preparing data (list of dicts or pandas DataFrame), defining ag-Grid options, and passing them to the Grid constructor.

```Python
import ipyaggrid
import pandas as pd

# 1. Prepare your data
data = [
    {'col1': 'value1', 'col2': 10},
    {'col1': 'value2', 'col2': 20}
]
df = pd.DataFrame(data)

# 2. Define ag-Grid options (example)
grid_options = {
    "columnDefs": [
        {"headerName": "Column 1", "field": "col1"},
        {"headerName": "Column 2", "field": "col2"}
    ],
    "rowData": df.to_dict('records') # ipyaggrid expects list of dicts
}

# 3. Instantiate the Grid
# Use ipyaggrid.Grid for enterprise or ipyaggrid.community.Grid for community
grid_widget = ipyaggrid.Grid(
    grid_data=df, # Can also pass DataFrame directly
    grid_options=grid_options,
    # Other ipyaggrid specific options can be passed here
    theme='ag-theme-alpine',
    columns_fit='auto_size',
    quick_filter=True
)

# 4. Display the widget
grid_widget
```

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

### Configure Data Export to Python

Source: https://widgetti.github.io/ipyaggrid/guide/create

Shows how to configure ipyaggrid to export data back to the Python kernel. It covers setting the export mode and determining the output format (DataFrame or list of dicts), along with an example of grid instantiation.

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

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

### ipyaggrid Grid Constructor Parameters

Source: https://widgetti.github.io/ipyaggrid/guide/create

Defines the parameters available for initializing the ipyaggrid Grid widget. These parameters control various aspects of the grid's appearance, behavior, and data handling.

```python
def __init__(self,
              width='100%',
              height=0,
              center=False,
              theme='ag-theme-fresh',

              grid_data=[],
              grid_options={},
              grid_options_multi=[],
              columns_fit='size_to_fit',
              index=False,
              keep_multiindex=False,
              compress_data=True,

              quick_filter=False,
              export_csv=False,
              export_excel=False,
              show_toggle_delete=False,
              show_toggle_edit=False,
              paste_from_excel=False,
              export_mode='disabled',
              export_to_df=True,
              hide_grid=False,

              js_helpers_custom='',
              js_pre_helpers=[],
              js_pre_grid=[],
              js_post_grid=[],
              css_rules='',
              menu=None,
              user_params={},

              license=''):

```

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

### Create Custom Action Buttons in ipyaggrid (Python)

Source: https://widgetti.github.io/ipyaggrid/guide/customize

This example shows how to create entirely new buttons with custom actions in ipyaggrid. By providing an `action` string, you can embed JavaScript code that will be executed when the button is clicked, allowing for interactive functionality.

```Python
menu = {
    'buttons':[
        {'name':'Custom Button', 'action':'console.log("foo");'}
    ]
}
```

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

### Apply Multiple Grid Options

Source: https://widgetti.github.io/ipyaggrid/guide/create

Demonstrates how to apply multiple sets of grid options to a single grid instance. This allows for compact representation using a dropdown to switch between configurations and avoids data duplication.

```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
```

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

### Uninstall ipyaggrid from JupyterLab

Source: https://widgetti.github.io/ipyaggrid/guide/install

Removes the ipyaggrid package and its JupyterLab extension.

```shell
$ jupyter labextension uninstall ipyaggrid
$ pip uninstall ipyaggrid
```

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

### Uninstall ipyaggrid from Classic Notebook

Source: https://widgetti.github.io/ipyaggrid/guide/install

Removes the ipyaggrid package and its associated notebook extension from classic Jupyter Notebook environments.

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

$ pip uninstall ipyaggrid
```

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

### ipyaggrid: Custom CSS Styling for Rows and Columns

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Applies custom CSS rules to an ipyaggrid instance using the `css_rules` parameter to override default styling. This example targets ag-Grid classes like `.ag-row-hover` and `.ag-column-hover` for dynamic row and column highlighting.

```python
# putting in !important so it overrides the theme's styling as it hovers the row also
css_rules = """
.ag-row-hover {
    background-color: lightblue !important;
}

.ag-column-hover {
    background-color: powderblue;
}

.ag-row-hover .ag-column-hover {
    background-color: deepskyblue !important;
}
"""

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

grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         css_rules=css_rules,
         grid_options=grid_options)
g
```

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

### ipyaggrid Customization Parameters

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Overview of parameters available for customizing the ipyaggrid widget's menu, CSS, and JavaScript behavior. These parameters allow fine-grained control over the widget's presentation and interactivity.

```APIDOC
ipyaggrid Customization Parameters:

* `menu`: dict controlling the menu on top of the grid.
  - `menu_div_css`: CSS style options for the main menu div.
  - `input_div_css`: CSS style options for the input div within the menu.
  - `button_div_css`: CSS style options for the button div within the menu.
  - `button_default_css`: Default CSS for buttons.
  - `button_default_flex_css`: Default flex CSS for buttons.
  - `inputs`: List of input elements in the menu (e.g., Dropdown Menu, Quick Filter, Toggle Edit, Toggle Delete).
    - Each input can have `name`, `css_flex`, and `css` properties.
  - `buttons`: List of buttons in the menu (e.g., Export to CSV, Export to Excel, custom buttons).
    - Each button can have `name`, `action` (JS code), `flex_css`, `custom_css`, and `hide` properties.

* `css_rules`: define your custom CSS for this widget.

* `js_pre_helpers`: custom JS to evaluate to be used in the helpers.

* `js_helpers_custom`: custom JS functions that may be used in `grid_options` later.

* `js_pre_grid`: custom JS that can use the ag-Grid `gridOptions` variable before grid instantiation.

* `js_post_grid`: custom JS to be eval and run after grid instantiation.

* `user_params`: variable used to sync with other widgets (core or custom).
```

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

### QuickFilter

Source: https://widgetti.github.io/ipyaggrid/guide/create

Adds a filter field above the grid for basic, keystroke-driven searching. This provides a convenient way to filter data, with column-specific filtering available for more advanced needs.

```python
column_defs = [{'field':'origin', 'headerName': 'Origin'},
                  {'field':'make', 'headerName': 'Make'},
                  {'field':'carName', 'headerName':'Model'},
                  {'field':'price', 'headerName': 'Price'}]

grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=cars,
         grid_options=grid_options,
         quick_filter=True)
g
```

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

### ipyaggrid Python Functions

Source: https://widgetti.github.io/ipyaggrid/guide/create

Provides Python methods for interacting with the ipyaggrid component, including exporting data in various ways and managing selected rows.

```python
# Export all data
# .export_grid()

# Export only selected rows
# .export_selected_rows()

# Export only selected columns
# .export_selected_columns()

# Delete only selected rows
# .delete_selected_rows()
```

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

### ipyaggrid Dump Method

Source: https://widgetti.github.io/ipyaggrid/guide/export

Explains the .dump() method for creating files from exported HTML components. It supports 'standalone' mode for a single HTML file or 'all' mode for separate script, state, and div files.

```APIDOC
grid.dump(path, mode)

  - Dumps exported HTML components to files.
  - Parameters:
    - `path`: str - The folder name to dump files into.
    - `mode`: str - 'standalone' for a single HTML file, or 'all' for separate files.
  - 'all' mode creates:
    - `export_grid_scripts.html`
    - `export_grid_html_state.html`
    - `export_grid_state_{id}.json`
    - `export_grid_grid_{id}.html`
```

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

### Combining ipywidgets Manager States

Source: https://widgetti.github.io/ipyaggrid/guide/export

Illustrates the process of merging manager states when embedding multiple ipywidgets into a single HTML page to ensure a unique manager state.

```python
# Widget a
manager_state_a

# Widget b
manager_state_b

# Merge states
manager_state_a['state'] = manager_state_a['state'].update(manager_state_b['state'])
```

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

### Data Input Formats for ipyaggrid

Source: https://widgetti.github.io/ipyaggrid/guide/create

Illustrates the accepted data formats for the `grid_data` parameter. Data can be provided as a list of dictionaries or a Pandas DataFrame. Pandas DataFrames are recommended for their convenience and structure.

```python
cars = [
    {'carName': 'Chevelle', 'origin': 'US', 'make': 'Chevrolet', 'price': 30415},
    {'carName': 'Skylark 320', 'origin': 'US', 'make': 'Buick', 'price': 21042},
    ...
    {'carName': 'PL411', 'origin': 'Asia', 'make': 'Datsun', 'price': 27676}
]
```

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

### ipyaggrid Menu Configuration Structure

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Defines the expected Python dictionary structure for configuring the ipyaggrid widget's menu, including options for built-in and custom buttons, input elements, and overall div styling.

```python
# Menu configuration dictionary structure
{
  'buttons': [
    # Possible names: 'Export to CSV', 'Export to Excel', 'Export Grid',
    #                 'Export Range', 'Export Rows', 'Export Columns'
    {
      'name': 'Export to CSV',  # Builtin button
      'action': '',              # Action in JS on button click
      'flex_css': {},            # Flex CSS for the button
      'custom_css': {},         # Custom CSS for the button
      'hide': False              # Whether to hide the button
    },
    {
      'name': 'custom_button',  # A custom button
      'action': 'js_code',      # JavaScript code to execute
      'flex_css': {},
      'custom_css': {},
      'hide': False
    },
    ...
  ],
  'inputs': [
    # Possible names: 'Dropdown Menu', 'Quick Filter',
    #                 'Toggle Edit', 'Toggle Delete'
    {
      'name': 'Dropdown Menu',
      'css_flex': {},           # Flex CSS for the input container
      'css': {}                 # Custom CSS for the input element
    },
    {
      'name': 'Toggle Edit',
      'css_flex': {},
      'css': {}
    },
    ...
  ],
  'input_div_css': {},      # CSS for the input container div
  'menu_div_css': {},       # CSS for the main menu div
  'button_div_css': {},     # CSS for the button container div
  'button_default_css': {}, # Default CSS for all buttons
  'button_default_flex_css': {} # Default flex CSS for all buttons
}
```

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

### Configuring Grid Options with ag-Grid Properties

Source: https://widgetti.github.io/ipyaggrid/guide/create

Demonstrates how to define column definitions and grid properties using Python dictionaries, which are then passed to the ag-Grid JavaScript component via the `grid_options` parameter. This allows for extensive customization of the grid's appearance and functionality.

```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
```

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

### ipyaggrid: Widget Customization Parameters

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Details parameters for customizing ipyaggrid's appearance and behavior, including applying custom CSS rules and injecting custom JavaScript at various stages of widget creation. This provides developers with hooks for advanced customization.

```APIDOC
ipyaggrid Widget Customization Parameters:

css_rules: str, default=''
  - Description: Allows defining custom CSS rules as a Python string to be applied to the grid. Useful for custom renderers or overriding theme styles.
  - Example:
    css_rules = """
    .ag-row-hover {
        background-color: lightblue !important;
    }
    """

JavaScript Injection Parameters:
  - js_pre_helpers: list, default=[]
    - Description: List of JavaScript code snippets to be executed before helper functions are defined.
  - js_helpers_custom: str, default=''
    - Description: A single string containing custom JavaScript helper functions.
  - js_pre_grid: list, default=[]
    - Description: List of JavaScript code snippets to be executed before the grid is initialized.
  - js_post_grid: list, default=[]
    - Description: List of JavaScript code snippets to be executed after the grid has been initialized.
```

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

### ipyaggrid Theme Selection

Source: https://widgetti.github.io/ipyaggrid/guide/create

Applies a visual theme to the ag-Grid component. ipyaggrid supports various ag-Grid themes like 'ag-theme-fresh' (default), 'ag-theme-balham', 'ag-theme-material', etc., and includes a custom 'ag-theme-excel'. Refer to ag-Grid documentation for a full list of available themes.

```python
from ipyaggrid import Grid
import pandas as pd

# Sample DataFrame
dfm = pd.DataFrame({
    'col1': [1, 2, 3],
    'col2': ['A', 'B', 'C'],
    'col3': [True, False, True]
})

column_defs = [{'field': c} for c in dfm.columns[:7]]
grid_options = {
    'columnDefs' : column_defs,
}

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

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

### Enable Cell Editing Toggle

Source: https://widgetti.github.io/ipyaggrid/guide/create

Setting show_toggle_edit to True displays a checkbox that must be ticked before users can edit cell data by double-clicking. This acts as a safeguard against unintended edits.

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

grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         show_toggle_edit=True)
g
```

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

### Multi Index Support

Source: https://widgetti.github.io/ipyaggrid/guide/create

Preserves multi-level indices from DataFrames, converting them into ag-Grid's multi-level headers and grouped leftmost columns. This simplifies the display of complex hierarchical data within the grid.

```python
column_defs = []

grid_options = {
    'columnDefs' : column_defs,
    'suppressColumnVirtualisation':True,
}

g = Grid(grid_data=df,
         grid_options=grid_options,
         keep_multiindex=True,
         columns_fit='auto')
g
```

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

### Index Handling

Source: https://widgetti.github.io/ipyaggrid/guide/create

Controls whether the DataFrame index is automatically added as the first column. If set to False, the DataFrame index is dropped. This is useful for displaying or preserving the index information in the grid.

```python
column_defs = [{'field': dfm.index.name}] + [{'field': c} for c in dfm.columns[:3]]

grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         index=True)
g
```

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

### ipyaggrid Export HTML Method

Source: https://widgetti.github.io/ipyaggrid/guide/export

Demonstrates the usage of the .export_html() method to extract components for embedding ipyaggrid widgets into HTML. It returns a dictionary containing script tags, HTML state, manager state, and the grid div.

```python
html_export = grid.export_html()
```

```APIDOC
grid.export_html()

  - Returns a dictionary with keys:
    - `script_tags`: str - Scripts for require.js and jupyter-widgets-html-manager.
    - `html_state`: str - HTML template for the manager state.
    - `manager_state`: dict - Contains the state of all widgets.
    - `grid_div`: str - The HTML div element for the widget.
```

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

### ipyaggrid Grid Dimensions and Placement

Source: https://widgetti.github.io/ipyaggrid/guide/create

Configures the visual size and centering of the ipyaggrid component. The 'width' parameter accepts an integer for pixels or a string (e.g., '100%', '550px'). 'height' takes an integer for pixels. The 'center' boolean parameter enables auto margins for centering the grid.

```python
from ipyaggrid import Grid
import pandas as pd

# Sample DataFrame
dfm = pd.DataFrame({
    'col1': [1, 2, 3],
    'col2': ['A', 'B', 'C'],
    'col3': [True, False, True]
})

column_defs = [{'field': c} for c in dfm.columns[:3]]
grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         width=600,
         height=500,
         grid_options=grid_options,
         center=True)
g
```

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

### Paste from Excel

Source: https://widgetti.github.io/ipyaggrid/guide/create

Enables pasting data directly from Excel into the grid without creating a DataFrame. Requires at least one cell to be clickable. Note that this method has limitations on precise column definition compared to using DataFrames.

```python
grid_options = {
    'columnDefs':[{'field':''}],
    'enableFilter':True,
    'enableSorting':True,
    'animateRows':True,
}

g = Grid(grid_options=grid_options,
         grid_data=[{'':''}],
         paste_from_excel=True)
g
```

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

### Enable Automatic Grid Sync

Source: https://widgetti.github.io/ipyaggrid/guide/create

Setting sync_grid to True ensures that the grid's data is automatically synchronized with the Python dataframe (g.grid_data_out['grid']) upon initialization or any data update. This provides immediate consistency but can be resource-intensive for large datasets.

```python
import pandas as pd
from IPython.display import display

df2 = pd.DataFrame({'val':['a']})
column_defs = [{'headerName': 'Col', 'field': 'val', 'editable': True}]

grid_options = {
    'columnDefs': column_defs
}

g = Grid(grid_data=df2,
         grid_options=grid_options,
         sync_grid=True,
         width=200,
         height=100)

display(g)

# upon initialization or grid data update the dataframe is: g.grid_data_out['grid']
```

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

### ipyaggrid File Export Options

Source: https://widgetti.github.io/ipyaggrid/guide/create

Enables buttons for exporting grid data to CSV or Excel formats. 'export_csv' and 'export_excel' are boolean flags that add these functionalities above the grid. Note that Excel export is an enterprise feature of ag-Grid.

```python
from ipyaggrid import Grid
import pandas as pd

# Sample DataFrame
dfm = pd.DataFrame({
    'col1': [1, 2, 3],
    'col2': ['A', 'B', 'C'],
    'col3': [True, False, True]
})

column_defs = [{'field': c} for c in dfm.columns[:7]]
grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         export_csv=True,
         export_excel=True)
g
```

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

### Custom Buttons: Highlight High Prices (Python/JS)

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Creates a custom button to highlight cells with prices above a threshold. The Python code defines a button that executes JavaScript to iterate through grid nodes, check the 'price' value, and use `gridOptions.api.flashCells()` to visually indicate matching cells.

```python
buttons=[
{'name':'Highlight', 'action':"""
gridOptions.api.forEachNodeAfterFilterAndSort(node => {
    if (node.aggData){
        if (node.aggData.price.value > 30000){
            gridOptions.api.flashCells({rowNodes: [node], columns: ["price"]});
        }
    } else {
        if (node.data.price>30000){
            gridOptions.api.flashCells({rowNodes: [node], columns: ["price"]});
        }
    }
});
"""}
]
```

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

### ipyaggrid Column Fitting Modes

Source: https://widgetti.github.io/ipyaggrid/guide/create

Controls how columns are sized within the grid. 'size_to_fit' expands columns to fill available space. 'auto' sizes columns based on their content, potentially leaving gaps. An empty string allows manual column width definition in columnDefs. Note potential issues with virtualized columns.

```python
from ipyaggrid import Grid
import pandas as pd

# Sample DataFrame
dfm = pd.DataFrame({
    'col1': [1, 2, 3],
    'col2': ['A', 'B', 'C'],
    'col3': [True, False, True]
})

column_defs = [{'field': c, 'width':500} for c in dfm.columns]
grid_options = {
    'columnDefs' : column_defs,
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         columns_fit="auto")
g
```

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

### Update Grid Data

Source: https://widgetti.github.io/ipyaggrid/guide/create

The `update_grid_data(new_data)` function allows for bulk replacement of the grid's data, provided that the existing column names and grid options remain unchanged. This is a method for updating the grid's content from Python.

```python
# Example usage:
# grid.update_grid_data(new_dataframe)
```

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

### Enable Row Deletion Toggle

Source: https://widgetti.github.io/ipyaggrid/guide/create

When show_toggle_delete is set to True, a checkbox appears allowing users to select rows for deletion via a key press or Python command. This feature helps prevent accidental data manipulation.

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

grid_options = {
    'columnDefs' : column_defs,
    'rowSelection': 'multiple',
}

g = Grid(grid_data=dfm,
         grid_options=grid_options,
         show_toggle_delete=True)
g
```

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

### Custom Buttons: Expand/Collapse Rows (Python/JS)

Source: https://widgetti.github.io/ipyaggrid/guide/customize

Defines custom buttons to control row group expansion. The Python code defines button configurations, each with a name and a JavaScript action string that calls ag-Grid API methods like `expandAll()` and `collapseAll()`.

```python
buttons = [
{'name':'Expand All', 'action':'''gridOptions.api.expandAll();'''},
{'name':'Collapse All', 'action':'''gridOptions.api.collapseAll();'''}
]
```

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

### Enable Automatic Sync on Edit

Source: https://widgetti.github.io/ipyaggrid/guide/create

When sync_on_edit is set to True, the grid automatically updates the Python dataframe (g.grid_data_out['grid']) immediately after a cell is edited. This is useful for real-time updates but may impact performance with very large dataframes.

```python
import pandas as pd
from IPython.display import display

df2 = pd.DataFrame({'val':['a']})
column_defs = [{'headerName': 'Col', 'field': 'val', 'editable': True}]

grid_options = {
    'columnDefs': column_defs
}

g = Grid(grid_data=df2,
         grid_options=grid_options,
         sync_on_edit=True,
         width=200,
         height=100)

display(g)

# upon edit the updated dataframe is: g.grid_data_out['grid']
```

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

### Customize CSS and Hide Buttons in ipyaggrid (Python)

Source: https://widgetti.github.io/ipyaggrid/guide/customize

This snippet demonstrates how to customize the appearance and behavior of existing buttons within the ipyaggrid menu. You can modify CSS properties using `custom_css` or hide buttons entirely by setting `'hide': True` for specific button configurations.

```Python
menu = {
    # Possible names : 'Export to CSV', 'Export to Excel', 'Export Grid',
    #                  'Export Range', 'Export Rows', 'Export Columns'
    'buttons':[
        {'name':'Export to CSV', 'custom_css':{'color':'red'}, 'hide':False}
    ]
}
```
Tokens:
Raw