Tabulator movable row - rowPositioning() not updating when moved to top of group (dropped on group header)

Question

First of all, thank you for the fantastic work put in to Tabulator to date - i have been using it on a side project with a view to use it in an actual project one of these days. I would say i am an intermediate Tabulator user / programmer and what i have identified is likely a bug, but very happy to be proved wrong.

Problem:

When moving rows by click and drag, the row positioning row.getPosition() returns incorrect values for rows when the row is moved to the beginning of the group (by dragging and dropping on group header). I have set up a JS fiddle linked below that demonstrates this behaviour. IN this example you can reproduce the error by dragging one of the 'Mary' rows to the top of the blue group. It appears that the table data is not updating with the change.

I have tried work arounds but cannot find one, this is important for my purposes as I am storing the row order in a database for page reload.

Expected Behaviour: When moving a row to the top of a group by dragging and dropping on the group header it results in correct row positioning row.getPosition().

Jsfiddle example here

Thank you in advance!

Answer 1

I believe i have answered my own question. I will report as a bug over on Github page. In short i have resolved with minor change to moveRowInArray function in Tabulator.js.

The second tweak technically changes expected behaviour as it adds row to front of group, although this works better in my view and makes compatible with first teak. Could be rewritten however to preserve push instead of shit i'm sure.

Line 4105

RowManager.prototype._moveRowInArray = function (rows, from, to, after) {

    var fromIndex, toIndex, start, end;

    if (from !== to) {

        fromIndex = rows.indexOf(from);

        if (fromIndex > -1) {

            rows.splice(fromIndex, 1);

            toIndex = rows.indexOf(to);

            //////////////////////////////////////// jarb99 edit below

            if (to.type == "group" && after) {

                // splice above first row of group

                toIndex = rows.indexOf(to.rows[0]);

                after = false

            }

            //////////////////////////////////////// jarb99 edit above

            if (toIndex > -1) {

                if (after) {

                    rows.splice(toIndex + 1, 0, from);
                } else {

                    rows.splice(toIndex, 0, from);
                }

            } else {

                rows.splice(fromIndex, 0, from);
            }
        }

        //restyle rows

        if (rows === this.getDisplayRows()) {

            start = fromIndex < toIndex ? fromIndex : toIndex;

            end = toIndex > fromIndex ? toIndex : fromIndex + 1;

            for (var _i4 = start; _i4 <= end; _i4++) {

                if (rows[_i4]) {

                    this.styleRow(rows[_i4], _i4);
                }
            }
        }
    }
};

Line 20082

    Group.prototype.insertRow = function (row, to, after) {
    var data = this.conformRowData({});

    row.updateData(data);

    var toIndex = this.rows.indexOf(to);

    if (toIndex > -1) {
        if (after) {
            this.rows.splice(toIndex + 1, 0, row);
        } else {
            this.rows.splice(toIndex, 0, row);
        }
    } else {
        if (after) {
            // this.rows.push(row); // jarb99
            this.rows.unshift(row); // jarb99
        } else {
            this.rows.unshift(row);
        }
    }

    row.modules.group = this;

    this.generateGroupHeaderContents();

    if (this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.options.columnCalcs != "table") {
        this.groupManager.table.modules.columnCalcs.recalcGroup(this);
    }

    this.groupManager.updateGroupRows(true);
};