Plugin System

Interface: PluginBaseComponentTypeAlias: PluginProviders

RevoGrid offers a powerful and flexible plugin system that allows you to extend its functionality. By creating custom plugins, you can add new features, modify existing behavior, and integrate RevoGrid with other libraries or frameworks.

Creating a Plugin

All plugins in RevoGrid extend from the BasePlugin class, which provides a minimal starting core and utility methods for working with the RevoGrid component.

BasePlugin Class

The BasePlugin class serves as a foundational layer for creating plugins. Here's an overview of its interface and capabilities:

/**
 * Base layer for plugins
 * Provide minimal starting core for plugins to work
 * Extend this class to create plugin
 */
export class BasePlugin implements PluginBaseComponent {
  readonly subscriptions: Record<string, (...args: any[]) => void> = {};

  constructor(public revogrid: HTMLRevoGridElement, public providers: PluginProviders) {}

  /**
   * Subscribe to an event in the RevoGrid component.
   * @param eventName - event name to subscribe to in RevoGrid component (e.g. 'beforeheaderclick')
   * @param callback - callback function for the event
   */
  addEventListener(eventName: string, callback: (e: CustomEvent) => void): void;

  /**
   * Subscribe to a property change in the RevoGrid component.
   * You can return false in the callback to prevent the default value set.
   * @param prop - property name
   * @param callback - callback function
   * @param immediate - trigger callback immediately with current value
   */
  watch<T extends any>(
    prop: string,
    callback: (arg: T) => boolean | void,
    config?: Partial<WatchConfig>
  ): void;

  /**
   * Remove an event listener.
   * @param eventName - event name
   */
  removeEventListener(eventName: string): void;

  /**
   * Emit an event from the RevoGrid component.
   * The event can be cancelled by calling event.preventDefault() in the callback.
   * @param eventName - event name
   * @param detail - event detail
   */
  emit(eventName: string, detail?: any): CustomEvent;

  /**
   * Clear all subscriptions.
   */
  clearSubscriptions(): void;

  /**
   * Destroy the plugin and clear all subscriptions.
   */
  destroy(): void;
}

Plugin Lifecycle

1. Initialization: When a plugin is created, it initializes with references to the RevoGrid component and its providers.
2. Event Subscription: Plugins can subscribe to RevoGrid events using addEventListener.
3. Property Watchers: Plugins can watch for property changes using watch.
4. Event Emission: Plugins can emit custom events using emit.
5. Cleanup: Plugins should clean up their subscriptions using clearSubscriptions and destroy methods.

Dispatching Events

In RevoGrid, custom events are dispatched to elements using the dispatch and dispatchByEvent functions. These functions are essential for creating responsive and interactive plugins in RevoGrid, ensuring that events propagate correctly to the top level of the application.

Read more here

Example Plugin

Here's an example of a simple plugin that logs when a cell is focused:

class CellLogger extends BasePlugin {
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
    super(revogrid, providers);
    this.addEventListener('beforecellfocus', this.handleCellFocus);
  }

  private handleCellFocus = (e: CustomEvent) => {
    console.log('Cell focused:', e.detail);
  };
}

// Usage
const gridElement = document.querySelector('revo-grid');
gridElement.plugins.push(CellClickLogger);

Plugin Providers

For more advanced plugins, you might need to interact with these providers directly. The PluginProviders type includes several providers that give access to different parts of RevoGrid's internal state:

• Data Manipulation: Use the data provider to manipulate the data in the grid.
• Dimension Handling: Use the dimension provider to manage row and column dimensions.
• Selection Management: Use the selection provider to handle cell and row selections.
• Column Management: Use the column provider to manage column data and properties.
• Viewport Management: Use the viewport provider to handle scrolling and viewport rendering.

Conclusion

The RevoGrid plugin system provides a powerful way to extend and customize the grid's functionality. By leveraging the BasePlugin class and the provided utility methods, you can create robust plugins that enhance the capabilities of RevoGrid.

If you have any questions or need further assistance, feel free to reach out to the RevoGrid community or check our RevoGrid Pro.