Dash AG Grid with partly dynamic columns

Dash Python
1

I’m learning about Dash Ag Grid and I have a question that can we use AG Grid where one part is named, one part is dynamic. For Example:

import pandas as pd
import numpy as np
import dash_ag_grid as dag
from dash import Dash, html, dcc

#create DataFrame
df = pd.DataFrame({'name': ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'g'], 
                   'school': ['A', 'A', 'A', 'B', 'B', 'B', 'C', 'C', 'C'],
                   'points': [2800, 1700, 1900, 1400, 2300, 2600, 5000, 10000, 15000],
                   'rebounds': [5000, 6000, 4000, 7000, 14000, 12000, 9000, 3000, 9000],
                   'assists': [10000, 13000, 7000, 8000, 4000, 5000, 8000, 10000, 7000]})

app = Dash(__name__)
app.layout = html.Div([
    dag.AgGrid(
        id="format-specifiers-example",
        style={"height": "500px", "width": "100%"},
        columnDefs=[{'field':'name'}, [{'field':i} for i in df.columns[2:]]],
        rowData=df.to_dict("records"),
        columnSize="sizeToFit")],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run(debug=False)

Screenshot 2023-08-08 083314
Screenshot 2023-08-08 0833141872×510 2.92 KB

So I just want to show name and skip schools from data then show points, rebounds and assists. I know that I can define name of each field like {'field':'points'}, {'field':'rebounds'}, {'field':'assists'} but if one more columns appear in the df, I want to show it but don’t need to hard code. Thank you.

2

Hello @hoatran,

It seems that your code is dynamic. Not really sure what you would like to change…

You could have columns that you don’t want to show in a list and use an if on how you are creating your columnDefs.

1 Like
3

Hi jinnyzor, so with my code above it just showed columns name. I want to show name, points, rebounds, assists and skip schools.

4

Weird, it should have worked the way you had it.

5

Hm, can you try it? I tried many times but it not worked.

6

You are combining the list wrong. This makes a list within a list.


columnDefs=[{'field':i} for i in df.columns if not in [‘school’]]

Try this one instead.

7

Hm it raised invalid syntax.

8 
import pandas as pd
import numpy as np
import dash_ag_grid as dag
from dash import Dash, html, dcc

#create DataFrame
df = pd.DataFrame({'name': ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'g'],
                   'school': ['A', 'A', 'A', 'B', 'B', 'B', 'C', 'C', 'C'],
                   'points': [2800, 1700, 1900, 1400, 2300, 2600, 5000, 10000, 15000],
                   'rebounds': [5000, 6000, 4000, 7000, 14000, 12000, 9000, 3000, 9000],
                   'assists': [10000, 13000, 7000, 8000, 4000, 5000, 8000, 10000, 7000]})

app = Dash(__name__)
app.layout = html.Div([
    dag.AgGrid(
        id="format-specifiers-example",
        style={"height": "500px", "width": "100%"},
        columnDefs=[{'field':i} for i in df.columns if i not in ['school']],
        rowData=df.to_dict("records"),
        columnSize="sizeToFit")],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run(debug=False)
1 Like
9

Thank you, it worked. One more question, if I want to format value of points, rebounds, assists to d3 format (separate thousand with comma), what should I do?

10

Then you need to work with the columnDefs a little more than what we are doing. :grin:

Use a for loop and add the d3 formatting from the dash ag grid docs.