Dataview and multiple column plugins

Things I have tried

My use case involves rendering Dataview tables in two colums. I have tried both Multi-Column Markdown and Obsidian Column plugins.

Mulit-Column Markdown is definitely my preferred option in regards to usage. My Dataviewjs code blocks can stay in actual code blocks with this plugin, whereas with Obsidian Columns, the Dataviewjs blocks have to live in a callout block, so the code looks awful.

It’s the difference of this with Multi-Column Markdown:

ID: ID_52av
Number of Columns: 2
Auto Layout: true
border: off
dv.table(
	["20-25", "14-19", "8-13", "2-7"],
	dv.pages('"Folder/Subfolder"')
		.map(p => [p.field1, p.field2, p.field3, p.field4])
)

— column-end —

dv.table(
	["*", "a", "b", "c", "d", "e", "f", "g", "h"],
	dv.pages('"Folder2/Subfolder2"')
		.map(p => [p.field0, p.field1, p.field2, p.field3, p.field4, p.field5, p.field6, p.field7, p.field8])
)

=== end-multi-column

Versus this with Obsidian Columns:

>[!col]
>```dataviewjs
>dv.table(
>["20-25", "14-19", "8-13", "2-7"],
>dv.pages('"Folder/Subfolder"')
>.map(p => [p.field1, p.field2, p.field3, p.field4])
>)
>```
>
>```dataviewjs
>dv.table(
>["*", "a", "b", "c", "d", "e", "f", "g", "h"],
>dv.pages('"Folder2/Subfolder2"')
>.map(p => [p.field0, p.field1, p.field2, p.field3, p.field4, p.field5, p.field6, p.field7, p.field8])
>)
>```

What I’m trying to do

Since the usage of Multi-Column Markdown is IMO superior to the usage of Obsidian Columns I would love to just stick with it. Unfortunately there is a flickering problem with rendering Dataview elements in columns with this plugin, that the developer is unlikely to address: https://github.com/ckRobinson/multi-column-markdown/issues/26.

Obsidian Columns does not have this problem, but if I was to use this plugin instead, I would have to deal with coding in callout blocks. I know this might not seem like a big deal, but a lot of my Dataviewjs code blocks get a lot more complex than the example I have above, and I would really prefer to have a real code block with syntax highlighting to code in.

Any suggestions?

  • Has anyone come across the Multi-Column Markdown + Dataview flickering issue and found a way around it?
  • Is there a way to maybe use dv.view() or some other Dataview rendering method so that I can write most of my Dataviewjs stuff in a code block and then just put a short line like dv.view(table) in the Obsidian Columns callout block?
  • I’m also not opposed to doing the columns with just HTML and CSS, but I’m just not sure how to implement that with a Dataviewjs code block

Those code examples you’ve given do you write them manually into your notes, or are they written in a template of some sort?

I’ve not used that combination, but I do see that dataview flickers from time to time, and it’s not something I like seeing. Some might be avoided by increasing the refresh time interval after the file has stopped changing.

Other than that, if the developer of that plugin says he’s having trouble, I’m inclined to believing he has tried his best, and that there actually isn’t a good solution.

I think this might be your best solution, even though it does require a bit of initial setup to be able to write the various dv.view() scripts. But once you get the hang of that, it’s reasonably easy to write the scripts, and add them to your column layout.

You can insert stuff more or less directly into the dv.container inside a dataviewjs block, but it feels a little hacky and finicky at times. I think the dv.view() solution is better.

Have you created any dv.view() scripts at all, or is that unknown territory for you?

Those code examples you’ve given do you write them manually into your notes, or are they written in a template of some sort?

I’ve written them manually into the note. I consider it more a “page” than a note, as the same note will be used over time rather than periodically repeated like a daily note so a template is not needed in this case.

Have you created any dv.view() scripts at all, or is that unknown territory for you?

It’s unknown territory to me, and I’m quite sure I’m not doing it right. I set up a dedicated subfolder in my scripts folder and placed the view.js file in it, in which I put the above dv.table() code.

So, in view.js which is in “scripts/subfolder”:

dv.table(
	["20-25", "14-19", "8-13", "2-7"],
	dv.pages('"Folder/Subfolder"')
		.map(p => [p.field1, p.field2, p.field3, p.field4])
)

That I’ve called in my note this way:

$= await dv.view("scripts/subfolder")

With the above, I can get the Dataview table to render upon page load. But somehow the above seems to break Templater. Any templates I insert (MetaEdit templates) that affect values in the DV table will get me the error “Template aborting: dv is not defined”

OK, overall this looks like the right thing. But there are some caveats

  • Within a Templater execution command, you’ll need to do something like const dv = this.DataviewAPI or const dv = this.app.plugins.plugins["dataviewjs"].api to access dataview functions within those blocks. Do note however that dv.view() is not available within this context

  • In my templates, I tend to write stuff like this

    `$= await dv.view("_js/journalHeaderNav")`
    

    And that is outside of any template command blocks, and it just works.

  • Inside my view javascript, I don’t need to declare the dv

What do you mean with “MetaEdit templates” ? That could possibly be the culprit. How does that template look?

Bonus tip: How to present code properly in a forum post

If you want to showcase either markdown, or code blocks, or dataview queries properly in a forum post, be sure to add one line before and one life after what you want to present with four backticks, ````. This will ensure that any other backticks (like for code blocks) is properly shown.

By the way, have you defined a user script folder for Templater ? Is that the same folder as you’re having your dv.view() scripts in? That is a common error, and you need to split those two apart. Templater is not happy to share folders with anything else javascript related.

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