Vaadin Flow Grid with Row-Index

Question

How do I add a row-index column to a grid, that will not be sorted along user-sorting of rows?

The solution must not include changes to any polymer template, but should rather be done in java.

Apocalypse

Answer 1

Index starting at 0

grid.addColumn(TemplateRenderer.of("[[index]]"));

this works, because in the frontend part of the grid there already is an index property available for each row.

---

Index starting at 1

Edit: This is actually a much simpler way to achieve this than the way I proposed before. You can set a client side renderer for the Web Component with executeJS.
Yes it's still a bit "hacky", but it's still miles better than my own approach.

grid.addColumn(item -> "").setKey("rowIndex");

grid.addAttachListener(event -> {
    grid.getColumnByKey("rowIndex").getElement().executeJs(
            "this.renderer = function(root, column, rowData) {root.textContent = rowData.index + 1}"
    );
});

---

Related github and vaadin-forum threads:

https://vaadin.com/forum/thread/17471146/grid-start-row-count-from-1,
https://github.com/vaadin/vaadin-grid/issues/1386,
https://vaadin.com/forum/thread/18287678/vaadin-grid-exclude-specific-column-from-sorting,
https://github.com/vaadin/vaadin-grid-flow/issues/803

Apocalypse

This is exactly what I needed. Thanks for providing detailed answer. I wonder why there is not a official way to do this, despite the question has been raised many times. I will test it out and update the results. – Venture

The same issue is reported here: github.com/vaadin/vaadin-grid-flow/issues/803 – Clapboard

@Apocalypse Yes just now tested. Works like a charm now. Appreciate your time and efforts. – Venture

That's pretty cool hack. I didn't know that executing js using java on grid was possible this way. Thanks once again @Apocalypse ! You saved my day. – Venture

In case of grid is paginated. When I go to second page. The index starts from 1 again. Any way to continue the row index value in second page of paginated grid ? – Venture

@AmanVerma Not sure how your pagination is set up and how it interferes with the rowIndex. I am not experienced with paginated grids and can't help you here. – Apocalypse

No problem, thanks for the reply.. However I was using this paginated grid : vaadin.com/directory/component/grid-pagination/overview – Venture