joemanji•11mo ago

Customizing rendering in tables

Is there a way to also modify how the dataframe/table elements are displayed based on value? My case is a little bit more complex but a simpler and I think semi common use case could be displaying urls as img or a href tags.

8 Replies

Akshay•11mo ago

Mm interesting. Right now you’d have to manually create the HTML you’d like to see in the table. For example you could write a function that takes a value and returns the appropriate HTML (which you can wrap in mo.Html()). This solution isn’t specific to dataframes though. Can you give an example of how you do this in Jupyter? Is this it? https://pandas.pydata.org/docs/user_guide/style.html If that’s not working in marimo, we can add support for it

joemanjiOP•11mo ago

df = pd.DataFrame(
     {
       "A": [f'A{i}' for i in range(100)],
       "B": [f'B{i}' for i in range(100)],  
     })
sdf = df.style.format(formatter=lambda x: f'<b>{x}</b>', subset='B')
mo.ui.dataframe(sdf)

df = pd.DataFrame(
     {
       "A": [f'A{i}' for i in range(100)],
       "B": [f'B{i}' for i in range(100)],  
     })
sdf = df.style.format(formatter=lambda x: f'<b>{x}</b>', subset='B')
mo.ui.dataframe(sdf)

Gives me:

Traceback (most recent call last):
  Cell <cell-5>, line 7
    mo.ui.dataframe(sdf)
  File .../python3.10/site-packages/marimo/_plugins/ui/_impl/dataframes/dataframe.py, line 95, in __init__
    "columns": df.dtypes.to_dict(),
AttributeError: '

Traceback (most recent call last):
  Cell <cell-5>, line 7
    mo.ui.dataframe(sdf)
  File .../python3.10/site-packages/marimo/_plugins/ui/_impl/dataframes/dataframe.py, line 95, in __init__
    "columns": df.dtypes.to_dict(),
AttributeError: '

mr_munshine•11mo ago

Howdy 👋 I just got started with marimo and had exactly the same question! I simply want to align numbers right in a table, and format them to two decimals. This link definitely has a lot of goodies (https://pandas.pydata.org/docs/user_guide/style.html). I'm also interested in more general use cases (cell/line colors, etc).

joemanjiOP•11mo ago

Is there something I need to do to get it to display properly?

df = pd.DataFrame(
     {
       "A": [f'A{i}' for i in range(5)],
       "B": [mo.Html(f'<b>B{i}</b>') for i in range(5)],  
     })
mo.ui.dataframe(df)

df = pd.DataFrame(
     {
       "A": [f'A{i}' for i in range(5)],
       "B": [mo.Html(f'<b>B{i}</b>') for i in range(5)],  
     })
mo.ui.dataframe(df)

Just displays the repr or something like: <marimo._output.hypertext.Html object at 0x7f5a441af490>

Akshay•11mo ago

To display styled dataframes, just output the dataframe object without using mo.ui.table or mo.ui.dataframe, similar to you would in Jupyter. I just tried it and it works but doesn't look great, we can improve that. https://static.marimo.app/static/dataframe-examples-98po mo.ui.dataframe() provides an interactive GUI for transforming a dataframe, but it doesn't support custom styles or rendering HTML elements. mo.ui.table does support outputting a table with HTML elements, but to get the elements to render you'd need to pass the data as a list of dicts,one per row, not as a dataframe (we can improve table to also accept a columnar format, ie a single dict mapping columns to data).. Clearly we have some work to do to simplify our story for styling and displaying dataframes. To summarize, here's where we are now: 1. If all you want to do is display the dataframe (with or without Pandas styling), and not transform it using a UI element, then just output the dataframe as the last expression of the cell without using mo.ui.dataframe/mo.ui.table. If the styling doesn't display, that's a bug in marimo and we can fix it. Unfortunately, in this case, marimo HTML elements won't render. Sorry for the confusion about that. 2. We don't support passing pandas styles to tables rendered with mo.ui.dataframe (our interactive dataframe transformer whose value is the transformed dataframe) or mo.ui.table (a row-selectable table whose value is a dataframe holding the selected rows). If you have a need to format the tables rendered in these UI elements, let us know. @joemanji and @mr_munshine , if that makes sense, can you let me know if your use cases fall into (1) or (2)?

joemanjiOP•11mo ago

I think 2 for me. I'd like to change whats rendered but keep the interactivity of mo.ui.dataframe if possible

mr_munshine•11mo ago

Mm.. #2 looks nicer overall, because it integrates well within the rest. It looks "clean". I can probably achieve what I want with #1 and the styler, but having never touched df before, it will take me a bit. In any case, none of this is critical, this is more "nice to have" territory (for me). I simply expected my numbers to be right justified, and have some control over precision. Not dramatic enough for me to spend a lot of time on, I can still read the results. I was just wondering if being new I might be missing something simple. Thanks for the help! Much appreciated.

Akshay•11mo ago

Of course! Thanks for the feedback. We likely will have features like what you’ve asked for eventually