CODEWITHSUNDEEP
jupyter-notebookag-gridipywidgetsvoila
Enri_Boss
Enri_Boss

Reputation: 21

Ipyaggrid Grid not rendered with Voilà

I am building an interactive dashboard with widgets on a Jupyter Notebook with the goal of rendering it to a "web-app" with voilà package.

My problem is that the ipyaggrid grid does not get displayed on the voilà rendered page, while the other ipywidgets works fine (more on ipyaggrid here https://dgothrek.gitlab.io/ipyaggrid/). Also, the grid is rendered fine inside the Jupyter Notebook.

Here there's a simple example that I still am not able to display with voilà (while on the jupyter notebook it gets displayed).

from ipyaggrid import Grid
import pandas as pd
from IPython.display import clear_output
import ipywidgets as widgets

data = pd.DataFrame({
    'A': [1, 2, 3],
    'B': [4, 5, 6],
    'C': [7, 8, 9]
})

grid_options = {
    'columnDefs': [
        {'headerName': col, 'field': col} for col in data.columns
    ],
    'rowData': data.to_dict(orient='records'),
    'pagination': True,
    'paginationPageSize': 5,
    'domLayout': 'autoHeight'
}
grid = Grid(grid_data=data, grid_options=grid_options)

output = widgets.Output()

with output:
    clear_output()
    print('Data is under here')
    display(grid)
    print('Data is above here')

display(output)

I have tried not embedding the grid in a output widgets but I see no difference.

Versions I am using:

On Jupyter Notebook the grid gets displayed On Jupyter Notebook the grid gets displayed

On the voilà dashboard the output containing the grid appears empty On the voilà dashboard the output containing the grid appears empty

I have tried reading the docs on both packages but I wasn't able to find the problem nor I did find similar issues online. PS: I am not a seasoned programmer so I wasn't able to dig deep in the Javascript aspect of the libraries also please forgive me for any mistakes.

UPDATE: Using the Render Notebook with Voilà in the Jupyter Notebook interface (inside the View ribbon) actually displays the grid. The issue described in this post persist when rendering the dashboard through the terminal/powershell i.e. when I write voila my_script.ipynb in the terminal

Upvotes: 0

Views: 236

Answers (1)

viki
viki

Reputation: 11

I have had this issue and the way I solved it was using Voila 0.4.3, any version newer than this does not render the aggrid properly.

Upvotes: 1

Related Questions