Live Preview support

[alexandru-dinu]

Sortable tables in Live Preview mode: current state of LP, use cases, UX.

---

Currently, vanilla Obsidian does not render tables in LP:

Here's a table in reading mode:

Same table in source view:

[nousernameavailableanymore]

Dataview tables are rendered correctly in LP. However, also on those, sortable does not seem to work.

[alexandru-dinu]

I introduced initial support for sorting Dataview tables in LP in 0.2.3 release.

Please test!

[nousernameavailableanymore]

Sorting Dataview tables is now working for me.
However, in Primary theme, the sorting indicator is missing alltogether and in the default theme it looks... a little strange (I have disabled all CSS).

[alexandru-dinu]

Hopefully fixed in 0.2.4.
I forgot to update the styles.css to accommodate for Dataview tables in LP.

Please test!

[nousernameavailableanymore]

That looks fine now.
Awesome work. Thank you.

[nousernameavailableanymore]

Obsidian now supports table rendering in Live Preview.

Would it be possible to implement "sortable" for this as well (it worked great for the dataview blocks :) )

[alexandru-dinu]

Thank you for letting me know of this update.

It appears that clicking on a rendered table (row or header) in live preview brings up the editor.
This is different from Dataview's behaviour, which does not show the raw code block on click -- it allows you to interact with the table and only switches to code when the cursor gets to the table's area by means other than clicking (e.g. keyboard movement).

I think there is one quick way to implement this by "overwriting" header click behaviour, i.e. clicking on a table's header in live preview will sort the table by that column rather than switching to editing. The switch can occur when clicking on any other table's cell or bringing the cursor to the table's area by e.g. keyboard movement.

However, I am not so sure about the quality of user experience in this case: some users may find it annoying that clicking exactly on a header cell will not let them edit the cell contents. What are your thoughts on this?

I will look into this. If there are no other quirks, I may add a boolean setting like "Allow sortable to operate on 'classical' tables" with a note specifying that "This will overwrite the default header click behaviour."

[nousernameavailableanymore]

I think overwriting the header click behavior is a great idea.
Maybe (not sure if this is technically possible) something like shift+click or ctrl+click could be used to edit the header directly.

However, sorting columns is (without a doubt) done much more often than modifying the header row (which is only done once when creating the table in most cases).
So clicking the header to sort should be the default behavior and shift/ctrl+click to edit the header should be the alternate function.

[nousernameavailableanymore]

Have you already been able to make any progress on this?
Keep up the great work!

[alexandru-dinu]

Hi,

Got some free time to work on this -- sorry for the delay.

Conceptually, I think that disabling live preview when clicking on table headers (to allow sorting) is the easiest approach. Let's see if Obsidian API provides such functionality.
Like we previously discussed, this behaviour can be suppressed by using Shift + click (i.e. to allow renaming instead of sorting).

Will update with relevant information. Thank you for your understanding!

[HyperEpsilon]

I definitely think adding an option to enable/disable the header clicking is the best way to go, assuming it is even possible. One issue I do foresee is if the table is long enough, the final column may be covered be the "edit block" button

[nousernameavailableanymore]

Can you already provide any kind of update yet?
Do you think this can be implemented in Live Preview?

[alexandru-dinu]

Hello,

I have not looked further into this. Moreover, I would like to prioritize the implementation of #18.
If you have an idea of a potential implementation for the live preview support, feel free to submit a PR.

Thank you for your understanding.