Possible to turn AG grid on side?

Dash Python
1

I am wondering if it is somehow possible to turn an ag grid on its side? Specifically, have the columns down the left side of the screen and the rows span across the screen. Here is my use case.
In my app I am presenting some KPIs from my model run. So basically I have a list of metrics and values for those metrics. I throw them in an AG grid where the columns are the metric names and the values show in a single row. I use an AG grid for the following reasons. 1. It makes it super easy to just pull the data from the database into a dataframe and throw it into an AG grid for presentation. 2. The AG grid makes it super easy for the user to get rid of columns they do not care about and reorder the columns themselves. I just think presenting the KPIs would look more natural if the columns were down the page rather than across the page and I still had the ability to remove and rearrange.
Or maybe there is a better way to do something like this in dash that would accomplish what I want.

2

Hello @Brent,

Can you give a demo app of what you have?

You could transform the grid by spinning the whole containing div.

3 
#!/usr/bin/env python3
"""Minimal dash program."""

from time import sleep
import dash_ag_grid as dag
from dash import callback, ctx, Dash, dcc, html, Input, no_update, Output, State
import dash_bootstrap_components as dbc

import pandas as pd

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

dataframe = pd.DataFrame({'kpi1': [123], 'kpi2': [3.5], 'kpi3': [10000000], 'kpi4': [44444]})

col_defs = [{'field': 'kpi1', 'type': None},
            {'field': 'kpi2', 'type': None},
            {'field': 'kpi3', 'type': None},
            {'field': 'kpi4', 'type': None}]
datatable = dag.AgGrid(id='datatable',
                       rowData=dataframe.to_dict('records'),
                       columnDefs=col_defs,
                       dashGridOptions={'undoRedoCellEditing': True, 'rowSelection': 'single'},
                       suppressDragLeaveHidesColumns=False,
                       persistence=True,
                       defaultColDef={'filter': False,
                                      'floatingFilter': False,
                                      'resizable': True,
                                      'sortable': True,
                                      'editable': False,
                                      'minWidth': 125,
                                      'wrapHeaderText': True,
                                      'autoHeaderHeight': True})

app.layout = dbc.Container(dbc.Card(dbc.CardBody(datatable)), fluid=True)

if __name__ == '__main__':
    app.run_server(debug=True, threaded=False, use_reloader=False)
4

How about just transposing the df?

5

Maybe I do not fully understand your proposal but I think I would lose the ability for the user to rearrange and remove values by simply presenting each value in its own row. I do not know that there is a way for users to grab a row and move it out of the grid or into a different row position like can be done with columns. What I am proposing is where the rows act like columns do now with the ability to drag out or drag to rearrange.

6

So, you cant transform the grid, it doesnt work because of all the event listeners.

It is possible to rearrange rows and also make it so when they are dragged off of the grid that they would disappear.

And then just row dragging in general for rearranging is simple.

7

I did not know about row dragging. It looks like what I want is a simplification of the grid to grid complex example. All that I need is the rearranging within the same grid and the removal to the trashcan. It looks a little complex. I will have to see when I can find time to wade through it. Unless someone that is more familiar with the css and clientside callbacks can show me how to take what I have in my example above and make it do what I want. :wink:

8

If you don’t want to drag to a different grid or to the trash can, you can just enable row dragging

If you would like to delete rows see: