# NPM Installation Guide
URL: https://pro.rv-grid.com/guides/installation-npm-trial/
Source: src/content/docs/guides/installation-npm-trial.mdx
Description: Learn how to install RevoGrid Pro and Enterprise trial packages using npm
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`.

    Clone or inspect the working trial example:
    [github.com/revolist/revogrid-pro-trial](https://github.com/revolist/revogrid-pro-trial.git).

    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:

```bash
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.

---

**2. Install RevoGrid Pro Trial**

Install the core grid and RevoGrid Pro trial package:

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

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

```typescript
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:

```typescript
// 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:

```bash
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.

```typescript
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:

```typescript
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**

```bash
npm install @revolist/react-datagrid
```

**Angular**

```bash
npm install @revolist/angular-datagrid
```

**Vue**

```bash
npm install @revolist/vue3-datagrid
```

**Svelte**

```bash
npm install @revolist/svelte-datagrid
```
