GWT JSInterop wrapping of popular grid library AG-Grid.
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'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>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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent