Combining Quasar and ag-Grid for CRUD?

I discovered this library today and have been enjoying the ag-Grid examples.

One can use pandas with SQL queries and in turn use JustPy to show these dataframes as tables. This is hugely useful given the small amount of code required and my programming abilities.

I note that I can grid.options.columnDefs[1].editable = True (here for column 1) to allow the table rows to be edited in place. Is it possible to pass these updates back into the dataframe?

More generally I am in need of a CRUD application which can allow end users to edit various database tables.

I thought perhaps the QButtons example could be modified such that each button represented a DB table but I am unsure if Quasar and ag-Grid can be combined in such a way. As best I can tell ag-Grid is focussed on presenting a single table. Perhaps QTabs where each tab reflects a DB table? I note you mention QTabPanels is not working.

Any advice on how to approach this with JustPy would be very welcome.

Many thanks.

[RussellGrew]

This is helpful.

Thanks for the assistance.

You may have gathered I don’t consider myself much of a developer, and more of an all-rounder. Your paragraph Hopefully, JustPy will enable teaching web development in introductory Python courses by reducing the complexity of web development. makes real sense to me.

[elimintz]

Below please find a simple example in which you use the grid’s cellValueChanged event to capture changes from edit. In the example below when a cell changes the event handler cell_changed is called. In the example the values in msg are printed but that is the place where you would update the server side data repository. Let me know if this is what you are looking for.

I will work on a more complete CRUD example.

import justpy as jp

grid_options = """
{
    defaultColDef: {
        filter: true,
        sortable: true,
        resizable: true,
        cellStyle: {textAlign: 'center'},
        headerClass: 'font-bold'
    }, 
      columnDefs: [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ],
      rowData: [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ]
}
"""

def cell_changed(self, msg):
    print(msg)
    print(f'Old value: {msg.oldValue}, New value: {msg.newValue}, Row Index: {msg.rowIndex}, Column ID: {msg.colId}')
    print(f'Row data: {msg.data}')
    # Here you would update your database or Pandas frame etc.

def grid_test():
    wp = jp.WebPage()
    grid = jp.AgGrid(a=wp, options=grid_options, style='height: 200px; width: 300px; margin: 0.25em')
    for col_def in grid.options.columnDefs:
        col_def.editable = True  # You can add this directly to the columnDefs in grid_options
    grid.on('cellValueChanged', cell_changed)
    return wp

jp.justpy(grid_test)