Creating check box that is directly clickable in Tabulator

Question

I'm quite new to javascript and I'm using Tabulator to create dynamic and interactive tables. It works wonderfully, I just have a little formatting problem.

One of the columns in my data is boolean and I'm using the tickCross formatter.

I would like to format the column so that the tickbox doesn't disappear and i directly clickable, without clicking inside the cell, like the first column of this example.

I tried to look for the setting in the documentation and in the code, but I cant't find the what I'm looking for.

Thank in advance to everyone.

Answer 1

As of 29th March 2024 there is a new boolean-type formatter which has a flag to make it behave in this way - the toggle-switch:

The toggle formatter displays as a toggle switch that shows itself as either or or off depending on value.

{title: "Example", field: "example", formatter: "toggle", formatterParams: {
    size: 20,
    onValue: true,
    offValue: false,
    onTruthy: true,
    onColor: "green",
    offColor: "red",
    clickable: true,
}}

The flag clickable: true will ensure that clicking the cell will toggle the value. Source.