Quasar: Adding row number column for QTable

[ryhn]

Hi,
How can I add row-number column to QTable.
No matter which column sorted, row-number column value must be 1 to data.length

Thanks.

[smolinari]

Hi,

In general, we'd rather have only bugs and suggestions as issues in the repos. So, please use either the forum or the discord channel for questions. You'll get answers there for sure. Please just have some patience.

And, if we come to the conclusion, your issue is a bug or a good suggestion, we'll ask you to then add an issue here.

Thanks. 😄

Scott

[ryhn]

Hi,
There is no bug. But i think row-number column can be "feature request" that's why i wrote here.

i will take my chance on the quasar forum :smile:

Thanks.

[smolinari]

I've changed my panned text for the future. See above. 😄

Scott

[pdanpdan]

I'd like to think about this for some time - reopening for checking in the code.

[rfox12]

@ryhn I think @pdanpdan has 3-4 full time jobs worth of work. ;)

This is my hack that perhaps does what you're looking for?
https://codepen.io/robert123789/pen/LYpZyaO

It uses CSS Counters, which I haven't tested much on different browsers/platforms. (I'm Chrome most of the time). Maybe this is a temp solution for you? Just trying to give back to the community.

In case the pen disappears here is the relevant code... for the <template>:

    <q-table
      :table-style="'counter-reset: cssRowCounter ' + ((pagination.page - 1) * pagination.rowsPerPage) + ';'"
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      :pagination.sync="pagination"
    ><template v-slot:body-cell-row-number="props">
        <q-td><span class="rowNumber"/>
         </q-td>
      </template>
    </q-table>

And then all you need is an entry in the <style> area:

.rowNumber::before {
  counter-increment: cssRowCounter;
  content: counter(cssRowCounter) ". ";
}

And that's it!

[ryhn]

Hi,

@rfox12 this is a good solution. I will try this. Thanks.

[rstoenescu]

There's gonna be "rowIndex" and "pageIndex" in the sorted and filtered table available in "quasar" v1.10.0.

[hmeine]

I would have liked to make use of this to access the previous row in the data array, but apparently one does not have access to the sorted & filtered table data itself, right?

[rstoenescu]

There's a computed prop on the QTable instance named filteredSortedRows -- you can use that @hmeine