Spotlight: AG Grid for Enterprise Data Grids

AG Grid is widely considered the best data grid for JavaScript applications. Used by companies like Apple, Facebook, and Microsoft, it offers unmatched features for enterprise data management. Oorian's AG Grid wrapper brings this power to Java developers.

Why AG Grid?

• Performance: Handles millions of rows with virtual scrolling
• Features: Sorting, filtering, grouping, pivoting, tree data
• Editing: Inline editing with validation
• Export: Excel, CSV, and clipboard support
• Enterprise-ready: Row grouping, aggregation, master-detail

Basic Grid Setup

AgGrid grid = new AgGrid();
grid.setHeight("500px");

// Define columns
grid.addColumn("id", "ID").setWidth(80);
grid.addColumn("name", "Customer Name").setFilter(true).setSortable(true);
grid.addColumn("email", "Email").setFilter(true);
grid.addColumn("status", "Status").setCellRenderer(new StatusRenderer());

// Load data
grid.setRowData(customerService.findAll());

body.addElement(grid);

Column Configuration

// Sortable and filterable
grid.addColumn("name", "Name")
    .setSortable(true)
    .setFilter(true)
    .setFilterType(FilterType.TEXT);

// Number formatting
grid.addColumn("revenue", "Revenue")
    .setValueFormatter("$#,##0.00")
    .setFilter(true)
    .setFilterType(FilterType.NUMBER);

// Date formatting
grid.addColumn("createdDate", "Created")
    .setValueFormatter("MM/dd/yyyy")
    .setSortable(true);

// Editable
grid.addColumn("notes", "Notes")
    .setEditable(true)
    .setCellEditor(CellEditor.TEXT);

Row Selection and Events

// Enable selection
grid.setRowSelection(RowSelection.MULTIPLE);
grid.setCheckboxSelection(true);

// Handle selection
grid.registerListener(this, RowSelectedEvent.class);

@Override
public void onEvent(RowSelectedEvent event)
{
    List<Customer> selected = grid.getSelectedRows();
    updateToolbar(selected.size());
}

// Handle double-click
grid.registerListener(this, RowDoubleClickEvent.class);

@Override
public void onEvent(RowDoubleClickEvent event)
{
    Customer customer = (Customer) event.getData();
    openCustomerDetail(customer);
}

Server-Side Operations

For large datasets, use server-side pagination:

grid.setRowModelType(RowModelType.SERVER_SIDE);
grid.setServerSideDatasource(new AgServerSideDatasource()
{
    @Override
    public void getRows(ServerSideRequest request, RowCallback callback)
    {
        int startRow = request.getStartRow();
        int endRow = request.getEndRow();
        List<SortModel> sortModel = request.getSortModel();
        FilterModel filterModel = request.getFilterModel();

        // Query database with pagination
        List<Customer> data = customerService.findPage(
            startRow, endRow - startRow, sortModel, filterModel
        );
        int totalCount = customerService.count(filterModel);

        callback.success(data, totalCount);
    }
});

Inline Editing

grid.addColumn("price", "Price")
    .setEditable(true)
    .setCellEditor(CellEditor.NUMERIC)
    .setValueParser(value -> Double.parseDouble(value));

grid.registerListener(this, CellEditEvent.class);

@Override
public void onEvent(CellEditEvent event)
{
    String field = event.getField();
    Object oldValue = event.getOldValue();
    Object newValue = event.getNewValue();
    Object rowData = event.getData();

    // Validate and save
    if (validateEdit(field, newValue))
    {
        saveChange(rowData, field, newValue);
    }
    else
    {
        event.cancel();  // Revert the edit
    }
}

Row Grouping and Aggregation

// Enable grouping
grid.setGroupable(true);
grid.addColumn("category", "Category").setRowGroup(true);
grid.addColumn("region", "Region").setRowGroup(true);

// Aggregation
grid.addColumn("revenue", "Revenue")
    .setAggFunc(AggFunc.SUM)
    .setValueFormatter("$#,##0.00");

Conclusion

AG Grid integration gives Oorian developers access to the most powerful data grid available. Whether you're displaying hundreds or millions of rows, AG Grid handles it with ease—all configured through type-safe Java code.