Directory

← Back

ag-grid-flow

Flow wrapper for Ag-grid Js Component

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Update ag grid to version 29 and make the component compatible with Vaadin 23 and 24

Released
2023-04-05
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 24
Vaadin 14 in 1.2.1
Vaadin 14+ in 1.2.0
Browser
N/A

ag-grid-flow - Vaadin Add-on Directory

Flow wrapper for Ag-grid Js Component ag-grid-flow - Vaadin Add-on Directory
# Wrapper for [Ag-grid Js Component](https://www.ag-grid.com/) 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](https://www.ag-grid.com/license-pricing.php) ## 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](https://github.com/vaadin-component-factory/vcf-ag-grid-flow)
Online