GWT JSInterop wrapping of popular grid library AG-Grid.
Getting Started
Gradle
Add AST Repo
allprojects { repositories { ... maven { url 'https://maven.ascend-tech.us/repo' } } }
Add Dependency:
compile 'us.ascendtech:agGrid:0.3.0' compile 'us.ascendtech:agGrid:0.3.0:sources'
Maven
Add AST Repo
<repositories> <repository> <id>AST Maven</id> <url>https://maven.ascend-tech.us/repo</url> </repository> </repositories>
Add Dependency
<dependency> <groupId>us.ascendtech</groupId> <artifactId>agGrid</artifactId> <version>0.3.0</version> </dependency> <dependency> <groupId>us.ascendtech</groupId> <artifactId>agGrid</artifactId> <version>0.3.0</version> <classifier>sources</classifier> </dependency>
Example in Java
Add dependency to gwt.xml
<inherits name="us.ascendtech.AGGrid"/>
Make sure to inject AGGrid javascript on your ModuleLoad.
SimplePanel tableDiv = new SimplePanel(); tableDiv.getElement().setClassName("ag-theme-balham"); tableDiv.getElement().getStyle().setOverflow(Style.Overflow.HIDDEN); GridOptions<T> gridOptions = new GridOptions<>(); gridOptions.setGridApi(new GridApi<>()); gridOptions.setAnimateRows(true); gridOptions.setRowHeight(35); JsArray<ColumnDefinition> columnDefs = new JsArray<>(); gridOptions.setColumnDefs(columnDefs); ColumnDefinition<T> columnOne = new ColumnDefinition<>(); columnOne.setHeaderName("Column One"); columnOne.setField("columnOne"); // the member variable name in T columnOne.setColId("columnOne"); columnOne.setSortable(true); columnOne.setResizable(true); columnDefs.push(columnOne); // column with custom cell renderer ColumnDefinition<T> columnTwo = new ColumnDefinition<>(); columnTwo.setHeaderName("Column One"); columnTwo.setField("columnOne"); // the member variable name in T columnTwo.setColId("columnOne"); columnTwo.setSortable(true); columnTwo.setResizable(true); columnTwo.setCellRenderer(params -> { HTMLButtonElement alertButton = (HTMLButtonElement) DomGlobal.document.createElement("button"); alertButton.addEventListener("click", event -> { DomGlobal.alert("button clicked!") }); return alertButton; }); columnDefs.push(columnTwo); new AGGrid<>(Js.cast(tableDiv.getElement()), gridOptions); JsArray<T> currentData = new JsArray<>(); // add data objects gridOptions.getGridApi().setRowData(currentData); gridOptions.getGridApi().sizeColumnsToFit();
Please refer to gwt-examples to see it used in a real project.