plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 74 forks source link

option to remove case sensitivity icon #932

Open cldougl opened 2 years ago

cldougl commented 2 years ago

Screen Shot 2021-08-03 at 1 35 32 PM

It would be nice for dash developers to have the option of including or removing the case icon rather than always displaying the option

AnnMarieW commented 2 years ago

That's a good idea, and this also came up on the forum recently regarding removing the "eyeball" icon for hideable columns: https://community.plotly.com/t/how-to-remove-the-individual-column-hide-action-buttons-from-a-datatable/50618/2

It would be nice to control this with a prop (maybe filter_options?), but in the meantime it can be done fairly easily with CSS:

        dash_table.DataTable(
            columns=[{"name": i, "id": i, "hideable": True} for i in df.columns],
            data=df.to_dict("records"),            
            sort_action="native",
            filter_action="native",
            filter_options={"case": "insensitive"},
            css=[
                {   # hides "hideable" icon
                    "selector": ".column-header--hide",
                    "rule": "display: none",
                },
                {   # hides "case-sensitive" icon
                    "selector": ".dash-filter--case",
                    "rule": "display: none",
                },
            ],
        )

Or include in the .css file in the assets folder

.column-header--hide {
  display: none;
}

.dash-filter--case {
  display: none;
}