ag-grid-flow

Flow wrapper for Ag-grid Js Component

View larger

Close

View larger

Close

View larger

Close

Wrapper for Ag-grid Js Component

This add-on wraps the JavaScript component Ag-Grid.

This component reproduces some JAVA API of the Vaadin Grid component to displays tabular data.

It can help if you encounter problems of performance with vaadin-grid if:

• Internet Explorer 11 is a requirement
• You have a lot of columns

This add-on does not bring all the features of ag-grid.

Here is a list of features included:

• Use lazy data source with the DataProvider
• Cell renderers: The cell renderer need to be done in Javascript.
  • It can be done with Polymer, Lit or pure html. It's highly discouraged to use webcomponents inside cell renderer if you want good performance in IE11.
• Cell Click listener
• Sorting is possible
• Column Grouping
• Frozen column on the left and right
• Dynamic Cell Css class

Here is a list of not implemented features:

• Edit cell
• Column reordering
• Filtering
• Row classes
• Selection
• Pivot

Warning: Version 1.2.0+ requires Vaadin 14.2+ to work.

Licence

The community version of Ag grid is used in this add-on. You can read the details for the licensing here

Development instructions

Starting the demo server:

Go to ag-grid-flow-demo and run:

mvn jetty:run

This deploys demo at http://localhost:8080

Test in Internet Explorer 11 / EdgeHTML:

Go to ag-grid-flow-demo and run:

mvn jetty:run -Dvaadin.devmode.transpile=true 

Examples

See the demo and the code on github

Sample code

public class SimpleView extends Div {


    public SimpleView() {
        setSizeFull();
        AgGrid<Person> grid = buildGrid();
        grid.refreshColumnDefs();
        grid.setDataProvider(DataProvider.ofCollection(PersonUtil.buildPersons()));
        add(grid);
    }

    private AgGrid<Person> buildGrid() {
        AgGrid<Person> grid = new AgGrid<>();
        grid.setSizeFull();
        grid.addColumn("id",Person::getId)
                .setFrozen(true)
                .setHeader("Id")
                .setSortable(true);
        grid.addColumn("firstname",Person::getFirstName)
                .setHeader("FirstName")
                .setSortable(true);
        grid.addColumn("lastname",Person::getLastName)
                .setHeader("LastName")
                .setSortable(true);
        return grid;
    }
}

@JsModule("./src/textfield-lit-renderer.js")
@JsModule("./src/button-lit-renderer.js")
@JsModule("./src/icon-lit-renderer.js")
@Uses(Button.class)
@Uses(Icon.class)
@Uses(TextField.class)
@Route(value = "lit-component-renderer", layout = MainLayout.class)
public class LitComponentRendererView extends Div {

    public LitComponentRendererView() {
        setSizeFull();
        AgGrid<Person> grid = buildAdvancedGrid();
        grid.refreshColumnDefs();
        grid.setDataProvider(DataProvider.ofCollection(PersonUtil.buildPersons()));
        add(grid);
    }

    private AgGrid<Person> buildAdvancedGrid() {
        AgGrid<Person> grid = new AgGrid<>();
        grid.setSizeFull();
        grid.addColumn("id",Person::getId)
                .setHeader("Id")
                .setFlex(1)
                .setSortable(true);
        grid.addColumn("firstname",Person::getFirstName)
                .setHeader("FirstName")
                .setFlex(1)
                .setCellRendererFramework("button-lit-renderer")
                .setSortable(true);
        grid.addColumn("lastname",Person::getLastName)
                .setHeader("LastName")
                .setFlex(1)
                .setCellRendererFramework("textfield-lit-renderer")
                .setSortable(true);
        grid.addColumn("age",person ->
            ((person.getId() % 2 == 0)? VaadinIcon.COMPRESS_SQUARE:VaadinIcon.COMPRESS)
                    .name().toLowerCase(Locale.ENGLISH).replace('_', '-')
        )
                .setHeader("Age")
                .setFlex(1)
                .setCellRendererFramework("icon-lit-renderer")
                .setSortable(true);
        return grid;
    }

}

import { LitElement, html as html } from 'lit-element';

class CurrencyLitRenderer extends LitElement {
    static get properties() {
        return {
            currency: { type: String },
            value: { type: Number }
        };
    }

    constructor() {
        super();
    }

    agInit(params) {
        //console.log("params {}", params);
        this.params = params;
        if (typeof params.value  === 'undefined') {
        } else {
            this.currency = this.params.value.currency;
            this.value = this.params.value.price;
        }
    }

    get formattedValue() {
        return this.value ? this.value.toFixed(2) : this.value;
    }

    clickOnCurrency(e) {
        this.params.colDef.cellRendererFrameworkCallback.call(this, this.params.colDef.field,
            this.params.rowIndex, "currencyClicked");
    }
    render() {
        return html`<span><span class="renderer-currency" @click="${this.clickOnCurrency}">${this.currency}</span> <span class="renderer-value">${this.formattedValue}</span></span>`;
    }
}

customElements.define('currency-lit-renderer', CurrencyLitRenderer);

import {html, PolymerElement} from "@polymer/polymer/polymer-element.js";

class CurrencyPolymerRenderer extends PolymerElement {
    static get template() {
        return html`<span><span class="renderer-currency" on-click="clickOnCurrency">{{currency}}</span> <span class="renderer-value">{{formattedValue}}</span></span>
        `;
    }

    agInit(params) {
        //console.log("params {}", params);
        this.params = params;
        if (typeof params.value  === 'undefined') {

        } else {
            this.currency = this.params.value.currency;
            this.value = this.params.value.price;
        }
    }

    clickOnCurrency(e) {
        this.params.colDef.cellRendererFrameworkCallback.call(this, this.params.colDef.field,
            this.params.rowIndex, "currencyClicked");
    }

    static get properties() {
        return {
            currency: String,
            value: Number,
            formattedValue: {
                type: Number,
                computed: 'format(value)'
            }
        };
    }

    format(value) {
        return value ? value.toFixed(2) : value;
    }
}

customElements.define('currency-polymer-renderer', CurrencyPolymerRenderer);

if (typeof window.Vaadin.Flow.agGridRenderers === 'undefined') {

    window.Vaadin.Flow.agGridRenderers = [];
}

let CurrencyHtmlRenderer  = function CurrencyHtmlRenderer () {}
// function to act as a class
window.Vaadin.Flow.agGridRenderers["currency-html-renderer"] = CurrencyHtmlRenderer;

// gets called once before the renderer is used
CurrencyHtmlRenderer.prototype.init = function(params) {
    //console.log("params {}", params);
    // create the cell
    this.eGui = document.createElement('span');
    this.eGui.innerHTML = '<span class="renderer-currency"></span> <span class="renderer-value"></span>';

    // get references to the elements we want
    this.eCurrency = this.eGui.querySelector('.renderer-currency');
    this.eValue = this.eGui.querySelector('.renderer-value');

    // set value into cell
    if (typeof params.value  === 'undefined') {
    } else {
        const value = params.value.price;
        this.eValue.innerHTML = value ? value.toFixed(2) : value;
        this.eCurrency.innerHTML = params.value.currency;
    }

    // add event listener to button
    this.eventListener = function() {
        params.colDef.cellRendererFrameworkCallback.call(this, params.colDef.field,
            params.rowIndex, "currencyClicked");
    };
    this.eCurrency.addEventListener('click', this.eventListener);
};

// gets called once (assuming destroy hasn't been called first) when grid ready to insert the element
CurrencyHtmlRenderer.prototype.getGui = function() {
    return this.eGui;
};

// gets called whenever the user gets the cell to refresh
CurrencyHtmlRenderer.prototype.refresh = function(params) {
    // set value into cell again
    this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;
    // return true to tell the grid we refreshed successfully
    return true;
};

// gets called when the cell is removed from the grid
CurrencyHtmlRenderer.prototype.destroy = function() {
    // do cleanup, remove event listener from button
    if (this.eCurrency) {
        // check that the button element exists as destroy() can be called before getGui()
        this.eCurrency.removeEventListener('click', this.eventListener);
    }
};

Links

• Online Demo
• Issue tracker
• View on GitHub
• Edit

Compatibility