Is it possible to have a dropdown cell in dash_table or ag-grid where the dropdown options are rendered in markdown/html?

Dash Python
1

Is it possible to have a dropdown seletion option in a dash_table that is rendered through markdown? E.g. the field I want users to choose has a link (and other html stuff like line breaks, formattng etc) in it hence rendered through markdown.

Currently you can only set the presentation to ‘markdown’ or ‘dropdown’ - was wondering if anybody has a solution to achieve both at the same time?

2

HI @uns123 welcome to the community.

Actually I don’t have a answer for your question but I have the feeling that for almost all applications where you might use DataTable, you should take a look at AG-grid :slight_smile:

1 Like
3

Thanks AIMPED - trying it with AG Grid but the select dropdown in ag grid does not render its values as markdown/html either.

I am using the following options:

  • In columnDefs, I am setting the column as markdown {"cellRenderer": "markdown"}
  • For cell editor, I am using {"cellEditor": "agSelectCellEditor", "cellEditorParams": { "values": options[ "Labels" ].values.tolist(), } where options[ "Labels" ].values.tolist() provides a list of html formatted options. These same options DO render as markdown/html in the cell itself but NOT in the select dropdown
  • I have also tried adding {"cellRenderer": "markdown"} to "cellEditorParams" but it does not seem to work

Pictures below:

Cell renders correctly
image

Dropdown selector does not render correctly
image

Any help is appreciated!

4

@uns123

I’m not sure exactly what you are trying to do, but you might need to make a custom component. Here’s the section in the docs that shows how to add them to a cell:

Then if you want to make is look more like a panel, you could try the full width row:

However, an easier solution would be to display this info in a model when you click on a cell:

1 Like
5

Thanks - went with the modal option!

2 Likes