Search code examples
vaadinvaadin-flowvaadin-gridvaadin14

Vaadin Flow Grid with Row-Index

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.

Solution

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

    enter image description here

    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