Installation

TIP

Revogrid's API is consistent across all major frameworks. Transfer your experience and knowledge from one framework to another.

• Angular – Setup and usage in Angular environments.
• React – Usage within React applications.
• Svelte – Integrating into Svelte projects.
• Vue 2 – Specific adaptations for Vue 2.
• Vue 3 – Detailed guide for integrating with Vue 3.
• – Can't find your framework? Ask us or open an issue on GitHub.

Package Manager Installation

First, install Revogrid using your preferred package manager.

npm

npm i @revolist/revogrid

pnpm

pnpm add @revolist/revogrid

yarn

yarn add @revolist/revogrid

bun

bun add @revolist/revogrid

After installation, you can import Revogrid into your module.

Using lazy loading:

import { defineCustomElements } from "@revolist/revogrid/loader";
// defineCustomElements function can be used to quickly define all Revogrid components in a project on the custom elements registry.
defineCustomElements();

If you're using ES Modules in your project, here’s how you can import it.

This import statement brings the Revogrid component into your project, allowing you to utilize it within your JavaScript or TypeScript files. From here, you can proceed to instantiate and configure your grid according to your project's requirements.

No-Build Integration

Integrating components into a project doesn't have to be complicated, especially when not working within a JavaScript framework. If you're crafting a site with simple HTML, adding Revogrid is as easy as inserting a script tag.

CDN

To quickly include Revogrid in your project, you can use a CDN like unpkg. Here’s how you can do it:

<script src="https://unpkg.com/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>

ES Module Import

For a more modern approach that leverages ES Modules, you can import Revogrid components directly. This method is particularly beneficial if you're aiming to maintain a modular project structure.

<script type="module">
    import { applyPolyfills, defineCustomElements } from "https://unpkg.com/@revolist/revogrid@latest/loader";
    applyPolyfills().then(() => {
        defineCustomElements();
    });
</script>

This import statement not only loads Revogrid but also ensures that any necessary polyfills are applied, making your project compatible with a broader range of browsers.