Vaadin-grid: row numbering - it would be nice having also 1 based index

[poczenorbert]

Description

The following built-in template variables can be bound to inside the column templates:

• [[index]]: Number representing the row index ...

It is set at this point:
__getRowModel(row) { return { index: row.index,

I think from a business application's user perspective a 1-based rowindex (row numbering starting with 1 instead of 0) would be more relevant.
It would be nice having also 1 based index to be able to use as template variable named index_b1 or similar.

Expected outcome

The following built-in template variables can be bound to inside the column templates:

• [[index]]: Number representing the zero based row index ...
• [[index_b1]]: Number representing the one based row index ...

__getRowModel(row) { return { index: row.index, index_b1: row.index+1,

Actual outcome

row numbering starting with zero

Live Demo

https://vaadin.com/components/vaadin-grid/html-examples/grid-basic-demos

see <vaadin-grid-column width="60px" flex-grow="0"> <template class="header">#</template> <template>[[index]]</template>

Steps to reproduce

https://vaadin.com/components/vaadin-grid/html-examples/grid-basic-demos

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Safari
• [x] Edge
• [x] IE 11
• [x] iOS Safari
• [x] Android Chrome

[web-padawan]

Thanks for the issue and sorry for not answering earlier. This should be quite straightforward to achieve using computed bindings in Polymer template, as well as when using renderers.

I see your point but introducing another property for that purpose only seems redundant.

[KasparScherrer]

Thanks for the issue and sorry for not answering earlier. This should be quite straightforward to achieve using computed bindings in Polymer template, as well as when using renderers.

I see your point but introducing another property for that purpose only seems redundant.

Okay so how do you achieve this with renderers? I cannot see any way to do this without touching polymer, or using some very strange workaround.

it would be really great IMO to have another property for that purpose, to directly use in a TemplateRenderer.

[tomivirkki]

Note that this issue is related to the <vaadin-grid> web component.

For Java (Grid) users:

It's a bit hacky but you can set a client side renderer for the <vaadin-grid-column> Web Component with executeJS:

// Execute inside an attach listener
gridColumn.getElement()
  .executeJs("this.renderer = function(root, column, rowData) {root.textContent = rowData.index + 1}");

[KasparScherrer]

Thank you Tomi! You say this is a bit hacky, but it is in fact 10 times cleaner than the way i did it. Works perfectly.