RevoGrid Pro Starter Kit: Basics

RevoGrid Pro’s docs

Welcome to the RevoGrid Pro documentation! This guide is designed to help you understand and utilize the advanced features of RevoGrid Pro. We are going to provide you with the tools and knowledge needed to build complex, high-performance grid applications.

What You Will Find Here

The RevoGrid Pro documentation is created to assist you in mastering the more sophisticated aspects of our grid framework. Our goal is to:

1. Save Integration Time: Provide you with comprehensive examples and documentation to streamline the integration of advanced features into your grid applications.
2. Offer Pro-Level Examples: Present real-world examples that demonstrate how to implement complex Pro-level features effectively.
3. Enhance Customization: Show you how to extend our existing plugins and create your own custom functionalities to suit your specific needs.
4. Enable Advanced Understanding: Open up the Grid Core functionality and provide deep insights for those who are interested in customizing and extending the grid at a fundamental level.

What We Provide

To ensure you make the most out of RevoGrid Pro, we offer a range of resources and support:

• ✅ Access to All Pro Examples, Plugins, and Documentation: Detailed guides, examples, and plugins exclusive to the Pro version.
• ✅ Prioritized GitHub Issues and Pull Requests: Expedited handling of your GitHub issues and pull requests.
• ✅ Prioritized Roadmap Items and Feature Requests: Influence the future development of RevoGrid by prioritizing your feature requests and roadmap items.

What You Can Do

With RevoGrid Pro, you can take advantage of advanced features and functionalities that enhance your grid application:

1. Explore Advanced Plugins: Use our Pro-exclusive plugins to add sophisticated capabilities to your grid. Each plugin comes with its own set of documentation and examples.
2. Customize and Extend: Leverage our core functionality to build and integrate custom features. The documentation will guide you through extending existing plugins or creating new ones from scratch.
3. Implement Complex Features: Learn how to utilize advanced grid features such as cell merging, custom row operations, formula support, and more. Our examples will provide step-by-step instructions to help you integrate these features into your application.
4. Optimize Performance: Access best practices and optimization tips to ensure that your grid performs efficiently, even with complex configurations and large datasets.

Getting Started

Most of the information you need can be found in our official documentation: RevoGrid Documentation. We suggest to start with key concepts from main docs. Or you can simply jump to the available features, plugins, and examples. In this Pro examples, we aim to provide you with additional tips and insights that will help you effectively manage your data.

MCP Pro service with token auth

If you use the RevoGrid MCP service with AI IDEs such as Codex, Cursor, Claude Code, or VS Code, the Pro MCP flow can be unlocked with a bearer JWT token.

High-level flow:

1. Enable MCP JWT auth with ENABLE_AUTH_PLACEHOLDER=true.
2. Set MCP_AUTH_JWT_SECRET on the MCP server.
3. Generate a signed MCP token for the user.
4. Send Authorization: Bearer <jwt> from the client or your authenticated proxy.
5. Valid JWT requests are treated as Pro and can access Pro-only MCP results.

Detailed MCP setup, environment variables, and client examples are documented in revogrid-mcp/README.md.

🚀 Project Structure

This project is a pnpm monorepo combining an Astro portal for showcasing and managing RevoGrid Pro, a Pro Plugin Build, an Enterprise Plugin Build (Pivot), framework wrappers, and Docker support.

Inside the project, you'll see the following folders and files:

.
├── pnpm-workspace.yaml        # Workspace configuration
├── package.json                # Root workspace scripts
├── tsconfig.json               # Root TypeScript project references
├── Dockerfile                  # Multi-stage Docker build
├── revogrid/                   # Core grid (git submodule)
├── packages/
│   ├── portal/                 # @revolist/revogrid-portal — Astro docs site
│   │   ├── astro.config.mts
│   │   ├── auth.config.mjs
│   │   ├── uno.config.ts
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── src/
│   │   ├── public/
│   │   └── overrides/
│   ├── pro/                    # @revolist/revogrid-pro — Pro plugins
│   │   ├── plugins/            # Source code for all Pro plugins
│   │   ├── vite.config.ts
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── uno.config.ts
│   ├── enterprise/             # @revolist/revogrid-enterprise — Enterprise plugins (Pivot)
│   │   ├── plugins/
│   │   │   ├── pivot/
│   │   │   ├── pivot-config/
│   │   │   └── index.ts
│   │   ├── vite.config.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── angular/                # Angular framework wrapper & demos
│   │   └── package.json
│   └── react/                  # React framework wrapper & demos
│       └── package.json
├── .github/                    # CI/CD workflows
└── README.md

Packages

Package	Name	Description
packages/portal	@revolist/revogrid-portal	Astro-based documentation site at pro.rv-grid.com
packages/pro	@revolist/revogrid-pro	All Pro plugins (autofill, charts, filters, grouping, etc.)
packages/enterprise	@revolist/revogrid-enterprise	Enterprise plugins (Pivot table & Pivot configurator)
packages/angular	angular	Angular framework wrapper & demo app
packages/react	revogrid-pro-react-demo	React framework wrapper & demo app

Dependency Graph

@revolist/revogrid (core, git submodule)
  └── @revolist/revogrid-pro (Pro plugins)
        ├── @revolist/revogrid-enterprise (Enterprise/Pivot — depends on Pro)
        └── @revolist/revogrid-portal (docs — depends on Pro + Enterprise)

The main Astro portal you can access at pro.rv-grid.com.

Portal looks for .md or .mdx files in packages/portal/src/content/docs/. Each file is exposed as a route based on its file name.

Key directories:

• packages/portal/src/ — Source code for the portal, including components, assets, and configuration files.
• packages/portal/public/ — Static files served by Astro.
• packages/portal/overrides/ — Custom overrides for dependencies or configurations.
• packages/pro/plugins/ — Source code for all Pro plugins.
• packages/enterprise/plugins/ — Source code for Enterprise plugins (Pivot).

Infrastructure:

• Dockerfile — Multi-stage build Dockerfile for the Astro portal and plugin builds (uses pnpm).
• .dockerignore — Specifies files to exclude when building the Docker image.

🧞 Commands

This project uses pnpm as the package manager. All commands are run from the root of the project:

Command	Action
pnpm install	Installs all workspace dependencies
pnpm dev	Starts portal dev server at localhost:4321
pnpm build	Builds all packages in topological order
pnpm build:pro	Builds Pro plugins to packages/pro/dist/
pnpm build:enterprise	Builds Enterprise plugins to packages/enterprise/dist/
pnpm build:portal	Builds the portal site to packages/portal/dist/
pnpm preview	Preview the portal build locally
pnpm lint	Runs linting across all packages
pnpm lint:pro	Lints the Pro package only

Adding a New Demo Example

Follow these steps exactly whenever you add a new demo. The pivot-field-panel demo is the canonical reference — use it as a template.

1. Create the source files

All demo source files live in packages/portal/src/components/<feature>/. Create one file per framework:

File	Framework
MyDemo.ts	Vanilla JS / TypeScript (ts-sandbox)
MyDemo.tsx	React
MyDemo.vue	Vue 3
MyDemoAngular.ts	Angular

Vanilla TS (MyDemo.ts) — export a load(parentSelector, rows?) function that creates and appends a revo-grid element, then returns a cleanup function:

import { defineCustomElements } from ‘@revolist/revogrid/loader’;
defineCustomElements();
// ... imports

export function load(parentSelector: string, rows: any[] = DEFAULT_ROWS) {
  const grid = document.createElement(‘revo-grid’) as any;
  // configure grid properties
  document.querySelector(parentSelector)?.appendChild(grid);
  grid.source = rows; // set source last
  return () => grid.remove();
}

React (MyDemo.tsx) — default-export a functional component, wrap expensive values in useMemo:

import { useMemo } from ‘react’;
import { RevoGrid } from ‘@revolist/react-datagrid’;

function MyDemo({ rows }: { rows?: any[] }) {
  const data = useMemo(() => rows?.length ? rows : DEFAULT_ROWS, [rows]);
  const plugins = useMemo(() => [Plugin], []);
  const additionalData = useMemo(() => ({ ... }), []);
  return <RevoGrid source={data} plugins={plugins} additionalData={additionalData} ... />;
}
export default MyDemo;

Vue 3 (MyDemo.vue) — use <script setup> with computed/ref, pass additionalData as a computed:

<template>
  <RevoGrid :source="rows" :plugins="plugins" :additionalData="additionalData" ... />
</template>
<script setup lang="ts">
import { computed, ref } from ‘vue’;
import RevoGrid from ‘@revolist/vue3-datagrid’;
const rows = ref(DEFAULT_ROWS);
const plugins = [Plugin];
const additionalData = computed(() => ({ ... }));
</script>

Angular (MyDemoAngular.ts) — standalone @Component, bind all properties via [] syntax:

@Component({
  selector: ‘my-demo-grid’,
  standalone: true,
  imports: [RevoGrid],
  template: `<revo-grid [source]="rows" [plugins]="plugins" [additionalData]="additionalData"></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class MyDemoGridComponent {
  rows = DEFAULT_ROWS;
  plugins = [Plugin];
  additionalData = { ... };
}

2. Register the demo in the catalog

Open packages/demos/src/catalog/demo-catalog.ts and add an entry to the exported array:

{
  id: ‘my-demo’,                          // kebab-case, must be unique
  title: ‘My Demo Title’,
  description: ‘One sentence description.’,
  group: ‘Enterprise’,                    // or ‘Pro’, ‘Core’, etc.
  tags: [‘Tag1’, ‘Tag2’],
  image: ‘/images/demos/pivot.png’,       // reuse an existing image or add one to packages/demos/public/images/demos/
  defaultFramework: ‘ts’,
  variants: [
    createVariant(‘ts’, ‘JavaScript’, ‘ts’, ‘ts-sandbox’, false, [
      [‘packages/portal/src/components/<feature>/MyDemo.ts’, ‘src/index.ts’, ‘ts’, false],
    ]),
    createVariant(‘react’, ‘React’, ‘react’, ‘single-spa’, true, [
      [‘packages/portal/src/components/<feature>/MyDemo.tsx’, ‘src/App.tsx’, ‘tsx’, true],
    ]),
    createVariant(‘vue’, ‘Vue 3’, ‘vue’, ‘single-spa’, true, [
      [‘packages/portal/src/components/<feature>/MyDemo.vue’, ‘src/App.vue’, ‘vue’, true],
    ]),
    createVariant(‘angular’, ‘Angular’, ‘angular’, ‘single-spa’, true, [
      [‘packages/portal/src/components/<feature>/MyDemoAngular.ts’, ‘src/app/demo.component.ts’, ‘ts’, true],
    ]),
  ],
  links: [
    {
      title: ‘Guide Title’,
      url: `${PRO_DOCS}/guides/<feature>/`,
      description: ‘One sentence description of the linked guide.’,
    },
  ],
},

If a framework variant does not apply (e.g. TS-only demo), use null (Vue/React) or omit the variant entry (Angular map).

3. Register the demo in the framework lifecycle files

Each framework has its own lifecycle registry. You must add the demo id to all three:

packages/demos/src/preview/react/lifecycles.tsx

// 1. Add import near the other pivot/feature imports
import MyDemo from ‘@components/<feature>/MyDemo.tsx’;

// 2. Add entry to reactDemoMap (keep alphabetical / grouped order)
‘my-demo’: ({ runtimeContext }) => <MyDemo rows={runtimeContext?.pivotRows ?? []} />,

packages/demos/src/preview/vue/lifecycles.ts

// 1. Add import
import MyDemo from ‘@components/<feature>/MyDemo.vue’;

// 2. Add entry to vueDemoMap
‘my-demo’: MyDemo,

packages/demos/src/preview/angular/lifecycles.ts

// Add entry to the angular demo map (string-based routing)
‘my-demo’: ‘my-demo’,

4. Checklist

• [ ] MyDemo.ts created — exports load(), returns cleanup function
• [ ] MyDemo.tsx created — default export, useMemo for plugins/additionalData
• [ ] MyDemo.vue created — <script setup>, computed additionalData
• [ ] MyDemoAngular.ts created — standalone component, ViewEncapsulation.None
• [ ] Entry added to demo-catalog.ts with correct id, all 4 variants
• [ ] Import + map entry added to react/lifecycles.tsx
• [ ] Import + map entry added to vue/lifecycles.ts
• [ ] Entry added to angular/lifecycles.ts
• [ ] Import + union type + imports array + template case added to packages/angular/src/preview-app/preview-app.component.ts

👀 Want to learn more?

Check out RevoGrid Pro’s docs, read the RevoGrid documentation.