Dash Sort editable table, but hide sort options from users

I have a dash table. Table allows edit. I want to sort the table by column, so that if user input data, the table is resorted right away. I achieve this like on the page https://dash.plotly.com/datatable/callbacks. The sort is already set when the page loads. I got stuck on the last step, where I want to hide the sort option from user. Is that possible?

Example on the image. I want to delete the arrows marked yellow, but keep sort by column ‘pop’.

edited code example from https://dash.plotly.com/datatable/callbacks:

import dash
from dash.dependencies import Input, Output
import dash_table
import pandas as pd


app = dash.Dash(__name__)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

PAGE_SIZE = 5

app.layout = dash_table.DataTable(
    id='table-multicol-sorting',
    columns=[
        {"name": i, "id": i} for i in sorted(df.columns)
    ],
    data=df.to_dict('records'),
    page_size=PAGE_SIZE,

    sort_action='native',
    sort_mode='multi',
    sort_as_null=['', 'No'],
    sort_by=[{'column_id': 'pop', 'direction': 'asc'}],
    editable=True,
)


if __name__ == '__main__':
    app.run_server(debug=True)

Answer

You can target the sort element and hide it using css like this:

span.column-header--sort {
  display: none;
}

So you can put that code in a css file in your assets directory for example. See the documentation here for more information about ways to include styles in a dash app.

Advertisement

Answer