tabulator

Tabulator - How can I exclude a column from selectable ranges?


I want my users to be able to edit my table like a spreadsheet, using the Selectable Range module. However, I want to make the first column non selectable, since it contains predefined and uneditable labels.

I've tried listening to the rangeChanged event and manipulating the selected range. If I detect that the first column has been selected, I set the range to start at the second column instead. This solution works alright, but it's not ideal because there's still a flicker of the selection of the first column and it looks a little janky.

Thanks for your consideration.

Here's an image of what the spreadsheet looks like


Solution

  • There is no way to generally exclude columns from range selection (imagine if you could make a column in the middle of the table unselectable, how that would break things if you were dragging a new range).

    But the good news is if you are using Tabulator 6.0 or higher then you can use row headers to make the first column unselectable.

    This is essentially a column definition passed into the rowHeader table setup option, that will always be inserted at the front of the row:

    var table = new Tabulator("#example-table", {
        rowHeader:{formatter:"rownum", headerSort:false, hozAlign:"center", resizable:false, frozen:true},
    });
    

    For full info see the Row Header Docs, an example of it in action with range selection can be found on the Examples Page

    The Range Selection Docs also talk through how to choose to include or exclude the row header from range selection