Home

Awesome

<p align="center"> <a href="https://rv-grid.com"> <img src="./assets/logo.svg" alt="RevoGrid" height="150" /> </a> </p> <p align="center"> <a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/revogrid" alt="Latest Version on NPM"/></a> <a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a> <img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid" alt="Dependency count"/> <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/> <img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/> <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/> </p>

<h3 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</a>.</h3> <p align="center"> Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use. </p> <p align="center"> <a href="https://rv-grid.com">Demo and API</a> • <a href="#key-features">Key Features</a> • <a href="#basic-usage">How To Use</a> • <a href="#installation">Installation</a> • <a href="https://rv-grid.com/guide/">Docs</a> • <a href="#license">License</a> </p> <img src="./assets/material.jpg" alt="Material grid preview" width="100%" /> <i>RevoGrid material theme.</i> <br>

Key Features

<br> <h2 align="center">Framework Friendly</h2> <p align="center"> <img src="./assets/framework.png" alt="Framework friendly" width="100%" max-width="500px" style="max-width: 600px"/> <p align="center"> <i>I am RevoGrid, your solution for efficiently representing large datasets <br /> in an "Excel-like" data table or as a list. Render native components inside each cell!</i> </p> </p> <br> <br> <br>

Installation

The library published as a scoped NPM package in the NPMJS Revolist account. Check for more info on our demo side.

With NPM:

npm i @revolist/revogrid --save;

With Yarn:

yarn add @revolist/revogrid;

Browser Support

ChromeFirefoxSafariOperaEdge
Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔

Framework

In <revo-grid /> we have developed a sophisticated Continuous Delivery (CD) system powered by GitHub Actions. This advanced system automatically builds and delivers grid versions across multiple frameworks, including React, Angular, Svelte, Vue 2, and Vue 3, with full type support. This ensures continuous version delivery, providing the latest grid enhancements and upgrades across all supported frameworks ✨. In the future (version 5), we are planning to switch to monorepo based development.

Basic Usage

RevoGrid functions as a web component. Simply place the component on your page and access its properties as you would with any other HTML element. It also offers multiple ways to integrate our grid into your project:

Vanilla JS Grid Usage

// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
const columns = [
  { prop: 'name', name: 'First Column' }, // Simple column definition
  {
    prop: 'details',
    name: 'Second Column',
    // Custom cell template for the 'details' column
    cellTemplate: (createElement, props) => {
      return createElement(
        'div',
        {
          style: { backgroundColor: 'red' }, // Styling the cell background
          class: { 'inner-cell': true }, // Adding a CSS class
        },
        props.model[props.prop] || '' // Display the cell content or an empty string if undefined
      );
    },
  },
];

// Define the data source for the grid
const items = [{ name: 'New Item', details: 'Item Description' }];

// Assign the columns and data source to the grid
grid.columns = columns;
grid.source = items;

Example and guide

Versions

Our Sponsors

We would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid.

Altruistiq

Become a Sponsor

If you or your company would like to support the ongoing development of RevoGrid, please consider Sponsor Us or use a Pro version. Your support will help us continue to improve the project and provide the best possible tool for the community.

Thank you for supporting RevoGrid! 🙏

Contributing

By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.

Why Contribute?

License

MIT