Is it possible to render the dataview table to a specific html element?

Help
1

This is a table query example:

dv.table(
  ["note","folder"],
  dv.pages().limit(5).map(page => [page.file.link, page.file.folder]));

I want to be able to render it in a html element (like div, span) of a specified class. But I don’t see the implementation in the document.
Once dv.table() has been called, it will only appear at the current code block position.

As for why I wanted to do this:

If I only query the results, then I can specify the element values, like:

var count = dv.pages().length;
document.getElementById("target").innerText = count;

but dv.table() I don’t have a good way to do it.

2

I’m not sure if I would advocated doing what you want to do, especially if you want to change other elements of the currently rendered page. That could lead to a lot of different headaches.

However in How to target Dataview queries for CSS styling I talk about various option on how to introduce targets to attach stylings to dataview queries. I also mention that you’ve got access to dv.container within your dataviewjs scripts, and this is where dataviewjs stores the result of the current query.

In my experience it’s not been any problem concatenating multiple dv.table() and/or dv.header() and so on, within one script without having to use dv.container. But your mileage may vary, so if not using multiple output calls, you could consider tinkering with changing the dv.container.

Theoretically, you should also be able to use dv.container sub elements and introduce them to anywhere in the DOM too, but I’ve not done that as such. But dv.container is a normal javascript HTML Element, so you’re kind of free to do whatever you want with it… Just be careful when changing the DOM in general.

2 Likes
3

Wow, that’s amazing. Thanks for the reply, it does set the dv.container before calling dv.table which I didn’t think of before, like this:

dv.container = document.getElementById("test");
dv.table(
  ["note","folder"],
  dv.pages().limit(5).map(page => [page.file.link, page.file.folder]));

Then the table is automatically displayed inside the target element.

But I found that this method is not suitable for switching to “reading mode”, because obsidian copies the html id to “reading mode” as well, and this assignment can only be given to one tag element…

Is this likely to have an additional solution?

4

What do you mean with this? I don’t understand what you are saying here. Either you’re in live preview or reading mode when the query is executed. You don’t switch modes within the query…

I’m not quite sure what you’re trying to achieve now.

5

Ok, now my obsidian set the “default view of new tabs” as Editing view.
And the note content is:

## Header

<div id="test"></div>

``` dataviewjs
dv.container = document.getElementById("test");
dv.table(
  ["note","folder"],
  dv.pages().limit(5).map(page => [page.file.link, page.file.folder]));
```

So when I open this note directly, it displays the table normally and there is only a test html tag.
image

But if I switch current view to Reading view with the button in the top right corner:
image

This test html element will be copied to the reading view and does not display the table.
image
Because dv.container can only be given one html object, so the priority matches to fisrt test html tag in the hidden editing view.

6

You’re doing dangerous stuff there as you’re setting the dv.container, and not only lifting information out of it. There is no guarantee that would ever work.

If you want go down that path, you’ll need to use functions outside of the dataview library, and use pure html element stuff, AFAIK.

You could possibly use dv.el() to build up some extra stuff and fill that with extra information, but it’s hard to advice properly on the better way forward as I don’t really understand your use case and why you need to mess with elements outside of the generated elements.

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.