Tabulator: How to disable sorting and remove sort arrows?

[E3V3A]

I've been searching around here for a solution to do the following:

• Do an initial sort of table on one column. ok ✔️
• Disable table click sorting from rendered page. not ok ✖️
• Remove sort "arrows" from table header. not ok ✖️

Any suggestions?

[olifolkerd]

set the headerSort property to false in the column definition:

{title:"Name", field:"name", sorter:"string", headerSort:false}

Checkout the Sorting Documentation for more info.

Cheers

Oli :)

[E3V3A]

@olifolkerd
I did that, and it is not working, which is why I am asking and filing an issue. And I also tried both #372 and #682, to no effect. So if this is working for everyone else, I guess I must have a system issue. My table still sortable with (sort arrows) even though I have declared headerSort:false and made all columns sortable:false.

Here's my CSS:

/* Remove the sort arrows in table headers */
.tabulator .tabulator-header .tabulator-col[data-sortable=true] .tabulator-col-title {width: 100%;}
.tabulator-arrow {display: none;}

and here's the relevant part of my table stuff:

...
$("#mytable").tabulator({
    height:205,                         // Set height of table, this enables the Virtual DOM and improves render speed
    //layout:"fitColumns",              // Fit columns to width of table (optional)
    headerSort:false,                   // Disable header sorter
    resizableColumns:false,             // Disable column resize
    responsiveLayout:true,              // Enable responsive layouts
    placeholder:"No Data Available",    // Display message to user on empty table
    initialSort:[                       // Define the sort order:
        {column:"altitude",     dir:"asc"},     // 1'st
    ],
    columns:[
        {title:"Flight",        field:"flight",         sortable:false, responsive:0, align:"left"}, // , width:250},
        {title:"CallSig",       field:"callsign",       sortable:false, responsive:3},
...

This is really weird.

Is there a way to check my installation?

[olifolkerd]

@E3V3A

Thanks for posting the table constructor that is a big help.

You need to set the headerSort property in the column definition object for the column you want to not be sortable, not on the table as a whole. the sortable property you are currently using in your column definition was removed in version 3.0

$("#mytable").tabulator({
    height:205,                         // Set height of table, this enables the Virtual DOM and improves render speed
    //layout:"fitColumns",              // Fit columns to width of table (optional)
    resizableColumns:false,             // Disable column resize
    responsiveLayout:true,              // Enable responsive layouts
    placeholder:"No Data Available",    // Display message to user on empty table
    initialSort:[                       // Define the sort order:
        {column:"altitude",     dir:"asc"},     // 1'st
    ],
    columns:[
        {title:"Flight", field:"flight", headerSort:false, responsive:0, align:"left"}, // , width:250},
        {title:"CallSig", field:"callsign", headerSort:false, responsive:3},
...

I hope that helps.

Cheers

Oli :)

[E3V3A]

That did it! Thank you!