Tabulator list editor not set value

I’m lost, where is the problem.

I have external source for editor “list”, but I have authorization in headers, so I can’t use built in functionality for external ajax requests.

My values model:

[
    { id: 1, name: 'USA' },
    { id: 2, name: 'Canada' },
]

Definition:

{ field: "country", title: "Country", editor:"list", editorParams: codeListEditor("country"), formatter: "codelist" },

EditorParams:

const codeListEditor = (name: string) => {
  return {
    values: getCodeListEditor(name),
    clearable: true,
    maxWidth: true,
    freetext: false,
    allowEmpty: true,
    listOnEmpty: true,
    filterDelay: 100,
    autocomplete: true,
    multiselect: true,
    filterFunc: (term) => getCodeListEditor(name, term),
    itemFormatter: (label, value, item) => {
      return item.name;
    }
  }
}

Everything works fine, but after select I have undefined value in model.

tabulator.on('cellEdited', () => {
    console.log(cell.getRow().getData()); // Here I have selected value undefined.
});

It’s a problem because it’s object? How can I say what I want set to the model? My codelist formatter do only return value.name, but in formatter is value undefined too.

Formatter:

Tabulator.extendModule("format", "formatters", {
  codelist: (cell) => {
    return cell.getValue()?.name;
  }
});

Issue:

  • When you select a value from the list editor, the codeListEditor function only returns the value object itself, not the name property.
  • Your cell.getValue() retrieves the entire object, but since the formatter only uses cell.getValue()?.name , it might be returning undefined if the object doesn’t have a name property directly on it.

Solutions:

1. Update the Model Directly:

  • Modify the cellEdited event handler to directly update the model with the selected value’s id

JavaScript

tabulator.on('cellEdited', (cell) => {
  const rowData = cell.getRow().getData();
  const selectedValue = cell.getValue(); // This will be the entire object
  rowData.country = selectedValue.id;  // Update the "country" property with the id
  console.log(cell.getRow().getData()); // Now you should see the updated object
});

Modify the codeListEditor Function:

  • Change the codeListEditor function to return the name directly instead of the entire object:

JavaScript

const codeListEditor = (name: string) => {
  return {
    values: getCodeListEditor(name),
    // ... other editor params
    itemFormatter: (label, value, item) => {
      return item.name; // Return the name directly here
    }
  }
}

Modify the codelist Formatter:

  • If you need to access other properties besides name in your formatter, consider modifying the codelist formatter to handle the entire object:
    JavaScript
Tabulator.extendModule("format", "formatters", {
  codelist: (cell) => {
    const value = cell.getValue();
    if (value) {
      return value.name; // Return the name property
    } else {
      return ""; // Handle cases where the value might be undefined
    }
  }
});

Choose the solution that best suits your requirements.

Additional Notes:

  • Make sure your getCodeListEditor function returns an array of objects with the structure you expect, including the id and name properties.
  • Consider implementing error handling in case the getValue returns unexpected data.

By updating the model directly or modifying the codeListEditor or codelist formatter, you should be able to capture the selected value’s id or name correctly and update your model accordingly.