Display the pandas sort configuration in the UI.

[Bengt]

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

Is your feature request related to a problem? Please describe.

I want to show my users a Dataframe, which is naturally ordered by the confidence of my neural model. To order the table representation of the Dataframe, users always have to click the column heading twice, which annoying.

Describe the solution you'd like

I would like to be able to specify the column and direction to order the Dataframe by.

detections_dataframe = Dataframe(
    [...]
    columns=['name', 'confidence', 'timestamp'],
    order_by='confidence',
    order_directions='descending',
)

Additional context

More advanced use case would order the Dataframe by multiple columns and directions, like so:

detections_dataframe = Dataframe(
    [...]
    columns=['name', 'confidence', 'timestamp'],
    order_by=['confidence', 'timestamp'],
    order_directions=['descending', 'ascending'],
)

[pngwn]

I think this would be pretty straightforward to do in your inference function since it only affects the initial sort order.

Pandas has some pretty nice sorting options for data frames and you can pass a pandas Dataframe to the gradio Dataframe.

[Bengt]

Hi, Oh, yes, of course! Thanks for the idea. Somehow, that did not occur to me. I will implement such a solution in my Gradio application.

I would also expect that using Pandas' sorting methods would be the way you recommend to your whole user base. Should we maybe close this issues because that makes it out of scope for this project?

[pngwn]

I'd like us to keep this open for now because we don't actually have a way of letting users know which column/ direction the dataframe is sorted by, i think it would be good to have that.

I'll rename the issue to reflect this.

[fingertap]

I encountered this issue yesterday. I wanted to retrieve the data of the row when one cell is selected. However, the EventData only has a target that points to the cell. When the user have sorted the DataFrame themselves on the interface, we have no correspondence to locate which row the selected cell belongs to.

[pngwn]

We could send the actual data for that cell in the SelectData.

[fingertap]

We could send the actual data for that cell in the SelectData.

Or we can add index to the dataframe and record the index in the SelectData. This can be efficient when sending the entire row is memory intense.

[cjps-br]

I encountered this issue yesterday. I wanted to retrieve the data of the row when one cell is selected. However, the EventData only has a target that points to the cell. When the user have sorted the DataFrame themselves on the interface, we have no correspondence to locate which row the selected cell belongs to.

I'm having this same problem! I have a gr.dataframe that is filled with rows from a database and whenever the user selects a row, I return the value of a certain field.

btn_load = gr.Button('Load') table = gr.DataFrame(row_count=(10, 'dynamic'), col_count=(6, 'fixed'), headers=titles, wrap=True )

btn_load.click(fn=load_table, inputs=None, outputs=[table]) table.select(fn=on_select, inputs=[table], outputs=[tbx_selecao, tbx_prompt])

initially the table object is created empty, but when the Load button is pressed, Everything works fine, except when the user clicks the small arrow that orders the gr.dataframe by a specific column. In this case, nothing works. I noticed that the dataframe value is always passed to the on_select function in the way the table object (DataFrame) was created.

I thought of several ways to solve the problem but I can't find a solution.

[fingertap]

@cjps-br Hi. My walk around to this issue is to disable the sorting capability. This can be done by passing specific css that explicitly set the sorting arrows to invisible.

[deepkyu]

My walk around to this issue is to disable the sorting capability. This can be done by passing specific css that explicitly set the sorting arrows to invisible.

@fingertap Thank you for the idea ;)

For someone who needs it, it works with the following code (tested on 3.50.2) :

custom_css = \
"""
/* Hide sort buttons at gr.DataFrame */
.sort-button {
    display: none !important;
}
"""

with gr.Blocks(..., css=custom_css) as demo:

[KansaiUser]

But hiding the sort buttons defeats the purpose! Has anyone come with a good solution to this?

[abidlabs]

Closing as the original issue has been solved, the sorting configuration is indeed displayed in the UI:

It seems like there are some other separate issues that have been discussed, please open separate issues for those, thanks.