React component in a Tabulator custom formatter

Question

I am trying to insert a Link component inside a Tabulator table cell via a custom formatter.

Nothing is shown in the cell, as seen in the codesandbox.

Why can't the JSX be returned from a function? How can I achieve this?

const invoiceLinkFormatter = (cell, formatterParams) => {     // <------ Custom formatter definition
    let key = cell.getValue();
    let link = `/invoices/${key}`;
    return (<Link to={link}>{key}</Link>);
};

invoicesTable.current = new Tabulator(refInvoicesTable.current, {
    columns: [
        {
            title: "Invoices",
            field: "invoiceKey",
            formatter: invoiceLinkFormatter     // <------ Custom formatter use
        },
        { title: "Dates", field: "invoiceDate" }
    ]
});

This approach works, but it defeats the purpose as the link leaves the react app and reloads everything.

const columns = [
    {
        title: "Invoice", 
        field: "invoiceKey", 
        formatter: "link", 
        formatterParams: { url: cell => { return "/invoices/" + cell.getValue() } }
    },
    { title: "Date", field: "invoiceDate" },
];

score 1 · Answer 1 · answered Jan 02 '21 at 14:32

Forgive me if I'm misunderstanding, but I believe you can use a combination of ReactDOM.render() and the onRendered parameter of Tabulator's custom formatters to help here.

import ReactDOM from "react-dom";
...
const journalLinkFormatter = (cell, formatterParams, onRendered) => {
  onRendered(() => {
    let key = cell.getValue();
    let link = `/journals/${key}`;
    ReactDOM.render(
      <Link
        style={{ color: "blue", fontWeight: "bold", background: "red" }}
        to={link}
      >
        {key}
      </Link>,
      cell.getElement()
    );
  });
};

score 0 · Answer 2 · answered Apr 10 '20 at 14:34

This is because the layout framework you are using parses the DOM on page load, so any elements added to the page after this point wont be parsed correctly unless they are added through the frameworks functions.

There is probably a function you can call on your layout framework to re-parse the DOM after Tabulator has formatted the cell.

React component in a Tabulator custom formatter

2 Answers2

Linked