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.

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