QuasarPage and AgGrid cellClass overwrite

[pabloazurduy]

Hi, so I was rendering a QuasarPage (because I was using some QComponents), but this also overwrites the cellClass classes in my AgGridtable , (probably bc QuasarPage uses a different StyleSheet) is it possible to find a workaround to style the cells? Maybe there is an equivalent for "Quasar css classes". Thanks in advance!

import justpy as jp

grid_options = """
{
    rowSelection: 'multiple',
    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}
    ]
}
"""

class GridTest(jp.QDiv):
    def __init__(self, 
                 session_data:dict, 
                 **kwargs) -> None:
        super().__init__(**kwargs)
        root = self
        print(f'session_data_grid ={session_data}')
        root.selected_rows = session_data.setdefault('grid.selected_rows', {})

        self.grid = jp.AgGrid(a=root, 
                              options=grid_options, 
                              theme='ag-theme-material',
                              style='height: 400px; width: 400px; margin: 0.25em'
                        )
        self.grid.options.columnDefs[1].cellClass = ['border-2', 
                                                     'border-dashed', 
                                                     'border-blue-200', 
                                                     'font-medium',
                                                     'hover:bg-blue-200',
                                                     'bg-blue-100',
                                                     'background:pink-11' # Quasar color (?)
                                                     ]

        if root.selected_rows:
            s = f'Selected rows {sorted(list(root.selected_rows.keys()))}'
            for i in sorted(root.selected_rows):
                s = f'{s}\n Row {i}  Data: {root.selected_rows[i]}'
        else:
            s = 'Data will go here when you select rows'

        self.rows_div = jp.Pre(text=s, 
                               classes='border text-lg', 
                               a=root)

        self.grid.on('rowSelected', self.row_selected)

        btn_deselect = jp.Button(text='Deselect rows', 
                                classes=jp.Styles.button_simple+' m-2', 
                                a=root, 
                                click=self.deselect_rows)
        btn_deselect.grid = self.grid
        btn_select_all = jp.Button(text='Select all rows', 
                                classes=jp.Styles.button_simple+' m-2', 
                                a=root, 
                                click=self.select_all_rows)
        btn_select_all.grid = self.grid

    #@staticmethod
    def row_selected(self, msg):
        if msg.selected:
            self.selected_rows[msg.rowIndex] = msg.data
        else:
            self.selected_rows.pop(msg.rowIndex)
        s = f'Selected rows {sorted(list(self.selected_rows.keys()))}'
        for i in sorted(self.selected_rows):
            s = f'{s}\n Row {i}  Data: {self.selected_rows[i]}'
        if self.selected_rows:
            self.rows_div.text = s
        else:
            self.rows_div.text = 'No row selected'

    #@staticmethod
    async def select_all_rows(self, msg):
        await self.grid.run_api('selectAll()', msg.page)

    #@staticmethod
    async def deselect_rows(self, msg):
        await self.grid.run_api('deselectAll()', msg.page)

def grid_test():
    wp = jp.QuasarPage() # this don't work 
    #wp = jp.WebPage()    # this work 
    gt = GridTest({}, a = wp )
    return wp

app = jp.app
jp.justpy( grid_test, start_server=False)

[pabloazurduy]

Nevermind seems like using wp = jp.QuasarPage(tailwind=True) works (I don't know if this might have some drawbacks but work in the example)