steps for making a specific cell editable in tabulatorI'm happy to help

Question

steps for making a specific cell editable in tabulatorI'm happy to help

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

  function formatDecimal(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: formatDecimal,
          headerHozAlign: "right",
          editorParams: {
            formatter: formatDecimal
          },
        },
        {
          title: "Nom",
          field: "nomValue",
          editor: "input",
          headerSort: false,
          width: 300,
          hozAlign: "right",
          formatter: formatDecimal,
          headerHozAlign: "right",
          editorParams: {
            formatter: formatDecimal
          }
        },
        {
          title: "Max",
          field: "maxValue",
          editor: false,
          headerSort: false,
          width: 300,
          hozAlign: "right",
          formatter: formatDecimal,
          headerHozAlign: "right",
          editorParams: {
            formatter: formatDecimal
          }
        },
      ],
    },

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

I have successfully enabled edit for the entire Nom column, now I also want to make editable cells in the Efficiency [-] row, specifically the first cell in the Min column (0.91) and the 5th cell in the Min column of Servo Stiffness (axial) row (0.00), meaning that Efficiency [-] and Servo Stiffness (axial) rows should be editable.

javascript angular tabulator

Answer 1

Answer №1

If my interpretation is correct, you are looking to enable editable cells based on a specific Type value. To achieve this, you will need to switch the editor type of Min and Max to input and incorporate an editable callback for those columns to determine their editability. Refer to the commented lines below:

// Function to verify if the cell can be edited:
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 demonstrating how this concept 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dda9bcbfa8b1bca9b2aff0a9bcbfb1b8ae9de8f3e8f3ef">[email protected]</a>/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691d080b1c05081d061b444d53574304051b04420247">[email protected]</a>/dist/js/tabulator.min.js"></script>

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

For more information, refer to:

Answer 2

If my interpretation is correct, you are looking to enable editable cells based on a specific Type value. To achieve this, you will need to switch the editor type of Min and Max to input and incorporate an editable callback for those columns to determine their editability. Refer to the commented lines below:

// Function to verify if the cell can be edited:
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 demonstrating how this concept 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dda9bcbfa8b1bca9b2aff0a9bcbfb1b8ae9de8f3e8f3ef">[email protected]</a>/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691d080b1c05081d061b444d53574304051b04420247">[email protected]</a>/dist/js/tabulator.min.js"></script>

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

For more information, refer to:

steps for making a specific cell editable in tabulatorI'm happy to help

Answer №1

Similar questions

Can Chrome Support Bookmarklets?

JQuery's addClass function is not functioning properly

There was an error in Index.js: The UserForm component did not return anything from the render function. This typically occurs when a return statement is missing. To render nothing, you can return

Adding elements to a JSON array in Javascript

What is the term used for the objects that res.render passes?

What is the best way to retrieve the elements within a third-party selector?

How can multiple arguments be passed to a function using JQuery's post method?

Having difficulties achieving successful API requests in Next.js and Snipcart

Generate a graph showcasing the frequency of character occurrences within a specific column of a .csv file

Identifying the method of navigation using PerformanceNavigationTiming

Requesting a resource using the HTTP GET method returned no data

Failure to set X-XSRF-TOKEN header in Angular5

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

Handling a jQuery Ajax success callback when it fails

Automatic Refresh and Search Functionality on PHP Page

Encountering an Issue Executing Selenium Test on jQuery v2.0.2 and Play Framework

Tips for verifying a login modal on an asp.net webforms using jQuery?

Successive vows

Avoiding the occurrence of moiré patterns when using pixi.js

Obtain a hidden item using *ngIf in Angular for testing purposes