Support pandas Styler in input Dataframes

[altomani]

• [ X] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
gr.Dataframe components used as inputs cannot be styled

Describe the solution you'd like
Input gr.Dataframe components can be styled in a way similar to outputs.

Additional context
The styling improvements in #5569 and #5877 only work for gr.Dataframe components that are either standalone or are outputs of functions. If a gr.Dataframe is used as an input, then the formatting is not applied. Example code:

import gradio as gr
import pandas as pd

df_in = pd.DataFrame({'a':[1.3,2.0],'b':[3.0,4.0]})
df_out = pd.DataFrame({'a':[1.3,2.0],'b':[3.0,4.0]})

def copy_df(df):
  return df.copy()

with gr.Blocks() as demo:
    inp=gr.Dataframe(df_in.style.format(precision=3))
    btn = gr.Button("Copy")
    out=gr.Dataframe(df_out.style.format(precision=3))
    btn.click(fn=copy_df, inputs=inp, outputs=out)

    demo.launch() 

The first table is not styled, the second is (and btw it loses the styling after the button is pressed, but this is more related to issue #5895). It would be desirable that the first table have the style.format(precision=3) applied.

The formatting should only be applied to cells in display mode, not in cells being currently edited.

Among other Python UI frameworks, Plotly Dash does it well, see https://dash.plotly.com/datatable/editable and https://dash.plotly.com/datatable/data-formatting. Although they do not have example with both styling and number formatting it works as expected. Other frameworks like Streamlit have poor support for this.

[abidlabs]

Hi @altomani this is an intentiona decision on Gradio's part to apply formatting only to the static gr.DataFrame and not the interactive version. That is because you can e.g. add rows or columns in the interactive gr.DataFrame, and applying a fixed pd.Styler style to an interactive dataframe is not a well-defined operation.

If you are interested in creating a variant of the gr.DataFrame that supports this, I think this would be a great case for a custom component! If you'd like to create your own, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help.