# Wish list: sticky table headers

**URL:** https://meta.discourse.org/t/wish-list-sticky-table-headers/231589
**Category:** Feature
**Tags:** data-explorer, completed
**Created:** [June 30, 2022, 6:21pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589 "2022-06-30T18:21:16Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [June 30, 2022, 6:21pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/1 "2022-06-30T18:21:16Z")

</div>

It would be really nice if I could scroll in my [Data Explorer](https://meta.discourse.org/t/32566?silent=true) results and retain the table/result header labels, so I don’t have to scroll back up to remind myself which column is which.

As an example, here’s data from [my TL2 gap report](https://meta.discourse.org/t/find-the-users-which-are-more-likely-to-become-tl3/91495/18) (the results of which are often heart-breaking). These users are just missing 1. But 1 what?

 ![Selection_302](https://global.discourse-cdn.com/meta/original/4X/2/d/1/2d114d704c6c2842733b5e140c6390c77f707f6a.png)

(As it happens, the 1 here is giving 1 single like. Like I said, heartbreaking.)

---

<div class="post-metadata">

### Author: ![cocococosti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cocococosti/32/231474_2.png) [@cocococosti](https://meta.discourse.org/u/cocococosti)
#### Post date: [July 1, 2022, 12:38am UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/2 "2022-07-01T00:38:03Z")

</div>

This would be awesome 🤩 I also struggle to remember the header labels with large query results.

For now, it is possible to make the header sticky trough CSS. Just add the following to a theme component:

```plaintext
div.query-results section {
    overflow-y: auto;
    height: 1000px;
}

div.query-results thead th {
    position: sticky;
    top: 0;
    color: var(--primary);
    background: var(--primary-low);
}

```

 ![Screen Shot 2022-06-30 at 20.36.06](https://global.discourse-cdn.com/meta/original/4X/c/b/8/cb808aaae1237458bbc90218e3d7f92da743ea12.png)

---

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [July 5, 2022, 1:21pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/6 "2022-07-05T13:21:47Z")

</div>

Works beautifully! Thanks!!!

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [July 5, 2022, 2:40pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/7 "2022-07-05T14:40:44Z")

</div>

> [@cocococosti](#):
>
> For now, it is possible to make the header sticky trough CSS

That is brilliant - this has bugged me for ages and sorted as easy as that! Thank you.

Are you going to look at this in the plugin? I’ve just taken a look at the code, and it looks like it could be done with the simple addition of your CSS (I couldn’t see any CSS in the plugin code). Messing with plugins is a bit too serious for me though!

---

<div class="post-metadata">

### Author: ![cocococosti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cocococosti/32/231474_2.png) [@cocococosti](https://meta.discourse.org/u/cocococosti)
#### Post date: [July 6, 2022, 4:42pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/10 "2022-07-06T16:42:09Z")

</div>

> [@nathankershaw](#):
>
> looks like it could be done with the simple addition of your CSS

PR created  
[https://github.com/discourse/discourse-data-explorer/pull/182](https://github.com/discourse/discourse-data-explorer/pull/182)

I’ll update here once it’s merged.

---

<div class="post-metadata">

### Author: ![cocococosti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cocococosti/32/231474_2.png) [@cocococosti](https://meta.discourse.org/u/cocococosti)
#### Post date: [July 6, 2022, 11:13pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/11 "2022-07-06T23:13:59Z")

</div>

This has been merged, you can remove the CSS once your site is updated @ganncamp and thank you for your great feature suggestion 👍🏽

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 13, 2023, 7:17pm UTC](https://meta.discourse.org/t/wish-list-sticky-table-headers/231589/12 "2023-08-13T19:17:04Z")

</div>


