A live grid in a Jupyter notebook cell

The notebook

Three cells, run in order with jupyter nbconvert --execute against the published package, output pasted in beneath each exactly as it came back. Cell 1 builds a frame and shows it as a grid: a notebook renders the value of a cell's last expression, and here that value is the widget.

import pandas as pd
from lattice_grid_jupyter import LatticeGridWidget

df = pd.DataFrame({
    "part": ["Bracket-A", "Bracket-B", "Bracket-C", "Bracket-D"],
    "cost": [4.21, 3.85, 5.02, 4.60],
    "in_stock": [True, True, False, True],
})

grid = LatticeGridWidget(df, offline=True, height=240)
grid

In a running notebook this cell paints a four-row, three-column grid: text, a decimal price and a checkbox column, sortable and filterable, 240 pixels tall as set. This page renders the same three cells as static output because it is not a notebook kernel; the DataFrame evidence below is what actually came back from running them.

Cell 2 changes the frame two ways at once, an edit and an appended row, then shows the live frame:

# Someone edits a cell in the widget above (or you simulate it, as below).
# Either way, the frame updates in place -- no separate "get value" call.
grid.apply_edit(key="2", col_id="in_stock", value=True)
grid.append_rows([{"part": "Bracket-E", "cost": 3.10, "in_stock": True}])
grid.df

        part  cost  in_stock
0  Bracket-A  4.21      True
1  Bracket-B  3.85      True
2  Bracket-C  5.02      True
3  Bracket-D  4.60      True
4  Bracket-E  3.10      True

Row 2's in_stock is True, the value the edit sent. Bracket-E is the appended row, at the end, with a fresh key rather than reusing 0 to 3. append_rows accepts a list of dicts or a DataFrame, and returns the new row keys; delete_rows(keys) is the same idea in reverse.

Cell 3 confirms the frame is still typed, not a table of strings:

# dtypes survived the round trip
grid.df.dtypes

part            str
cost        float64
in_stock       bool
dtype: object

Why offline=True

By default the widget loads the grid's JS and CSS from a CDN the first time it renders, the same as the hosted demos on this site. offline=True carries that JS and CSS inside the package instead, so the notebook above runs with no network request and no licence key: on your own machine, localhost and an offline notebook both run free and unwatermarked. Drop offline=True once the notebook is shared somewhere that has a network path to the CDN and you want the smaller widget state.

What next

For the datetime rule an edited timestamp column follows, see edit a DataFrame in the browser. To put the same grid in front of a browser tab rather than a notebook kernel, see a grid in a Dash app. Every constructor argument and method is in the Python reference.