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.1.1'
  compile 'us.ascendtech:agGrid:0.1.1: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.1.1</version>
  </dependency>
  <dependency>
    <groupId>us.ascendtech</groupId>
    <artifactId>agGrid</artifactId>
    <version>0.1.1</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.