ColumnLock

Allows user to lock columns to the left or right using the new locked field on columns.

Column lock

//<code-header>
fiddle.title = 'Column lock';
CSSHelper.insertRule('.b-task-board-column-end { --b-task-board-column-background : var(--b-neutral-100); --b-task-board-column-header-background : var(--b-neutral-100); }', targetElement.getRootNode());
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnLock : true
    },

    columns : [
        { id : 'todo', text : 'Todo', width : 250 },
        { id : 'planning', text : 'Planning', width : 250 },
        { id : 'doing', text : 'Doing', width : 250 },
        { id : 'done', text : 'Done', width : 250, locked : 'end' } //Locking this column on end side
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Easter campaign', status : 'doing' },
            { id : 2, name : 'Follow up', status : 'done' },
            { id : 3, name : 'Adjust ads', status : 'doing' },
            { id : 4, name : 'Spring campaign', status : 'planning' },
            { id : 5, name : 'Survey', status : 'todo' }
        ]
    }
});

Note that this feature relies on native position: sticky, and thus requires columns to have visible overflow. This means that the feature cannot be combined with individually scrollable columns (you can still scroll the entire TaskBoard though)

This feature is disabled by default.