Custom component makes gr.DataFrame behave weirdly

[lhoestq]

Hi ! Reported at https://github.com/gradio-app/gradio/issues/8394

minimal reproducible example:

import time

import gradio as gr
import pandas as pd
from gradio_huggingfacehub_search import HuggingfaceHubSearch

def run(*args):
    for i in range(1, 100):
        time.sleep(0.001)
        yield pd.DataFrame({"indices from 0 to 99 (but stops at 15 in the interface somehow unless you sort using the ▲ button)": range(i)})

with gr.Blocks() as demo:
    inputs = [
        HuggingfaceHubSearch(
            label="Hub Dataset ID",
            placeholder="you can leave this empty and click 'run'",
            search_type="dataset",
        ),
    ]
    button = gr.Button("Run")
    button.click(run, inputs, [gr.DataFrame()])

demo.launch()

[lhoestq]

cc @radames if you have any idea ?

[radames]

Sorry @lhoestq I'll take a look. meanwhile, could you try a two column layout, the quick search on one column and the data frame on another?

[lhoestq]

The issue persists even if there are 2 columns.

(modified code below)

```python import time import gradio as gr import pandas as pd from gradio_huggingfacehub_search import HuggingfaceHubSearch def run(*args): for i in range(1, 100): time.sleep(0.001) yield pd.DataFrame({"indices from 0 to 99 (but stops at 15 in the interface somehow unless you sort using the ▲ button)": range(i)}) with gr.Blocks() as demo: with gr.Row(): with gr.Column(): inputs = [ HuggingfaceHubSearch( label="Hub Dataset ID", placeholder="you can leave this empty and click 'run'", search_type="dataset", ), ] with gr.Column(): outputs = [gr.DataFrame()] button = gr.Button("Run") button.click(run, inputs, outputs) demo.launch() ```

[lhoestq]

It seems to come from this css that is added by the custom component

table {
    border-collapse: collapse;
}

I can workaround this issue by using custom CSS:

with gr.Blocks(css=".table {border-collapse: separate}") as demo:

With the custom CSS the gr.DataFrame works fine !

[pngwn]

@radames sabotage!

[pngwn]

I have fixed this on the gradio side but you have have a css property that is a little more aggressive/ global than it needs to be somewhere.