javascripttabulator

tabulator - how to insert tickCross using javascript

My Tabulator table uses tickCross in one column - I am interested in having javascript turn on the tick mark - actively - using javascript to tick it, without manually pressing the box. I was able to insert it using javascript, however when I save the file to a cvs, it is not included in the file when I reload. Right now I must manually click the checkmark "on" for it to save in the file. Is it possible to activate the tickCross checkmark using javascript (as though I clicked it) and still have it save with the file?

Solution

  • You can use this for multiple

    table.updateData([
    { id: "row1" , "example": true }  
]);

    or this for one

    table.updateCell("row1", "example", true);

    Here is a running example.

    const table = new Tabulator("#example-table", {
  height: "311px",
  layout: "fitColumns",
  columns: [
    { title: "ID", field: "id", width: 150 },
    { title: "Example", field: "example", formatter: "tickCross", formatterParams: { allowTruthy: true } 
    }
  ],
  data: [
    { id: "row1", example: false },
    { id: "row2", example: false }
  ]
});


document.getElementById("update-button").addEventListener("click", function() {
  table.updateData([{
    id: 'row1',  // update by id 
    example: true
  }]);
});
    <script src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>

<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">

<h1>Tabulator TickCross Example</h1>
<div id="example-table"></div>
<button id="update-button">Update First Row</button>