Tabulator Sorting on multiple column sort with numbers via button

Question

I'm facing a weird issue while implementing a sorting button for my tabulator table:

Tabulator table:

var kalkulationTable = new Tabulator("#KalkulationTable", {
        height: 600,
        ajaxURL: "{% url 'getAngebotskalkulation' pk=object.id%}",
        ajaxConfig: "GET",
        ajaxResponse: function (url, params, response) {
            // Extract only the kalkulation object:
            var kalkulation = response.kalkulation;
            // Return the extracted object for Tabulator
            return kalkulation;
        },
        movableRows: true,
        movableRowsReceiver: "add",
        initialSort: [
            { column: 'titel', dir: 'asc' },
            { column: 'position', dir: 'asc' },
            { column: 'unterposition', dir: 'asc' },
        ],
        placeholder: "Noch keine Kalkulation vorhanden.",
        layout: "fitColumns",
        columns: [
            { title: "T", field: "titel", sorter: "number", frozen: true, maxWidth: 70, editor: "input", },
            { title: "P", field: "position", sorter: "number", frozen: true, maxWidth: 60, editor: "input", },
            { title: "U", field: "unterposition", sorter: "number", frozen: true, maxWidth: 60, editor: "input", },
            { title: "Titeltext", field: "titeltext", sorter: "string", resizable: true, editor: "input", },
            // more columns, which should not matter ...
        ]
    });

Function to sort:

    document.getElementById("sortieren").addEventListener("click", function () {
        kalkulationTable.setSort([
            { column : "titel", dir : "asc" },
            { column : "position", dir : "asc" },
            { column : "unterposition", dir : "asc" },
        ]);
    });

The user wants to use a button to sort the table by titel, position and unterposition like in a 3 level numeric heading system, e.g.

titel	position	unterposition	text
00	00	00	text 1
01	01	01	text 2
01	02	01	text 3
01	02	02	text 3
02	01	01	text 5
02	02	01	text 6

The sorting currently works neither on the initial sort, nor on the button click. Hence i believe the sorting list is wrong. I've checked with the documentation and tried several variants, but i can't find a solution that is working.

However the sorting works by shift+clicking on the sorter in the header, in reverse order (unterposition, position, titel), so i guess the table itself is not the problem.

Can someone please explain to me what is wrong with the sorting list?

Answer 1

As pointed out by helpful @timur in direct comments, my problem is a misconception with the way Tabulator sorts data by default. It does not just continue sorting by every column specified retaining the sort order from the first column, but overrides this with the sorting from the following columns.

To solve the problem, just set option sortOrderReverse: true in the definition of the table, e.g:

var kalkulationTable = new Tabulator("#KalkulationTable", {
        // previous config,
        
        sortOrderReverse: true,
        
        initialSort: [
            { column: 'titel', dir: 'asc' },
            { column: 'position', dir: 'asc' },
            { column: 'unterposition', dir: 'asc' },
        ],
        columns: 
            // column definitions
        ]
    });