Search code examples
javascripttabulator

Add Percent Sign to Tabulator Cells

How can I concatenate a percent sign onto the the otperc (etc) field? I thought about adding it in the database call but I don't want to convert it to a string and not be able to sort it.

function addTable(data) {
    var table = new Tabulator("#table", {
        height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data: data.rows, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            {title:"Work Type", field:"WorkType"},
            {title:"Total", field:"total"},
            {title:"On Time", field:"otperc"}
        ],
   });
}

Here's a sample of the data

data = [
{WorkType: 'ALTERNATIVE REPAIR', total: '47', otperc: 38},
{WorkType: 'BORING', total: '16182', otperc: 44}
]

I'd like the On Time numbers to indicate percentage:

enter image description here

Solution

  • According to this docs, you can write a custom formatter to alter how the data is displayed, without altering the underlying data. Example:

    function addTable(data) {
    var table = new Tabulator("#table", {
        height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data: data.rows, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            { title: "Work Type", field: "WorkType" },
            { title: "Total", field: "total" },
            { title: "On Time", field: "otperc", formatter: cell => cell.getValue() + "%" }
        ],
   });
}