alexandru-dinu / obsidian-sortable

Table sorting plugin for https://obsidian.md

Obsidian Sortable

Important

As of March 12, 2024 I will be archiving this repository since I no longer have the time, nor the interest to further contribute and expand the project's feature set. I appreciate that many of you have found this useful!

If anyone wants to continue the development and/or maintain this project, feel free to fork.

As an alternative, look at kraibse/obsidian-table-sorting.

Sortable is a plugin for Obsidian that aims to offer Wikipedia-like sortable tables. Sorting is done with respect to a table header, on click:

• first click: ascending order
• second click: descending order
• third click: default order

Features

Demo

sortable.mov

• Supported data types: numbers, strings, ISO dates. Custom comparator functions are part of the roadmap (see this issue).
• No altering of the markdown source code. Sorting is done by rearranging table rows (i.e. tr elements).
• No dependencies.

Please note that the development is still in a beta stage. Check the project's roadmap for updates.

Installation

Search for "Sortable" in Obsidian's community plugins (Settings > Community plugins > Browse), install, then enable.

Alternatively, you can download the required files from the latest release, move them to vault/.obsidian/plugins/obsidian-sortable and enable "Sortable" from the "Community plugins" settings.

Disclaimer

I built Sortable mostly to fulfill my personal needs and I appreciate that now many people find it useful. However, given the plethora of plugins, themes and tweaks for Obsidian, numerous bugs may occur when using Sortable in various contexts. These may range from UI inconsistencies to inability to sort in certain states. While I try to address most of the issues, please understand that I cannot accommodate every request, mostly because I do not use many Obsidian plugins and quirks myself.

Thank you!

obsidian-sortable's Issues

Sorting by date is flawed

When sorting by date, Sortable uses the string instead of the iso-date. For example:

I have my release dates logged as iso-date: ReleaseDate:: YYYY-MM-DD, but my standard date-view is DD-MM-YYYY.

When I use Sortable it sorts by DD-MM-YYYY, which means 31-05-2022 is later than 15-10-2022.

Is is possible to recognize dates and use iso-dates?

Incorrect MAC addresses sorting

For these entries:

02-E5-27-38-DB-CF
00-55-DA-52-FA-15
1C-69-7A-6B-15-9D

this extension sorts them as:

00-55-DA-52-FA-15
1C-69-7A-6B-15-9D
02-E5-27-38-DB-CF

instead of:

00-55-DA-52-FA-15
02-E5-27-38-DB-CF
1C-69-7A-6B-15-9D

Diff

 00-55-DA-52-FA-15
-1C-69-7A-6B-15-9D
 02-E5-27-38-DB-CF
+1C-69-7A-6B-15-9D

Live Preview support for native (non-dataview) tables

I saw that #22 has been implemented, but I'm wondering if the same would be possible for native tables created with | to be sorted in Live Preview?

I know it might be tricky as clicking anywhere on the table currently opens it for editing.

Feature Request: have Sortable ignore tables inside of special class

I find occasionally, for one reason or another, I have a table I do not want Sortable to sort. Would it be possible to have Sortable ignore everything inside of a certain class? For example, if I had a table inside of a <div class="nosort"> or something similar.

Sorting by Date-and-Time columns does not change the order - only reverts to original order

Describe the bug

Columns with Date and Time only sort to the original order. Requests for Ascending or Descending order appear to be ignored.

To Reproduce
Steps to reproduce the behavior:

1. Obsidian v0.12.15
2. Sortable 0.2.0 installed
3. Grab this table:

| Order | File          | Dates            | Dir         |
| ----- | ------------- | ---------------- | ----------- |
| 1     | Table Sorting | 2021-09-29-22:38 | Tables      |
| 2     | Unwanted Tags | 2021-09-24-20:28 | Tag Testing |
| 3     | Obsidian      | 2021-09-25-20:20 | Tag Testing |
| 4     | Tag File 6    | 2021-09-24-20:11 | Tag Testing |
| 5     | Tag File 5    | 2021-09-22-20:11 | Tag Testing |
| 6     | Tag File 4    | 2021-09-24-19:58 | Tag Testing |

4. Sort each of Order, File and Dir columns by each of Ascending, Descending, Original to confirm that plugin is working as expected.
5. Sort Dates column by each of Ascending, Descending, Original - it only ever reverts to original order, whilst cycling through all the 3 icons. In other words, sorting by Date-and-Time columns seems broken,

Expected behavior

Sorting on Dates and Times works for ascending and descending orders

Video Demo

Please Note: When I recorded this, I only had Sortable enabled. However, the behaviour is the same when Advanced Tables 0.13.0 is installed and enabled

Obsidian.Sortable.sorting.bug.2021-09-30.at.15.33.51.mov

Desktop (please complete the following information):

• macOS Catalina 10.15.7
• Obsidian Version: v0.12.15
• Sortable 0.2.0 installed

Additional context

Can't think of anything. Just wanted to say "thanks" for a really helpful plugin!

Set-up actions for building and linting

Does not work on a secondary window.

Plugin does not work if the tbale is on a note opened in a window that is not the main obsidian window.

Unable to sort list of IP Addresses

I wanted to make various lists of the IP addresses, mac addresses/ etc... of the networks I'm on, i can create tables and the mac addresses and names listings will be able to be sorted, but the IP addresses won't sort either way no matter what.

I briefly got 192.168.001.XXX working to sort last week but when I came back to it wouldn't sort the IPs.

I've tried every number of combos, the IPs will sort (incorrectly) if I do not include the extra ZEROS (0) so it seems like it might be getting confused by the periods - but still, even if all the numbers are the same except for the last, it should sort in some way but doesn't unless all the final numbers in the address 192.168.1.xx if I put an adress ending in .1 as .001 it wouldn't sort at all, but when I put it as .1 it would incorrectly sort the IPs

Test with multiple large tables

# gen.py
import sys
import pandas as pd
import numpy as np
import random, string

n = 2 ** 5
m = 18

df = pd.DataFrame(np.random.rand(n, m))
df.iloc[:, 0] = [
    "".join(random.sample(string.ascii_lowercase, 6)) for _ in range(n)
]
df.to_markdown(sys.argv[1])

Findings

Table size	Delay until sorted
2^10 x 2	instant
2^10 x 5	~ 250ms
2^10 x 9	~ 500ms
2^12 x 2	~ 1s
2^12 x 5	~ 2s
2^12 x 9	~ 2.5s
2^14 x 2	~ 8.5s
2^14 x 5	~ 13s
2^14 x 9	~ 18s
16 x 2^14	~ 6s

• Memory usage increases a few MB (< 20 for large tables), but it's quickly released when sorting is done.
• 16k rows should be a decent upper bound.
• For large tables, Obsidian also struggles with rendering and becomes sluggish (with Sortable disabled).
• For tables with less than 1k rows, the sorting feels instant enough -- there's no disruption.

Conclusions

• Going forward, it may be a good idea to pop-up a notification saying Sortable is working..." to let the user know it did not freeze -- when sorting takes > threshold seconds.
• For "daily usage" tables, Sortable is fast enough.

Sortable in alphabet not date

Error

• The sortable plug-in sorts date format e.g.2022-07-06 in alphabet order with the first letter of the month July 06, 2022. As the result you could see the example of date sorted in alphabet order.

Expected behavior

• Sortable plug-in should sort date in date rather than in alphabet.

Feature request: Live Preview support

Hi,

this is a great plugin! And now that Dataview tables work in live preview, it would be great if Sortable would work in live preview as well!

At the moment I have to switch to reading mode to sort, and when I return to live preview the order returns to Dataview default…

is this something that is possible?

Feature Request: Row Filter

Thanks for making this plugin. I think it should be possible to implement row filtering, which would help with large tables, and in a sense allow searching within a table.

The way I envisage this is that in preview mode, for textual columns, a text field can somehow pop-up, allowing the user to type in their query. For numerical columns, a slider could pop up to filter by a min-max range.

If you think it is a good idea, I would be interested in implementing this and submitting a pull request.

Add configuration for (special) data types

• different date formats
• currencies
• ...

---

See Forcing a column to have a particular data type.

Check integration with obsidian-dataview

• https://github.com/blacksmithgu/obsidian-dataview

Install `onClick` event only for table headers

Current implementation:

function onClick(evt: MouseEvent): void {
    const htmlEl = (<HTMLInputElement>evt.target);
    
    const th = htmlEl.closest('thead th');
    
    // click was not performed in a table, exit
    if (th == null) { return; }
    
    // click was performed in a table
    // ...
}

Maybe it's better to do this rather than registering onClick events for all table headers in the current page?

FR: Use `Intl.Collator` to sort "naturally" instead of showing 1, 10, 2, 3, etc.

Hi, this is a very useful plugin. But currently, it sorts in an non-intuitive way (i.e., 10 comes before 2). It would be better if the plugin sorted like the File Explorer does in Windows or Obsidian or VS Code.

Feature Request (future): Add hook for individual sorting function (comparator function)

Thanks for this really helpful plugin! Please try to get it into the official list to install via "Community Plugins" …

For a future version, especially for use with the Dataview plugin, please consider adding a hook that would allow adding an individual Javascript sort comparator function per column (as usual, returning -1, 0, or 1).

If this could be added in a Dataview JS (dataviewjs) code block, it would allow sorting on columns that have otherwise "unsortable" content, like dates individually formatted using moment.js.

If building dataviewjs queries, it can be expected that the user knows about JS and has the internal data available that would allow writing a comparator function.

See also: https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/16?u=moonbase59

Add support for 'reset to default' on third click

(ascending -> descending -> default) -> 
(ascending -> descending -> default) -> ...

• prerequisite -- save table state by using a UUID.

---

StackOverflow reference: https://stackoverflow.com/q/67097117.

Exclude dataview calendar

Hi.
Dataview has a new query type: calendar
However, this calendar is render as a table and the sort "triangles" elements are render too.

But these are absolutely unnecessary in calendar format.
Is there any way to exclude these specific tables from the sortable plugin?

Can't sort according to dates

Here is a template

|  Col1         |  Col2            |  Col3              |  Col4              |  Col5              |  Dates      |
|:--------------|:-----------------|:-------------------|:-------------------|:-------------------|:------------|
| Testing Title | Testing Column 2 | Testing Column 3   | Testing Column 3   | Testing Column 5   |  2022-04-17 |
| Testing Title | Testing Column 2 | Testing Column 3   | Testing Column 3   | Testing Column 5   |  2022-06-05 |
| Testing Title | Testing Column 2 |  Testing Column 3  |  Testing Column 4  |  Testing Column 5  |  2022-03-10 |  

Add comprehensive testing suite

Must have some sort of regression testing.

Sorting is reset to the unsorted state when dataview content is updated

When content is updated in the table that is being sorted, coming from a dataview query, the intended sorting is reset. Specifically, the column that was set to the sorting column. For meaningful use with dataview, where the rendered content my have updates to their fields often (like using a table for a project-management view), this makes it very tedious to have to continually set up the sorting to a useful state.

Immediate to-do

• arrows should be displayed only on "sortable" tables => "this.asc"
• want the event to happen only when clicking on headers
• change css for sorting direction

References

• https://javascript.plainenglish.io/easy-table-sorting-with-javascript-370d8d97cad8
• https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript

Remove table state on pane close (or similar)

Currently, tableState is removed from the map when order becomes the default one.

However, if the table is in an "ascending" or "descending" state, and the pane is closed, then the reference to it is lost.
The (key, value) pair remains in the map.

I see two possible solutions:

1. Register an onPaneClosing event (or similar) that removes all active references of the tables in the pane about to be closed.
2. Persist table's sortable-id=<uuid> attribute, since it links the HTML entry to the plugin's internal tableStates.

Issues with installation

I tried to install Sortable both by downloading the repo in the plugin folder and also with the BRAT plugin. In the first case, when I try to toggle on Sortable in the community plugins settings, it says "Failed to load Sortable" and it stays off. And if I use BRAT, I can successfully toggle Sortable on, but I can't find it in the list of activated plugins on the left. Nor can I find it from the command palette.

Submitting Sortable to Community Plugins

This is a fantastic plugin which I have been using for months without issue. Do you have a plan to adding it to the Community Plugins so it is easier for people to download?

Hide sort button when there's only table headers/no table content

It's just a small visual issue I encounter when using tables like this...

Implement parsers for various data types + auto-detect data type

From https://meta.wikimedia.org/wiki/Help:Sorting:

The way items are sorted depends on the data type of the first rows. To determine the data type, the first 5 non-blank rows below the header are tested after loading the page and the most appropriate format is chosen. Mismatches are possible. The sort order of a column can be forced [using data-sort-type="..."].

jquery.tablesorter.js defines the following parsers:

• 1. (fallback, default) text
• 2. IPAddress
• 3. currency
• 4. url
• 5. isoDate
• 6. usLongDate
• 7. date
• 8. time
• 9. number

then it tries to detect parser for column.

This may be the most straightforward way of dealing with multiple data types and ensure minimal tinkering on user's part.

Insider build 0.12.4 breaks the plugin

Tried this with the new insider build 0.12.4 and can't get the plugin to load at all.