Show/Hide a Formatter on Cell - tabulator

Question

I have a column setup with a cell formatter and is working fine.
{ title: "MKT Score", field: "MKTScore", width: 110, hozAlign: "center", formatter: "star", formatterParams: { stars: 3 }, },
what I'm look at trying to do is, if a value of a different cell is false is to hide the Formatter on a cell so it would be blank.

Answer 1

For some situations, such as the "star" formatter, you could pass a function to the formatterParams property in order to manupilate the formatter. Here is an example where, if the bool column is false, show blank:
const dataSet1 = [
{ id: 1, name: 'Billy Bob', bool: false, gender: 'male', rating: 2, col: 'red' },
{ id: 2, name: 'Mary May', bool: true, gender: 'female', rating: 3, col: 'blue' },
{ id: 3, name: 'Christine Lobowski', bool: false, gender: 'female', rating: 0, col: 'green' },
{ id: 4, name: 'Brendon Philips', bool: true, gender: 'male', rating: 2, col: 'orange' },
{ id: 5, name: 'Margret Marmajuke', bool: false, gender: 'female', rating: 0, col: 'yellow' }
]
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Bool', field: 'bool' },
{ title: 'Gender', field: 'gender' },
{ title: 'Rating', field: 'rating', formatter: "star" , formatterParams: stars },
{ title: 'Favourite Color', field: 'col' }
]
})
function stars(row) {
return row.getData().bool ? { stars: 3 } : { stars: -1 }
}
<link href="https://unpkg.com/tabulator-tables#5.1.8/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.1.8/dist/js/tabulator.min.js"></script>
<div id="table"></div>