NPM Installation Guide

Install RevoGrid Pro and product trial packages from our public trial registry

Trial Version Limitations

Trial access uses separate package names and asset paths from the full paid packages. After purchasing, switch each product trial to @revolist/<product> and switch Pro trial to @revolist/revogrid-pro.

Trial Starter Repository

Clone or inspect the working trial example: github.com/revolist/revogrid-pro-trial.

Correct Trial Imports

Trial packages use names such as @revolist/rv-pro-trial and @revolist/gantt-trial, @revolist/scheduler-trial, @revolist/kanban-trial, and @revolist/pivot-trial, with matching CSS filenames.

1. Configure NPM Registry

First, configure npm to use the public RevoGrid trial registry. No token or login is required:

npm config set "@revolist:registry=https://trial.rv-grid.com"

This command routes the @revolist scope through the public trial registry.

---

2. Install RevoGrid Pro Trial

Install the core grid and RevoGrid Pro trial package:

npm install @revolist/revogrid
npm install @revolist/rv-pro-trial

Use Pro exports from the trial package and import the trial CSS file:

import '@revolist/rv-pro-trial/dist/rv-pro-trial.css';
import { RowOddPlugin } from '@revolist/rv-pro-trial';

Do not use the full package CSS path with the trial package:

// Incorrect for trial packages
import '@revolist/rv-pro-trial/dist/revogrid-pro.css';

---

3. Install a Standalone Product Trial

Install only the product trial you need:

npm install @revolist/gantt-trial
# or: @revolist/scheduler-trial, @revolist/kanban-trial, @revolist/pivot-trial

Product trials build on Pro trial, so keep @revolist/rv-pro-trial installed.

import '@revolist/rv-pro-trial/dist/rv-pro-trial.css';
import '@revolist/pivot-trial/dist/pivot-trial.css';
import { PivotPlugin, type PivotConfig } from '@revolist/pivot-trial';
import { commonAggregators } from '@revolist/rv-pro-trial';

Minimal Pivot setup:

import { defineCustomElements } from '@revolist/revogrid/loader';
import '@revolist/rv-pro-trial/dist/rv-pro-trial.css';
import '@revolist/pivot-trial/dist/pivot-trial.css';
import { PivotPlugin, type PivotConfig } from '@revolist/pivot-trial';
import { commonAggregators } from '@revolist/rv-pro-trial';

defineCustomElements();

const grid = document.createElement('revo-grid');

const pivot: PivotConfig = {
  dimensions: [
    { prop: 'age' },
    {
      name: 'Date of Birth',
      prop: 'dateOfBirth',
      aggregators: {
        count: commonAggregators.count,
      },
    },
  ],
  rows: ['age'],
  values: [{ prop: 'dateOfBirth', aggregator: 'count' }],
  hasConfigurator: true,
};

grid.plugins = [PivotPlugin];
grid.pivot = pivot;
grid.source = [
  { name: 'John Doe', age: 25, dateOfBirth: '1998-01-15' },
  { name: 'Jane Smith', age: 30, dateOfBirth: '1993-03-22' },
];

document.getElementById('app')?.appendChild(grid);

---

4. Framework Integration Packages

For better integration with specific frameworks, you can install the corresponding framework package:

React

npm install @revolist/react-datagrid

Angular

npm install @revolist/angular-datagrid

Vue

npm install @revolist/vue3-datagrid

Svelte

npm install @revolist/svelte-datagrid