Installation
TIP
Revogrid's API is consistent across all major frameworks.
You can 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 i @revolist/revogrid
pnpm add @revolist/revogrid
yarn add @revolist/revogrid
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.