NPM Installation Guide

Install RevoGrid Pro and Enterprise trial packages from our private NPM Registry

Trial Version Limitations

Trial access uses separate package names and asset paths from the full paid packages. After purchasing the full version, switch to @revolist/revogrid-pro and @revolist/revogrid-enterprise.

Trial Starter Repository

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

Correct Trial Imports

Trial packages use @revolist/rv-pro-trial, @revolist/rv-enterprise-trial, rv-pro-trial.css, and rv-enterprise-trial.css.

1. Configure NPM Registry

First, configure npm to use the RevoGrid registry:

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

The command npm config set @revolist:registry=https://trial.rv-grid.com is used to configure npm (Node Package Manager) to use a specific registry for packages that are scoped under the @revolist namespace.

npm login --registry=https://trial.rv-grid.com
Username: ***
Password: ***
Email: ***

---

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 RevoGrid Enterprise Trial

Install Enterprise trial when you need Pivot or other Enterprise-only features:

npm install @revolist/rv-enterprise-trial

Enterprise trial builds on Pro trial, so keep both @revolist/rv-pro-trial and @revolist/rv-enterprise-trial installed.

import '@revolist/rv-pro-trial/dist/rv-pro-trial.css';
import '@revolist/rv-enterprise-trial/dist/rv-enterprise-trial.css';
import { PivotPlugin, type PivotConfig } from '@revolist/rv-enterprise-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/rv-enterprise-trial/dist/rv-enterprise-trial.css';
import { PivotPlugin, type PivotConfig } from '@revolist/rv-enterprise-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.additionalData = { 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