Stencil Data Grid

This page covers the key concepts of RevoGrid - a high-performance, customizable StencilJS Table and StencilJS Data Grid for managing large datasets.

What is StencilJS?

Stencil aims to eliminate the need for writing components with a specific framework’s API. It achieves this by leveraging standardized web platform APIs compatible with all modern browsers. By using the browser’s low-level component model, which underpins all frameworks, Stencil components can function both within a framework and independently.

Integrating web components directly into existing applications can be challenging due to the varying levels of support frameworks have for vanilla web components.

For more information about getting started with StencilJS, visit the official StencilJS documentation.

Install your React Data Grid

Install RevoGrid for React using the following command:

npm

npm i @revolist/react-datagrid

pnpm

pnpm add @revolist/react-datagrid

yarn

yarn add @revolist/react-datagrid

bun

bun add @revolist/react-datagrid

Usage

Create a StencilJS component and import the necessary modules. Define the custom elements and configure your component as follows:

import type { ColumnRegular } from '@revolist/revogrid';
import { defineCustomElements } from '@revolist/revogrid/loader';
import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent {
  // Define the columns for the RevoGrid
  columns: ColumnRegular[] = [
    { prop: 'id', name: 'ID' },
    { prop: 'name', name: 'Name' },
    { prop: 'age', name: 'Age' },
    { prop: 'email', name: 'Email' },
  ];

  // Define the data source for the RevoGrid
  source: any[] = [
    { id: 1, name: 'John', age: 30, email: '[email protected]' },
    { id: 2, name: 'Mike', age: 25, email: '[email protected]' },
  ];

  componentWillLoad() {
    // Initialize RevoGrid custom elements
    return defineCustomElements();
  }

  render() {
    return (
      // Render the revo-grid component with filtering enabled
      <revo-grid filter={true} columns={this.columns} source={this.source} />
    );
  }
}

Explanation

1. Import Statements: Import necessary modules from @revolist/revogrid and StencilJS core.
2. Component Decorator: Use the @Component decorator to define a new Stencil component with the tag name my-component.
3. Column Definition: Define the columns for the grid using the ColumnRegular type.
4. Data Source: Define the data source for the grid.
5. Lifecycle Method: Use the componentWillLoad lifecycle method to initialize the RevoGrid custom elements.
6. Render Method: Render the revo-grid component with the defined columns and data source, and enable filtering.

That's it! Your StencilJS project is now set up to use RevoGrid.

Edit RG Start (StencilJs)