[SOLVED] Creating check box that is directly clickable in Tabulator

Creating check box that is directly clickable in Tabulator

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.

Solution

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.