# Hide Toggle Columns Button

**URL:** <https://community.plotly.com/t/hide-toggle-columns-button/27324>\
**Category:** Dash Python\
**Created:** [August 15, 2019, 3:37pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324 "2019-08-15T15:37:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Croll12](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@Croll12](https://community.plotly.com/u/Croll12)\
**Post date:** [August 15, 2019, 3:37pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/1 "2019-08-15T15:37:04Z")

</div>

Is it possible to hide the Toggle Columns button? I need to hide columns to save real estate and have no intentions of displaying them.

---

<div class="post-metadata">

**Author:** ![alexcjohnson](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexcjohnson/32/614_2.png) [@alexcjohnson](https://community.plotly.com/u/alexcjohnson)\
**Post date:** [August 15, 2019, 4:51pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/2 "2019-08-15T16:51:27Z")

</div>

If you don’t need the user to be able to control this at all, can you just omit those columns from the `columns` prop? There’s no problem having extra fields in `data` that aren’t present in `columns`, these fields will just be ignored.

Otherwise there’s a hacky solution I can think of: hide it with css. The button has class `show-hide`, so using the table’s `css` prop:  
`css=[{"selector": ".show-hide", "rule": "display: none"}]`

---

<div class="post-metadata">

**Author:** ![Croll12](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@Croll12](https://community.plotly.com/u/Croll12)\
**Post date:** [August 15, 2019, 5:04pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/3 "2019-08-15T17:04:58Z")

</div>

Thank you. The css worked perfectly!

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [October 17, 2019, 4:41pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/4 "2019-10-17T16:41:17Z")

</div>

> [@alexcjohnson](#):
>
> Otherwise there’s a hacky solution I can think of: hide it with css. The button has class `show-hide` , so using the table’s `css` prop:  
> `css=[{"selector": ".show-hide", "rule": "display: none"}]`

I definitely also have this use case, so am now using this CSS.

---

<div class="post-metadata">

**Author:** ![alexmojaki](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@alexmojaki](https://community.plotly.com/u/alexmojaki)\
**Post date:** [January 15, 2020, 3:48pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/5 "2020-01-15T15:48:40Z")

</div>

Well, simply leaving out the column in `columns` but keeping it in `data` was the solution for me, thanks!

---

<div class="post-metadata">

**Author:** ![Buxert](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/buxert/32/17880_2.png) [@Buxert](https://community.plotly.com/u/Buxert)\
**Post date:** [February 2, 2022, 3:03pm UTC](https://community.plotly.com/t/hide-toggle-columns-button/27324/6 "2022-02-02T15:03:43Z")

</div>

You can also put the following code in your style.css file in the assets folder of your dash app:

```auto
.show-hide {
    display: none;
}

```