Rownum formatter not working properly when using groups

Question

When using rownum built in formatter for my tabulator table, the numbering is not proper. Example shown in the below table.

Table initialization

var columns = [
                        { title: "sno", formatter: "rownum", width:30},
...
]
new Tabulator("#daily-report-table", {
                        data: data, 
                        layout: "fitColumns", 
                        resizableRows: true,
                        groupBy: "department",
                        columns: columns,
                        headerHozAlign: "center",
                        pagination:"local",
                        paginationSize:15,
                        paginationSizeSelector:true,
                        paginationSizeSelector:[15, 50, 100, 200, 500],
                        printHeader: $('#daily-report-heading-div').html(),
                        groupHeader:function(value, count, data, group){
                            return value + "<span style='color:#d00; margin-left:10px;'>" +  departmentWiseHeading  + ":  "  + count + "</span>";
                        }
                    });