CODEWITHSUNDEEP
javascripttabulator
gionni
gionni

Reputation: 1303

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.

Upvotes: 1

Views: 1221

Answers (2)

nzn
nzn

Reputation: 1081

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.

Upvotes: 1

nrayburn-tech
nrayburn-tech

Reputation: 968

You want to add a cellClick option to the column, so that when you click the cell it is immediately updated. Here is a working example, https://jsfiddle.net/s60qL1hw/1/.

This sets the cell value to the opposite of the current value. It should be improved on to handle undefined values, null values, etc. how you would want to handle those. However, it should work for most cases.

    cellClick: function(ev, cell){
      cell.setValue(!cell.getValue());
    }

The cellClick is for the entire cell. So if you don't click the tick, but you click whitespace next to it, it is still triggered. You can use the event target to check if the tick was clicked or not.

Upvotes: 3

Related Questions