Get updated row index after sorting data table

[pmooredesigner]

As the name suggests, I’m having an issue getting an updated row index after sorting a table.

I’m using the data table to display a leaderboard, where I want to be able to sort by different columns, but maintain a column that is a static #1-10. I first tried using “props.row.__index”, which does work as I need it to initially, but not after sorting. I’m sure that’s intended; I’m just trying to find a solution for my use case. I also tried more hacky ways unrelated to the component, like calling a function in that cell that iterates a number variable and returns it, but that didn’t seem to work either.

Does anyone have a suggestion for how I can accomplish this?

Thank you for your time,
Paul

[pmooredesigner]

I got it to work using a function after all. The reason it wasn’t working before was because I was using a reactive variable, which created an infinite loop. I just used a global non-reactive variable, and it worked.

This can probably be done a better way or be improved. This is just the first thing I tried that works for me, but I figured I’d share, in case this helps anyone.

HTML:

<q-td key="position" :props="props">{{getRowIndex()}}</q-td>

JS:

window.rowIndex = 0;

getRowIndex: function() {
    window.rowIndex += 1;
    if (window.rowIndex === 10) {
        window.rowIndex = 0;
        return 10;
    }
    if (window.rowIndex === this.leaderboard.length) {
        window.rowIndex = 0;
        return this.leaderboard.length;
    }
    return window.rowIndex;
}