Search code examples
javascriptuitableviewuser-interfaceangular-materialtabulator

How to add a slide toggle button to every cell in tabulator column


I am trying to add to every cell in a column in tabulator table. I need to associate on click() function with this slide toggle button. How to do add angular toggle switch for every cell in a column in tabulator?

I want the table to have the slide toggle button as shown in the image.


Solution

  • I dont use angular, but I have my own slide toggles and just use the formatter "html". So I would presume you can get the code/object to insert as you desire

    https://jsfiddle.net/o5whLz4j/

    new Tabulator("#tabulator", {
        data:[ {
                "one": '<input id="oneone" type="checkbox" class="switch"><label id="oneonelabel" for="oneone">One</label>',
                "two": "1",
            },{
                "one": '<input id="onetwo" type="checkbox" class="switch"><label id="onetwolabel" for="onetwo">Two</label>',
                "two": "2",
            },{
                "one": '<input id="onethree" type="checkbox" class="switch"><label id="onethreelabel" for="onethree">Three</label>',
                "two": "3",
            },
        ],
        columns: [{
                title: "One",
                field: "one",
                formatter: "html",
            },
            {
                title: "Two",
                field: "two",
            },                  
        ],
    });