How to preserve state between sorts?

[akinuri]

I have a simple table. I want to do multi-column sorting. I don't want to use shift+click. If I manually sort a column (via UI headers), and then sort another, this should count as a multi-column sort. However, that's not the case. Each sort seems to be applied to the initial sort state of the table and then rendered on the screen. That's not what I'd expect. On top of this, there doesn't seem to be a way around this.

I tried a few solutions (with the help of ChatGPT, since I'm new to this tool) and none worked. Finally, I tried to destroy the instance after a sort, and then reinitialize with the new state, however, when the instance is destroyed, the sort state is reverted back to the original state, so it didn't work.

Is there no way to do this? Why isn't the table itself used as the source of truth? Why isn't there a way to specify the source?

My setup in case it matters:

myDataTable = new DataTable(table, {
    paging: false,
    searching: false,
    info: false,
    columnDefs: [
        { orderable: false, targets: 0 },
        { orderSequence: ["asc", "desc"], targets: `_all` },
        {
            targets: 4,
            render: dtRenderRangeCell,
        },
        {
            targets: 7,
            render: dtRenderRangeCell,
        },
    ],
    order: [],
});

I hope I'm not overlooking anything as I'm frustrated atm :)

---

In regard to the issue note, I wouldn't want to sign up on the site/forum of every tool I use to give feedback, etc. It'd be too tedious. But I can be expected to do it on GitHub, since this is "the hub".

[AllanJard]

If I manually sort a column (via UI headers), and then sort another, this should count as a multi-column sort. However, that's not the case.

No it isn't. That's not how the DataTables UI works. You aren't over looking anything. If you want to add a new column to an existing sort to make it multi-column then you need to use the shift key. I recognize that doesn't work on mobile, and I have a plan to address that in future through buttons, but not in the way you describe. If it ordered that way there would be no way to clear the multi-column sort, it would just keep adding without some sort of reset. That would be a completely valid UI decision, it just isn't how I've implemented DataTables.

[akinuri]

I see. My default expectation (in general) was/is that the tool always uses the current state of the data/table. This doesn't require any additional action (e.g., the shift+click) to do multi-column sort.

I'm also ignoring the "clearing" effect as the initial ordering of the data has no significance (in this case, at least). So, there's no reason to clear the sort and return to the initial state. If I must clear, I can always add an index column and use that.

I'll abide by its rules for now, but I'm not really content with the way it works. It's probably a me issue. I'm a picky person :)

I wish there was a way to work around it. The simplest solution that can be implemented, I think, is to let the instance leave the table as it is when the instance is destroyed (via a parameter), and not return the table to its initial state. That way, after a sort, I can destroy the instance and create a new one. This would let me preserve the state between sorts.

[AllanJard]

I'm confused a little about the clearing not being significant. To my mind, if I load a table and it is sorted on the first column, but I want it to actually sort on another column, then I should just click that header. I'm not clear in your suggestion how I would go about getting it to sort only on the second column? I think most table components I've come across operate the way DataTables currently does.

If you want to fork it and implement it by your suggestion, this is where to start.

[akinuri]

Here's my case. I'm showing 100+ rows (survey answers). The order of the rows has no significance and they are randomly distributed/sorted. I want to be able to sort the rows by some columns. Knowing only the last applied sort choice (column) is enough. One can do multi-column sorts by doing multiple sorts (header clicks). This is similar to how Excel, Sheets, etc. work.

I should note that I'm not planning to use the pagination option. Thought I should mention this in case it affects how to the sort works.

I doubt it, but I might take a look at the source. Implementing a custom (as in my own, but more general) solution seems more appealing than trying to work through an unknown codebase.

[AllanJard]

I'm still not quite understanding how you would get from sorting on just column index 1, to just sorting on column index 2 with this method? A click on column index 2's header would add to a sort on 1. Would you have a "clear sort" button?

I should note that I'm not planning to use the pagination option. Thought I should mention this in case it affects how to the sort works.

It doesn't. It is important to note that DataTables isn't a spreadsheet and don't attempt to be. It is a table display enhancement library.

[akinuri]

Since the initial ordering of the data is random, thus insignificant, I don't plan to add a way to get back to the initial state.

For cases that the initial ordering matters, I usually add an index column to the front.

Most of my expectations are based on how spreadsheets work, and their sorting differs from how this tool (or SQL) works.

I think the sorting of DataTables work in a similar way to SQL's ORDER BY. First column is the most significant, and the rest is sorted in place.

However, in spreadsheets, column headers sort the whole table, thus, the sorting/clicking needs to be done in the opposite order, from least significant to most significant, and (usually) only the last sort is signified by icon change. Because the whole table is sorted on each sort/click, sorts do not affect each other directly.

In short, I suppose I'm looking for something different than what DataTables (currently) provides :)

[AllanJard]

Loading data unordered and initially displaying it as such is not a problem. Then a click on the header will set that sort.

The click on the second column is the issue. It needs the shift key to be pressed to make it a multi-column sort. I was mulling this over, and I've come up with a hack to trick it into thinking the shift key was pressed:

$('thead th').on('click', function (e) {
  Object.defineProperty(e.originalEvent, 'shiftKey', {
    value: true
  });
});

https://live.datatables.net/gomokelo/3/edit

Now if you load the page, it is initially unordered and clicks on the header would keep adding to the sort levels.

I'm afraid I don't really like this UI though. There is no easy way to switch from column 1 sorting alone, to column 2 sorting alone. A click on column 2 would add it to the column 1 sort. However, if that is what is needed in your page, that is how it might be done :-)

[akinuri]

Hah, I appreciate the interest and the effort :) However, that's not really what I'm looking for.

The { orderSequence: ["asc", "desc"], targets: "_all" }, option is good as it lets me ignore the "sort clearing" and just toggle between "asc" and "desc", but the sort isn't permanent, that is, a second sort starts from 0 (the initial state of the table). That is because, I think, the table itself isn't used as the source of the data. It is just there to display it. In other words, the initial state of the table is saved and never changes. All sorts are applied to it and then displayed. That's where my expectation differs.

Currently, I'm working on creating charts (that depend on the table), so I'm not too invested in how will the table work. Thought maybe there's an easy fix that I'm overlooking. I might try to hack it or look for alternatives once I move on to it. For the time being, I'll just leave it as it is.