Adding custom cell on Row Formatter in Tabulator

Question

I'm currently playing around with Tabulator (specifically React-Tabulator) to make a proof of concept on my project.

One of my requirements is to have buttons in between the sections of my data trees

So on my project I have departments, and each department has employees (that's why I used Data Trees) and then I want to have 2 buttons (Add Employee, Add Position) which will be displayed at the last row for each department.

So my current plan is to have a key on the last column and using Row Formatter changing that into my desired button style then it will be captured by Click Cell event

...{name: Mike Smith, position: dev},
      { name: "Add Position" }

using the example as reference: http://tabulator.info/examples/5.1#row-formatter

  rowFormatter = (row) => {
var element = row.getElement();
var data = row.getData();
if (data.name == "Add Position") {
  var width = element.offsetWidth,
    rowTable, cellContents, rowTableTransfer;

  while (element.firstChild) element.removeChild(element.firstChild);

  rowTable = document.createElement("div")
  rowTable.id = "add_position"
  rowTable.style.width = (width - 18) + "px";
  rowTable.style.padding = "2vh";
  rowTable.className = "tabulator-cell";

  cellContents = "Add Position"
  rowTable.innerHTML = cellContents;

  rowTableTransfer = document.createElement("div")
  rowTableTransfer.style.width = (width - 18) + "px";
  rowTableTransfer.style.padding = "2vh";

  var rowTabletrTransfer = document.createElement("div");
  cellContents = "<a>Add Position</a>"
  rowTabletrTransfer.innerHTML = cellContents;

  rowTableTransfer.appendChild(rowTabletrTransfer);

  element.append(rowTable);
  element.append(rowTableTransfer);
}
};

This is pretty much barebones since my biggest issue is that after I did this I'm getting this error:

Uncaught TypeError: component.getComponent is not a function

I tried copying the format exactly from a cell but still getting that error.

What am I missing?

Answer 1

You shouldnt be using the row formatter to add a custom cell, you will likely break the column formatting if you attempt that.

You should add a blank column with a custom formatter to achieve this.

Have a look at the Button Column Formatter Documentation and the Formatters Example for more details

Answer 2

So my primary issue is that the CellClick event is no longer getting registered on my newly created elements. So the best work around I found is instead of deleting all the cell, I'm going to use the first 2 cell (children of Row) and add my modified element to it then I remove the rest of the children (so that I can stretch the width of the cell without stretching the whole table)

Here is my proof of concept code:

rowFormatter = (row) => {
var element = row.getElement();
var data = row.getData();

if (data.actions == "true") {
  var rowTable, cellContents, rowTabletrTransfer;


  for (let i = element.children.length - 1; i > 1; i--) {
    element.removeChild(element.children[i]);
  }

  var cellAddPosition = element.children[0];
  var cellTransferIn = element.children[1];

  rowTable = document.createElement("div")
  rowTable.id = "add_position"
  rowTable.className = "headcount-action headcount-actions-table"
  cellContents = "Add Position"
  rowTable.innerHTML = cellContents;

  rowTabletrTransfer = document.createElement("div");
  rowTabletrTransfer.id = "transfer_in"
  rowTabletrTransfer.className = "headcount-action headcount-actions-table"
  cellContents = "Transfer In"
  rowTabletrTransfer.innerHTML = cellContents;

  cellAddPosition.style.minWidth = "25vh";
  cellAddPosition.style.maxWidth = "25vh";
  cellTransferIn.style.minWidth = "25vh";
  cellTransferIn.style.maxWidth = "25vh";


  cellAddPosition.append(rowTable);
  cellTransferIn.append(rowTabletrTransfer);
}
};

I created actions column that is hidden to signal that row would be for Action Buttons.

The only sucky part is that I'm relying on the cell name as the key on which button is click. A bit convoluted but this is the best work around I got