how to make particular cell editable in tabulator

Issue

enter image description here

needed

initializeTabulatortableBng() {
  let classThis = this;
  let bngTableData = classThis.tableDataWorm;

  function decimalFormatter(cell) {
    var value = cell.getValue();
    if (value !== null && value !== undefined && !isNaN(value)) {
      return parseFloat(value).toFixed(2);
    }
    return value;
  }
  this.bngTabulatorHeaders = [{
      title: "Type",
      field: "name",
      headerHozAlign: "left",
      width: 600,
      headerSort: false,
      hozAlign: "left",
      editable: false
    },
    {
      title: "Value",
      headerHozAlign: "center",
      width: 900,
      columns: [{
          title: "Min",
          field: "minValue",
          editor: false,
          headerSort: false,
          width: 300,
          hozAlign: "right",
          formatter: decimalFormatter,
          headerHozAlign: "right",
          editorParams: {
            formatter: decimalFormatter
          },
        },
        {
          title: "Nom",
          field: "nomValue",
          editor: "input",
          headerSort: false,
          width: 300,
          hozAlign: "right",
          formatter: decimalFormatter,
          headerHozAlign: "right",
          editorParams: {
            formatter: decimalFormatter
          }
        },
        {
          title: "Max",
          field: "maxValue",
          editor: false,
          headerSort: false,
          width: 300,
          hozAlign: "right",
          formatter: decimalFormatter,
          headerHozAlign: "right",
          editorParams: {
            formatter: decimalFormatter
          }
        },
      ],
    },

  ];
  this.bngTabulatorTable = new Tabulator("#bngTabulatorTable", {
    maxHeight: "100%",
    maxwidth: "100%",
    data: bngTableData,
    layout: "fitColumns",
    headerSort: false,
    columns: this.bngTabulatorHeaders,
  })
}

here i want to enable edit for nom full column i have done that its working and i want make editable cell Efficiency [-] row means min column first cell i.e 0.91 here and Servo Stiffness (axial) row -min column 5th cell i,e 0.00 means Efficiency [-] & Servo Stiffness (axial) rows should be editable ``

Solution

If I am understanding it correctly, you want to make certain cells editable based on a Type value. If that's the case, you need to change the editor type of Min and Max to input and also add an editable callback to those columns to determine if they should be editable or not. See below commented lines:

// Function to check if the cell should be editable:
function editCheck(cell) {
  const data = cell.getRow().getData()
     
  return data.name === 'Efficiency [-]' || data.name === 'Servo Stiffness (axial)'
}

initializeTabulatortableBng() {
  this.bngTabulatorHeaders = [
    {
      title: 'Type',
      field: 'name',
      headerHozAlign: 'left',
      width: 600,
      headerSort: false,
      hozAlign: 'left',
      editable: false
    },
    {
      title: 'Value',
      headerHozAlign: 'center',
      width: 900,
      columns: [
        {
          title: 'Min',
          field: 'minValue',
          editor: 'input', // <<<<  Change editor to input
          editable: editCheck, // <<<< Add editable callback
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        },
        {
          title: 'Nom',
          field: 'nomValue',
          editor: 'input',
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        },
        {
          title: 'Max',
          field: 'maxValue',
          editor: 'input', // <<<<  Change editor to input
          editable: editCheck,  // <<<< Add editable callback
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        }
      ]
    }
  ]
}

Here is a basic example of how that works:

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]

function editCheck(cell) {
  const data = cell.getRow().getData()
  
  const isEditable = data.name === 'Mary May' || data.name === 'Billy Bob'
  
  if (!isEditable) {
    cell.setValue('')
    cell.getElement().style.backgroundColor = "#ccc"
  }
  
  return isEditable
}

const table = new Tabulator('#table', {
  data: data,
  columns: [
    { title: 'Name', field: 'name'},
    { title: 'Age', field: 'age', editor:'input', editable: editCheck  },
    { title: 'Gender', field: 'gender' },
    { title: 'Height', field: 'height' },
    { title: 'Color', field: 'col' }
  ]
})

<link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>

<div id="table"></div>

You can also read more about it here: https://tabulator.info/docs/5.5/edit#optional

Answered By - Timur