Scrollable dataview table

[Stiltstiltstilts]

What I’m trying to do

Hi, some of my dataview tables can be very long, and I would like to be able to limit them to a certain height and have a scroll-bar to explore all the data, rather than the table taking up a huge amount of vertical real-estate. Has anybody tried this/have ideas?

Thanks!

Things I have tried

I am not great with CSS, but have tried a few things, e.g.,

table {
display: block;
max-height: 400px;
overflow: auto;
}

this successfully limits the height of the table and adds a scroll-bar, but kinda messes with the column formatting. Ideally, I feel like I would like to be able to have “display: table;” but my limited understanding is that this doesn’t allow for max heights and scrollbars.

From a bit of searching, I gather one suggested solution in webdesign generally is to embed the table in a div which is then styled to have a max height and scrollbar etc, rather than applying this to the table directly… but then I’m not sure how to embed dataview tables in a div…

[thelegend]

I have the same issue, but I’m using a dataview list, not a table. I’d rather not use limit in the dataview code, because I want to see it all. It’s just that my note is getting wayyyy too long.

[mnvwvnm]

Hi.

Try this (without promises):

.markdown-preview-view .table-view-table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

.markdown-preview-view .table-view-table thead th {
  position: sticky;
  top: 0px; 
  background: var(--background-primary);
  z-index: 1;
}

Adapt height value.

[JonSeaman]

Here is an example dataview doing that. Since the dataviewjs blocks use JavaScript, you can use that to edit the style of the block. This one will do all blocks on the page with it. You can change the style to whatever you want.

dataviewjs example:

// You dataview js stuff...

// Put all dataviewjs in a scroll view.
let elements = document.getElementsByClassName('block-language-dataviewjs');
for (let i = 0; i < elements.length; i++) {
  let item = elements.item(i);
  item.setAttribute("style", "height:120px;width:720px;overflow:auto;");
}

It is a little harder to do it for normal dataview, but can be done by running the above script with block-language-dataview instead of block-language-dataviewjs. Although, if the dataview updates after the script is run, then it will no longer be scrollable.

[JonSeaman]

Upon thinking about this more, I think doing what OP is doing, but changing the class to block-language-dataview should work easier, and be CSS only. I would also add one for block-language-dataviewjs with the same styling.
I am not a web developer, so don’t normally think in CSS.

[JonSeaman]

This solution worked for me in my obsidian.css file:

.block-language-dataview  {
    display: block;
    height: 400px;
    overflow: auto;
}

.block-language-dataviewjs   {
    display: block;
    height: 400px;
    overflow: auto;
}

[Saorsa]

Is there a way to scroll from left to right?

[Archie]

interesting topic, I am having this problem a lot especially in new live preview mode. any conclusions on how to do this?

P.S. the last snippet works beautifully

P.S.2 I wonder is there a way to improve it even more by keeping the first row/title row in place as we scroll?

[thelegend]

That worked for me! I changed “height” for “max-height” so as to not have a big empty box if there’s only a few items listed:

.block-language-dataview  {
    display: block;
    max-height: 400px;
    overflow: auto;
}

Thank you so much.