Cell Renderers, value formatters, and cell styles in AgGrid (Demo)

[vickorian]

@rodja @falkoschindler

I'm going to be referencing these documents for examples.

AgGrid Cell-Styles

and

AgGrid Value Formatters

So i went through the .js for AgGrid that NiceGUI uses and realized that it's basically just acting as an API with very minimal bindings. Basically, that means any functions available via AgGrid are in NiceGUI so looking through some of the other examples in particular #1588 where JS was passed to echarts and i realized that passing arbitrary JS to the cells should be possible though not all of the renderers are usable in NiceGUI, like groups for some reason.

As long as you don't need to import any specific entities, it should work perfectly fine.

So for the valueformatter and cell-styles the following code is pretty straight forward.

from nicegui import ui
from bunch import Bunch


columns = [
    {'field': 'name'},
    {'field': 'wealth', 'editable': True,':valueFormatter': "dollaBillsYall",
     'cellClassRules': {
      "rag-red": "x < 12000",
      "rag-blue": "x >= 12000 && x <= 1000000",
      "rag-green": "x > 1000000",
    },
    },
    {'field': 'id', ':valueFormatter': "passwordBlocker", 'editable':True},
]
rows = [
    {'id': 0, 'name': 'Alice', 'wealth': 1000},
    {'id': 1, 'name': 'Bob', 'wealth': 1000000},
    {'id': 2, 'name': 'Carol', 'wealth': 10323003402},
]

aggrid = ui.aggrid({
    'columnDefs': columns,
    'rowData': rows,
    'rowSelection': 'multiple',
    'stopEditingWhenCellsLoseFocus': True,
})
ui.add_head_html(
    
    """

<style>
.rag-red {
    background-color: #CC222244;
}
.rag-green {
    background-color: #33CC3344;
}
.rag-blue {
    background-color: #2244CC44;
}
</style>


<script>
function passwordBlocker(params) {
    return '*************'
}
</script>
<script>                 
function dollaBillsYall(params) {
    const a = '$' + params.value;
    return a
  }


"""
)

ui.run(host ="127.0.0.1")

Which renders this table.

The two biggest things are that we can pass custom functions to modify the appearance of text as well as using the build in JS functionality of AgGrid with cell-styles by interacting with the cellClassRules class instead of trying to pass an inline JS function.

I'm passing the functions and custom CSS in the ui.add_head_html() method but would like to clean it up by just referencing a file, so if anyone knows how to do that, let me know.

For basic Cell Rendering, Say we have a row of company names, then we can pass:

cdefs.append({'headerName':Company, 'flex':1, 'field': 'company', 
'editable':False, 'sortable':True,'filter':True,
'wrapText':True,'autoHeight': True, 
':cellRenderer': 'CompanyRenderer'})

Where again, i've defined 'CompanyRenderer' in ui.add_head_html() with

<script>
function CompanyRenderer(params) {
    const link = `<a href="https://en.wikipedia.org/wiki/${params.value}" target="_blank">${params.value}</a>`
    return link
  }
</script>

this will create a hyperlink for any entry in the cell.

where HSL is just an arbitray word in my generated database.

These are some of the more basic things, but i'm sure someone can figure out the more complex operations. I'll keep working to try and find more customization possibilities.

[sun2658075]

Thanks for you example.

I used it to show the % formatter. That's great.

[vickorian]

glad it was helpful. I'll be coming back to add more complex examples.

[epmb1n]

hello author,how do I make a column of aggrid as a button like this page https://ag-grid.com/javascript-data-grid/component-cell-renderer/ How to make 'cellrender' value as a JSclass

[vickorian]

@epmb1n I"m not sure what you mean here. Are you talking about the company logos? or the buttons in the last column?

[epmb1n]

thanks, I've found the answer #3107 (comment)

[whr121318]

@vickorian hello bro,can i pass a JS Function to cellStyle?Just like this:

ui.add_head_html('''
        <script>
        function IncreaseStyle(params) { 
            console.log(params)
            var arr = new Array("inc6","inc5","inc4","inc3","inc2","inc1");
            var arrv = new Array()
            for (var i =0;i<arr.length;i++){arrv.push(params.api.getValue(arr[i],params.node))}
            var ownfield = params.colDef.field;
            for(var i = 0;i<arrv.length-1;i++){
                var frontdata = arrv[i];
                var reardata = arrv[i+1];
                if (frontdata==reardata && frontdata!=null){
                    if(ownfield==arr[i] || ownfield==arr[i+1]){background = "#FFEBCD";break;}
                    else{continue;}
                }
                else{background = "#ffffff";break;}
            }
            return {background: background};
        }
        </script>
''')

        {'field': 'inc1','maxWidth':100,':cellStyle':'IncreaseStyle'},
        {'field': 'inc2','maxWidth':100,':cellStyle':'IncreaseStyle'},
        {'field': 'inc3','maxWidth':100,':cellStyle':'IncreaseStyle'},
        {'field': 'inc4','maxWidth':100,':cellStyle':'IncreaseStyle'},
        {'field': 'inc5','maxWidth':100,':cellStyle':'IncreaseStyle'},
        {'field': 'inc6','maxWidth':120,'sortable': True, 'sort':'desc', 'sortIndex':4,':cellStyle':'IncreaseStyle'},

I want to change its background-color while the cell's value euqals to the last cell's value.

[whr121318]

resolved,the code does work,thanks a lot for your example @vickorian