Live filtering of dataviewjs table

You can have multiselection with the new version of my script, you can find it here: https://github.com/anareaty/obsidian-snippets/blob/main/Dataview%20helpers/dv_filter_functions.js.

Unfortunately I can not find time to write the full explanation for how it works, because it got pretty complicated at this point. But there is the example code for the table with multiple views and filters. Just describe your own paths and properties in the props arrays.

await dv.view("_/scripts/views/dv_filter_functions")
const df = new dataviewFunctions
let current = dv.current()
let view = current.view
let views = ["View1", "View2"]
let defaultView = "View1"
let paginationNum = 20
let filteredPages = []
let props = []
let  newNote = {
		buttonName: "+", 
		fileName: "New note", 
		templatePath: "_/templates/New note.md", 
		folderName: "Inbox", 
		open: true
	}
let pages = dv.pages()
 
await df.changeViewButton(views, "view", defaultView)

if (!view) view = defaultView



if (view == "View1") {

  pages = pages.filter(p => p.type == "type 1" )
  
  props = [
  {prop: "link", type: "file prop", header: "Name"},
  {prop: "tags", type: "list", multiSelect: true, span: true, buttonName: "Tags", header: "Tags"}
  ]
    
   newNote.templatePath = "_/templates/Template 1.md"
   newNote.folderName = "Folder 1"
 

} else if (view == "View2") {

  pages = pages.filter(p => p.type == "type 2" )
  
  props = [
  {prop: "link", type: "file prop", header: "Name"},
  {prop: "category", type: "text", buttonName: "Category", header: "Category"},
  {prop: "cover", type: "text", imageWidth: 100, header: "Cover"},
  {prop: "check", type: "boolean", header: "Check", buttonName: "Check"}
  ]
    
   newNote.templatePath = "_/templates/Template 2.md"
   newNote.folderName = "Folder 2"
 
}
 
filteredPages = [...pages]
await df.newEntryButton(newNote)
await df.createTable(props, pages, filteredPages, paginationNum)
 

Props can have types “text”, “list”, “boolean” and “file props” (for file properties, like link or path). List props can have multiSelect option. Text props can have imageWidth option to turn link into image. Text and list can have span option, to wrap values in spans with separate classes, so you can style them with css. If you omit header, property will not show in table, and if you omit buttonName there will be no button.

I’m trying to make all this easily editable, so here what I came to. Still a bit rough. There are a lot of additional functions in the script.

Also this version do not require any additional plugins, but it is better to use it with Templater or CustomJS installed. Otherwise this script will create the mock plugin to reach Obsidian API, which is a bit clumsy solution.

1 Like