Obsidian Dataedit📝

Transform Your Dataview queries into editable tables ✨

This is an Obsidian plugin that turns your static Dataview queries into dynamic, editable tables. Edit data right where you see it, without needing to leave your current view.

💌 Support the Project: I humbly appreciate any support you would like to give me to keep updates brewing! However, please consider supporting blacksmithgu first and foremost for all their hardwork which makes this plugin possible.

TOC

• Join the beta
• Demo
• Usage
• Customization
• Roadmap
• Releases

Dependencies

This plugin leans heavily on the mighty Dataview plugin to make querying note metadata possible. Huge shoutout to blacksmithgu (and other contributers) for their outstanding work. This would not be possible without them!

What about Datacore?

The development of Datacore, another brilliant creation by blacksmithgu, will fulfill most needs to use this plugin. Datacore promises similar features along with an enhanced query engine. However, it's not ready for the public yet—created 2 years ago and with no recent roadmap updates (last checked 9 months ago).

So, why wait? This plugin is here to fill that gap, bringing you the editing capabilities today!

Join the Beta 🚀

We're Officially Beta Testing! Before this plugin hits the Obsidian community page, I’m hoping for some brave souls to dive in, test it out, and help me spot bugs and share your ideas for new features.

How to Get Involved

1. Direct Install: Grab the plugin straight from the release
2. BRAT Plugin: Or install it using the BRAT plugin by TfTHacker for a quick and easy install.

Found a Bug? Got a Feature Idea?

Don’t be shy! Open an issue on GitHub for any bugs 🐞, feature suggestions 💡, or questions ❓ you might have. Your feedback is valuable!

Thank you!!

Demo🎥

Key features🌟

• Instant Edits: Tweak frontmatter properties and rename files right from your table. Changes are swift and sync in real-time!
• Connected Files: All files in your query are linked to the current file and visible in the graph view. (can be turned off)
• Type Support: Handles various property types smoothly.
• Auto Suggestions: Get auto-suggestions for text and multitext properties.
• Interactive Elements: Click and edit links and tags directly in the table.
• Highly Configurable: Tailor everything to your liking. Dive into the Customization section to learn more.

Usage

Important

The Dataview plugin must installed and enabled separately!

Set your codeblock language to dataedit

```dataedit
TABLE foo
FROM #bar
```

The codeblock will accept a dataview query or a Javascript expression that returns an object with headers and values keys with arrays respectively.

Dataview Query

Most (exceptions below) valid Dataview queries should work (let me know if not!)

Caution

Inline metadata may show in the table, but editing it will cause it to be added as a frontmatter property (support coming soon).

```dataedit
TABLE progress, category
FROM #tasks
SORT file.name
```

Warning

The exceptions to the statement above are:

• You must include the note link as one of the columns.
  • the 'File' column is included by default, but if you use TABLE WITHOUT ID, then you must include file.link.
• You cannot specify column aliases in the query (you can set up aliases in this plugin or block settings though)
• I haven't tried it yet, but I am pretty sure GROUP BY will not work (on roadmap)

Javascript expression

• You will have access to the dataview api through dv just like in a dataview js expression
  • Dataview render methods will not work properly, so don't use them.
• You must return {headers: string[], values: string[][]}
• Note that you still just use the dataedit code block language. The plugin will automatically detect if you have entered a dataview query or js expression
• Technically you don't have to use dataview here, but currently I rely on some data types produced by it so it won't work properly

// surround with ```dataedit <newline> ``` like normal
const data = dv
	.pages("#tasks")
	.map((p) => [p.file.link, p.progress, p.category]);
return { headers: ["Name", "Progress", "Category"], values: data };

Customization

You can customize the way tables look and behave through either the plugin settings and or an individual code blocks config.

Plugin settings

These settings will apply to all Dataedit tables unless that code block has its own config that conflicts with them.

Block config

This configuration will apply only to the table produced from that codeblock.

• If no config is provided, the plugin settings will apply
• If a config is provided, it will overwrite any plugin-level settings
• You can provide a config in a block by manually typing it in YAML format (not recommended) or by clicking the gear icon in the bottom right of the block once rendered

Implementation details

The following is a typescript definition of the expected shape of the provided config after being parsed to YAML. This is validated by zod and will revert to the plugin settings if an invalid config is provided.

Zod schema

Show code

const StartCenterEnd = z.union([
	z.literal("start"),
	z.literal("center"),
	z.literal("end"),
]);

const TopMiddleBottom = z.union([
	z.literal("top"),
	z.literal("middle"),
	z.literal("bottom"),
]);

const Alignment = z.object({
	vertical: TopMiddleBottom,
	horizontal: StartCenterEnd,
	enabled: z.boolean(),
});

export const SettingsSchema = z.object({
	autoSuggest: z.boolean(),
	renderMarkdown: z.boolean(),
	showNumberButtons: z.boolean(),
	showTypeIcons: z.boolean(),
	emptyValueDisplay: z.string(),
	queryLinksPropertyName: z.string(),
	cssClassName: z.string(),
	columnAliases: z.array(z.array(z.string(), z.string())),
	verticalAlignment: TopMiddleBottom,
	horizontalAlignment: StartCenterEnd,
	alignmentByType: z.object({
		text: Alignment,
		list: Alignment,
		number: Alignment,
		checkbox: Alignment,
		date: Alignment,
		datetime: Alignment,
	}),
});

Default settings

Below are what the default plugin settings are when you first install the plugin.

Show code

{
	autoSuggest: true,
    renderMarkdown: true,
	showNumberButtons: true,
	showTypeIcons: true,
	emptyValueDisplay: "-",
	queryLinksPropertyName: "dataedit-links",
	cssClassName: "",
	columnAliases: [["thisColumn", "showThisAlias"]],
	verticalAlignment: "top",
	horizontalAlignment: "start",
	alignmentByType: {
		text: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
		list: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
		number: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
		checkbox: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
		date: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
		datetime: {
			vertical: "top",
			horizontal: "start",
			enabled: false,
		},
	},
};

Roadmap

Items will be moved to the appropriate release once I start working on them or have them planned out

• Switch to Vite
  • bundle size at ~1.1mb :( Pretty sure this is in part due to esbuild and it not minifying and/or bundling as good as Vite
    • Yup, esbuild didn't have minify on lol so I might not do this
• Allow GROUP BY and JS expression grouping
• Alternative views to table
  • cards
    • custom rows and columns count
  • kanban
    • custom columns
      • property name-- string (will display alias if set in settings/config)
      • show count-- boolean
      • color-- string (valid css color)
    • collapsible columns (persisted state)
    • custom swim lanes? (may or may not do this)
• Live preview markdown editing
• Date display options in settings and config
• Improve autosuggestions
  • Once a character is entered, only show suggestions starting with what has been typed so far
  • Rewrite suggest component from scratch
    • The class imlementation from Obsidian has issues when used in Radix dialogs since the suggest element is rendered to the document body.
      • Idea is to use a portal wrapper to allow it to be rendered to a custom element
  • detect wikilinks and suggest from files

Releases

0.0.3 (TBD upcoming)

• select cols to show totals for
• nested property support
• pagination (set default limit per page in config)

0.0.2 (TBD upcoming)

• Render markdown
  • Render markdown as html in text and multitext cells
  • Will not be live-preview editable (working on that for another release)
  • Links and tags are not clickable (unless a link is the only thing in the
  • cell)
  • Basic support for image embed via markdown embed link
    • I'm not super happy with the way it sizes the image, so I will continue to work on this
  • Can turn off feature in plugin settings and/or codeblock config
• Fixed case sensitivity issue
  • Previously, I incorrectly assumed that TABLE in a Dataview query must always be capitalized. Now it works with any case as long as TABLE (or tAblE or whatever) is at the start of the query
• Inline properties
  • Inline properties can now be updated from Dataedit tables
  • Can be turned on in plugin settings and/or codeblock config
    • Default OFF due to it having potential performance impacts

0.0.1 (2024-05-30)

Initial beta release!

• Support different property types
  • string
    • auto suggest
    • render and edit links
  • array (and tags)
    • tags
      • Note that this only works if you use tags as a frontmatter property
    • render and edit links
    • auto suggest
  • number
  • Checkbox
  • Date & Datetime
    • Issue with not filling value from property. It does update though
  • Ability to rename file
• Links from query to frontmatter (to show in graph view, etc)
• Config options
  • Auto suggest-- boolean. default true
  • Show type icons-- boolean. default true
  • Links from query to frontmatter
    • property name-- string. Default 'dataedit-links'. Leave blank to turn off this feature
  • CSS classname-- string
  • Column aliases-- an array
  • Vertical alignment-- top, middle, bottom
    • Single value-- applies to all cells
  • Horizontal alignment-- left (start), center, right (end)
    • Single value-- applies to all cells
• [ ] Specify default config for codeblocks from plugin settings
  • Codeblocks will inherit from plugin settings unless overriden specifically
• Allow for extra config in each codeblock
  • Add --- to the end of the query where you can use yaml to specify config
  • Setting button to add/edit config from a dialog rather than manually in code block (will automatically update code block and add yaml config)
• Allow for TABLE WITHOUT ID as long as file.link column is included
• Reset plugin settings to default button

Contributing

Feel free to open an issue for improvements, bugs, questions, etc.

If you would like to contribute to the project, please fork the repo and make a pull request! Setting it up on your local machine is as simple as cloning the repo and running npm install. It comes with a test vault (/test-vault) which is where the code gets built to on npm run build.