Skip to main content

Grid Pro

The @genesislcap/grid-pro package provides a collection of grid-related components and utilities for Genesis applications. It is installed by default in applications build with Genesis Create or via the genx CLI.

API documentation​

For more detailed information on API and configurations, refer to the API documentation.

Features​

  • Easy integration: Quick setup with modern JavaScript frameworks and libraries.
  • Customizable: support for custom headers, mapping values, text formatting, custom cell-renderers and more (more on grid options later).
  • Flexible: when it comes to working with data grid-pro makes it easy by supporting filtering, editing, sorting, pagination (depending on configuration).
  • Events and callbacks: There is a large number of events and callbacks provided by the grid, you can find details here.
  • Simple Data or Connected Data: There are two main use cases for our Grid Pro component
    • Simple Data: when you have your own data model and flow (JSON, external/custom REST APIs, etc) but still want to use a rich data grid component with all its features (filtering, sorting, custom cell renderers, etc).
    • Connected Data: when you have a Data Server or Request Server available and ready to use, and you don't want to worry about handling data transformations, updates, deletes and cell renderers in the grid.
  • State persistence: ability to save and restore grid state.
  • Row models: support for both client-side and server-side row models.

Usage - simple data​

Declaration​

<simple-grid-pro-example></simple-grid-pro-example>

Definition​

import { ColDef } from '@ag-grid-community/core';
import { GridPro } from '@genesislcap/grid-pro';
import { customElement, GenesisElement, html, observable, ref } from '@genesislcap/web-core';

@customElement({
  name: 'simple-grid-pro-example',
  template: html`
    <div style="display: flex; flex-direction: column; height: 200px;">
      <rapid-button @click="${x => x.loadGrid()}">Load Grid Pro</rapid-button>
      <rapid-grid-pro ${ref('grid')}></rapid-grid-pro>
    </div>
  `,
})
export class SimpleGridExample extends GenesisElement {
  @observable
  public grid: GridPro;

  private columnDefs: ColDef[] = [
    { headerName: 'Make', field: 'make', sortable: true, filter: true },
    { headerName: 'Model', field: 'model', sortable: true, filter: true },
    { headerName: 'Price', field: 'price', sortable: true, filter: true },
    { headerName: 'Year', field: 'year', sortable: true, filter: true },
    { headerName: 'Color', field: 'color', sortable: true, filter: true },
  ];

  private rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000, year: 2021, color: 'red' },
    { make: 'Ford', model: 'Mondeo', price: 32000, year: 2020, color: 'blue' },
    { make: 'Porsche', model: 'Boxster', price: 72000, year: 2022, color: 'green' },
    { make: 'Subaru', model: 'Impreza', price: 25000, year: 2019, color: 'yellow' },
    { make: 'Nissan', model: 'Sentra', price: 20000, year: 2018, color: 'black' },
    { make: 'Chevrolet', model: 'Camaro', price: 40000, year: 2020, color: 'white' },
    { make: 'BMW', model: 'M3', price: 60000, year: 2021, color: 'silver' },
    { make: 'Audi', model: 'A4', price: 45000, year: 2022, color: 'orange' },
    { make: 'Mercedes', model: 'C-Class', price: 50000, year: 2020, color: 'purple' },
    { make: 'Volkswagen', model: 'Golf', price: 30000, year: 2019, color: 'brown' },
    // ...
  ];

  public loadGrid() {
    this.grid.gridOptions = {
      defaultColDef: {
        resizable: true,
        filter: true,
      },
      columnDefs: this.columnDefs,
      rowData: this.rowData,
    };
  }
}

Supported row models​

We support all the AG’s Row Models. More on JavaScript Grid: Row Models | AG Grid (ag-grid.com).

In the table below you can find a complete feature list of all the possibilities of client/server-side row models (and others that can be manually enabled/integrated - but we don’t expose any components for those yet).

It’s important to note that any client app can implement the other Row Models to their own needs. Our Grid Pro component is not tied to the datasource. Datasources can be as specialized or customized as you want.

Infinite and Viewport row models are also supported, but not offered "out of the box". You will have to create your own component if you want to use these.

FeatureClient-SideServer-SideNotes
All Data in Client✓✗Free
Fetch Data as User Scrolls✗✓Free
Row Sorting(client)(client OR server) our component is server-onlyFree
Row Filtering(client)(client OR server) our component is server-onlyFree
Quick Filter✓✓Free
Floating Filters✓✓Free
Dynamic Row Height✓✓Free
Row Grouping(client)(server)Paid (Enterprise)
Row Pivoting(client)(server)Paid (Enterprise)
Lazy Loading Row Groups✗✓Paid (Enterprise)
Value Aggregation(client)(server)Paid (Enterprise)
Row Selection✓✓Free
Specify Selectable Rows✓✓Free
Header Checkbox Selection✓✓Free
Range Selection✓✓Free
Column Spanning✓✓Free
Column Pinning✓✓Free
Row Pinning✓✓Free
Pagination✓✓Free
Custom Filters✓✓Free
Cell Editors✓✓Free
Cell Renderers✓✓Free
Value Getter✓✓Free
Value Setter✓✓Free
Value Formatter✓✓Free
Value Parser✓✓Free
Full Width Rows✓✓Free
CSV Export✓(data on screen)Free
Excel Export✓(data on screen)Paid (Enterprise)
Clipboard Copy & Paste✓✓Free
Update via Transaction✓✓Free
Update via Async Transactions✓✓Free

Performance​

DOM virtualisation​

DOM Virtualisation is a powerful technique that enhances the performance of grid components by only rendering the rows and columns that are currently visible in the viewport. This approach significantly reduces the memory footprint and improves the rendering speed, enabling all of our “grid components” to handle larger datasets more efficiently.

  • How It Works: Instead of rendering all rows and columns, the grid dynamically generates the DOM elements for only the visible part of the dataset. As the user scrolls, rows and columns are created or destroyed on the fly, ensuring a smooth scrolling experience.
  • Benefits:
    • Reduced memory usage since only a subset of rows and columns are in the DOM at any given time.
    • Faster initial rendering and improved responsiveness, even with large datasets.
    • Enhanced user experience with seamless scrolling and interaction.

For more details, visit the AG Grid DOM Virtualisation documentation (also available in Tabulator Virtual DOM)

Pagination​

Pagination is another effective technique to improve performance in AG Grid by breaking down large datasets into smaller, manageable chunks or pages. This allows the grid to load and render only a subset of data at a time, significantly reducing the load on the client.

  • How It Works: Data is divided into pages, and only the data for the current page is loaded and rendered. Users can navigate through pages using pagination controls.
  • Benefits:
    • Minimizes the amount of data loaded into the client at any given time, enhancing performance.
    • Provides a structured way to navigate large datasets, improving usability.
    • Reduces the risk of browser crashes and memory overflow issues.

Combined approach​

By using both DOM Virtualisation and Pagination, our “grid components” can efficiently manage and display larger datasets on the client side. Here’s how these techniques work together:

  • Initial Load: Only the data for the first page is loaded, minimizing the initial load time.
  • Scrolling: As users scroll, DOM Virtualisation ensures only the visible rows and columns are rendered, maintaining performance.
  • Page Navigation: Users can navigate through pages to access the full dataset without overwhelming the client.

Legacy project set-up​

This package is installed by default in applications build with Genesis Create or via the genx CLI, but you can follow these steps to install it in your existing project.

Installation​

To enable this module in your application, follow the steps below.

  1. Add @genesislcap/grid-pro as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.
{
  "dependencies": {
    "@genesislcap/grid-pro": "latest"
  },
}

Set-up​

Make sure the required grid components are registered with your design system. Depending on how the app was created this might have been setup for you automatically (genx cli / create). The design system name might vary (you can create a custom one for your app), using rapid in this example.

import { provideDesignSystem, baseComponents } from '@genesislcap/rapid-design-system';
import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';

provideDesignSystem().register(baseComponents, rapidGridComponents);
tip

If you're unsure where to register the component, search for the provideDesignSystem method in your project.