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.

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

Direct Install: Grab the plugin straight from the release
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

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!

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.

aprountzos/dataedit