Getting Started
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.
Installation
Install the necessary dependencies:
npm install @revolist/revogrid @stencil/store @types/lodash lodash
pnpm add @revolist/revogrid @stencil/store @types/lodash lodash
yarn add @revolist/revogrid @stencil/store @types/lodash lodash
bun add @revolist/revogrid @stencil/store @types/lodash lodash
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
- Import Statements: Import necessary modules from
@revolist/revogrid
and StencilJS core. - Component Decorator: Use the
@Component
decorator to define a new Stencil component with the tag namemy-component
. - Column Definition: Define the columns for the grid using the
ColumnRegular
type. - Data Source: Define the data source for the grid.
- Lifecycle Method: Use the
componentWillLoad
lifecycle method to initialize the Revogrid custom elements. - 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.