Adding a New Feature to Dash Ag Grid's Sidebar

Dash Python
,
1

Hello, I am a licensed user of Dash Enterprise Version and have been utilizing Dash Ag grid effectively in my project.

I am reaching out to inquire about the potential development of an additional feature.

As you see the image in the link(Sidebar | Dash for Python Documentation | Plotly), I am focusing on the Side Bar of the Ag Grid.
I am interested in creating a new custom tab on this sidebar where a specific component can be displayed.
Ultimately, my goal is to have detailed information about a cell appear in this sidebar when the cell within the grid is selected. Could you please provide guidance on how this might be achieved? Thank you.

2

Hello @wowwwn,

This is to only be displayed when a specific cell is clicked?

You should be able to add a new tab to the sidebar, if you can do it in the underlying AG grid.

3

Hi @wowwwn

Is there an example in the upstream AG Grid docs of what you are trying to do? If so, we could help make a Dash version .

4

Thank you for your previous response.
I want to make a custom sidebar tab and print out something like AgGrid cell clicked data

So I want to know if its possible to do:

  1. Create a custom div in the sidebar, like: html.Div(id=“sidebar”)?
  2. Update this div when a cell is clicked, using a callback like code bellow
   @callback(
       Output("sidebar", "children"),
       Input("ag-grid", "cellClicked")
   )
   def update_sidebar(cell):
       return f"Clicked cell info: {json.dumps(cell, indent=2)}"

If this is possible, how can I implement it? If not, what alternatives would you suggest?

Thank you for your help!

5

Can you find an example in the AG Grid docs? React Grid: Side Bar | AG Grid

If not, since you have Enterprise, you could ask the AG Grid support team. If you can get an example in React, we can help make a Dash example.

6

Thanks for the reply,
Ok, Since there is no example in AG Grid docs, I’ll ask for the React example to AG Grid support team first. Thankyou

7

One challenge I’m also facing is how to customize the sidebar of the Ag Grid. Specifically, I’m looking to add a custom tab that displays detailed information about a selected cell directly within the sidebar. While I’ve successfully implemented various features with Dash, I’m unsure how to approach this particular customization.