Custom Renderer

[renarl]

Is it possible to create a custom renderer? I would like to return the results of a data query as a kanban board, where each result item is a card in the appropriate column. I'm ok with using js and html APIs.

[blacksmithgu]

To be precise, you want to use the existing Dataview Query Language and then just implement your own view on top of it (+ use existing Dataview utilities for rendering data and all that)?

You can make custom views already using DataviewJS (by just directly making HTML elements in the view), though it doesn't support executing queries yet since part of the query syntax includes how the query will be rendered (a longstanding shortcoming I should probably fix!).

[renarl]

Yes, I wanted to create a custom view on top. It turns out it's pretty easy. Inside a dataviewjs block, I've access to this.container from where I can create an element.

Here is an example if someone needs it:

```dataviewjs
const pages = dv.pages().limit(3)

for (const page of pages) {
  this.container.createEl('div', {text: page.file.name})
}
```

[blacksmithgu]

Yes sir, that works fine. You can also compartmentalize this into a view using dv.view(), which is more easily re-usable across scripts.

[renarl]

How do I get access to MarkdownRenderer from dv context?

[blacksmithgu]

Is it not accessible in the global scope (try accessing it in the console)? If not, you can use dv.api.renderValue from the plugin API; it's signature is here:

    /** Render an arbitrary value into a container. */
    public async renderValue(
        value: any,
        container: HTMLElement,
        component: Component,
        filePath: string,
        inline: boolean = false
    ) {
        await renderValue(value as LiteralValue, container, filePath, component, this.settings, inline);
    }

And you call it using dv.api.renderValue(...). You can access Dataview's component and container via dv.component and dv.container respectively; the file path is dv.currentFilePath.

[renarl]

MarkdownRenderer is not accessible in the global context. I tried both in the console and in the dataviewjs scope. But dv.api.renderValue works. Thanks!

Here is an example if anyone needs it:

```dataviewjs
const markdownString = "- this is **markdown** text"

dv.api.renderValue(
  markdownString,
  dv.container,
  dv.component,
  dv.currentFilePath)
```