Bases: Ability to Pin / Freeze Base Table Headers

Feature requests
1

Use case or problem

Bases table headers disappear when scrolling down to browse tables with a large number of records. Without the columns as references, context is lost and columns with similar content might get confused.

Example, columns:
Effort: 3
Priority: 2
Risk: 4
Value: 4
created time:
modified time:
date:
start:
due:

It can get quite confusing to navigate the table without the header row reference. (as well as without the first column reference - See the related feature request here :backhand_index_pointing_right:Bases: Ability to Pin Columns

Proposed solution

When configuring table views, offer users the option to freeze the table headers. When enabled, this option would allow users to scroll the table vertically without loosing sight of the column headers.

Current workaround (optional)

No workarounds.
Attempted CSS workorounds without success.

Related feature requests (optional)

5

I +1 this. I would like to pin columns too which would certainly help me.

6

Hello ! You can freeze headers only with css :

/* Fige l'en-tĂŞte des tableaux dans les notes */
.markdown-rendered table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-y: auto;
  max-height: 400px; /* tu peux ajuster la hauteur visible */
}

.markdown-rendered thead th {
  position: sticky;
  top: 0;
  background-color: var(--background-primary);
  z-index: 2;
  border-bottom: 2px solid var(--background-modifier-border);
}

Better than nothing !

7

Unfortunately only works in “real” Bases. Once you have them inside a markdown file it no longer works - still, for the real base files its a great solution, instantly adopted!

8

The header behavior occurs because the entire base is being rendered, which causes the note itself to scroll rather than the base container.

To fix this you can create a max height on the base, which allows the header to remain fixed at the top.

.bases-embed .bases-view {
  max-height: 600px;
}

You can adjust 600px to your taste.
You can also add .bases-view[data-view-name="YourViewName"]to only affect bases with that specific view name, or .bases-view[data-view-type="table"]to leave other view types such as cards and lists unaffected.

The .bases-embed class targets bases within a regular note, rather than .base files. The .base files already have a sticky header by default, so I personally leave those untouched since I like having the full available screen space on those files.

By default, the code above keeps the header transparent, which I personally don’t prefer because it clashes with the data scrolling behind. To change the header to a solid background, you can use the following:

div.bases-thead {
  background-color: var(--background-primary);
}

You can also swap in any color you like.

Hope this helps!