Disable columns under certain condition

user_8558487 0
Viewed 269

I need to disable/enable to input some columns under certain conditions, can I do it with tabulator? Columns available or locked to input when I open page with table with some state (boolean or etc). Thank you.

example:

//define some sample data
var tabledata = [
    {
        id: 1,
        name: "Oli Bob",
        age: "12",
        col: "red",
        dob: ""
    },
    {
        id: 2,
        name: "Mary May",
        age: "1",
        col: "blue",
        dob: "14/05/1982"
    },
    {
        id: 3,
        name: "Christine Lobowski",
        age: "42",
        col: "green",
        dob: "22/05/1982"
    },
    {
        id: 4,
        name: "Brendon Philips",
        age: "125",
        col: "orange",
        dob: "01/08/1980"
    },
    {
        id: 5,
        name: "Margret Marmajuke",
        age: "16",
        col: "yellow",
        dob: "31/01/1999"
    },
];

var table_3 = new Tabulator("#table_3", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [
        {
            title: "Name",
            field: "name",
            width: 150,
            editor: "input"
        },
        {
            title: "Age",
            field: "age",
            align: "left",
            formatter: "progress",
            editor: "input"
        },
        {
            title: "Favourite Color",
            field: "col",
            editor: "input"
        },
        {
            title: "Date Of Birth",
            field: "dob",
            sorter: "date",
            align: "center",
        },
    ],
});

How can I disable editor: "input" under certain conditions?

tabulator javascript
1 Answers

You can pass a callback to the editable option in the column definition, it will pass in the Cell Component for the cell being edited.

You can then return true to allow the edit, or false to reject it:

///define editor
var editCheck = function(cell){
    //cell - the cell component for the editable cell

    //get row data
    var data = cell.getRow().getData();

    return data.age > 18; // only allow the name cell to be edited if the age is over 18
}

//in your column definition for the column
{title:"Name", field:"name", editor:"input", editable:editCheck}

Full details can be found in the Edit Documentation

user_35889930
Related