CODEWITHSUNDEEP
tabulator
Rradhak
Rradhak

Reputation: 446

Tabulator Add rows to group by table below each group that was clicked

I have a requirement to add a button next to group header that inserts/adds new row after last row in the group. enter image description here

I have this

groupBy:function(data){
        //data - the data object for the row being grouped

        return rowNum;
    },
         groupHeader: groupHeaderFormatter,

Defined groupHeaderFormatter as

function groupHeaderFormatter(value, count, data, group) {
    return value+ `&nbsp;&nbsp; ${count} items &nbsp;&nbsp; <input id="Tab_CREATE" type="button" value="New" onclick="groupHeaderButtonClicked()"/>`
}

However the addRow always insert at the end or beginning of the whole table. Please advice.

Upvotes: 0

Views: 24

Answers (1)

Md.Sukel Ali
Md.Sukel Ali

Reputation: 3065

Yes, it works like this. addRow always add new row in top/bottom of the table. I use moveRow in the addRow promise to add new row in my desired place.

table.on("rowClick", function(e, row) {
    const rowData = row.getData();
    if (rowData.isSpecialRow) {
        let specialRowPosition = row.getPosition(); // Get the position of the special row
        table.addRow(
            {
                ItemDescription: "",
                Quantity: 0,
                unit: "",
                UnitPrice: 0,
                amount: 0,
            },
            true,
            specialRowPosition - 1
        ).then(function(addedRow) {
            console.log('Special row: ' + specialRowPosition + ', New row: ' + addedRow.getPosition()); // Special row index 1,2,3,4,5. New row: always 1
            table.moveRow(addedRow, row, true);
        });
    }
});

Upvotes: 0

Related Questions