I figured the way to filter dataviewjs tables without editing the code, you need to only click the button. For it to work you also need the Buttons plugin and the Templater plugin.
Here is the demo:
And here is the code. It’s a bit complicated, but I refactored it so it is easy enough to use and edit. You can add as many filters as you want to.
```dataviewjs
// Don't change this code
const {createButton} = app.plugins.plugins["buttons"]
const tp = app.plugins.plugins["templater-obsidian"].templater.current_functions_object
let current = dv.current()
let currentFile = app.vault.getAbstractFileByPath(current.file.path)
const changeFilter = async(prop) => {
let propName = "filter-" + prop
let values = pages.map(p => p[prop])
values = [...new Set(values)]
values.unshift("all")
let val = await tp.system.suggester(values, values)
app.fileManager.processFrontMatter(currentFile, (frontmatter) => {
frontmatter[propName] = val
})
}
const filterButton = async(name, prop) => {
createButton({
app,
el: this.container,
args: {
name: name},
clickOverride: {
click: await changeFilter,
params: [prop]
}
})
}
const filterFunction = async(prop) => {
let propName = "filter-" + prop
let filter = current[propName]
if (filter != "all" && filter != null) {
filteredPages = filteredPages.filter(p => p[prop] == filter)
}
}
// Only edit the code below
let pages = dv.pages('"Test folder"')
let filteredPages = [...pages]
// Apply filters
await filterFunction("color")
await filterFunction("number")
// Add filter buttons
await filterButton("Filter color", "color")
await filterButton("Filter number", "number")
let headers = ["Name", "Color", "Number"]
let rows = filteredPages.map(p => [p.file.link, p.color, p.number])
dv.table(headers, rows)
```
Unfortunately this code doesn’t support multiselect or complicated data formats, but it can be tweaked to support it probably.
Update: I actually liked this idea so much, that I decided to use the same principle to create pagination and also add new notes to the table. As a result I created absolutely monstous script, that is too big to put here, so you can find it on my Github.
Here is the demo:
Update: Okay, so I decided that that huge script was to hard to reuse, so I separated it in two files, removing all the hard coding stuff into separate module.
Now if you want to use it, you need to download this file and put it to your vault, and then copy this code and put it in your dataviewjs codeblock. Now it is very straightforward and easy to edit, and I am pretty happy with this solution.
