How to combine custom formatters with predefined formatters in Tabulator JS?

Question

I'm using TabulatorJS and I have 2 columns containing numeric data. First, I used the built-in money formatter with formatterParams parameter, and for the second one, I wanted to apply exactly the same, with the same parameters, but also add, for example, the color of the cell. How to apply formatterParams in custom format? newTabulator("#data-table",{data:data,layout:&amp

P粉592085423 · Answer

One option is to use rowFormatter and apply the formatting to the specific columns you need. In your example, it's length columns. This way you can use the built-in money formatter at the column setting level for both columns, but apply other formatting at the row level. Here is an example:

const data = [
  { length: 0, newLength: 10000 },
  { length: 2000, newLength: 20000 },
  { length: 3000, newLength: 0 }
]

const table = new Tabulator("#data-table", {
  data: data,
  layout: "fitColumns",
  rowFormatter: zeroValueFormatter,
  columns: [{
      title: "Length",
      field: "length",
      formatter: "money",
      formatterParams: {
        thousand: " ",
        precision: false
      }
    },
    {
      title: "New length",
      field: "newLength",
      formatter: "money",
      formatterParams: {
        thousand: " ",
        precision: false
      }
    }
  ],
});

function zeroValueFormatter(row) {
  const rowData = row.getData()

  if (rowData['length'] === 0) {
    row.getCell('length').getElement().style.backgroundColor = "#add8e6";
  }

}