Get updated row index after sorting data table



  • 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



  • 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;
    }