Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/revolist/revogrid

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋
https://github.com/revolist/revogrid

data-grid datagrid excel excel-grid export filter grid infinity-grid react-virtualized reactive revo-grid stenciljs typescript virtual-grid virtual-scroll vuegrid vuejs vuejs-components vuejs-grid webcomponent

Last synced: 2 days ago
JSON representation

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋

Awesome Lists containing this project

README 

        


  

    RevoGrid

  






  Latest Version on NPM

  Software License

  Dependency count

  Tree shaking

  Bundle size

  Sonar Quality Gate




#



Powerful data grid component built with StencilJS.




Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.

  






  Demo and API •

  Key Features •

  How To Use •

  Installation •

  Docs •

  License




Material grid preview

RevoGrid material theme.





## Key Features



- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.



- **Accessibility**: Follows WAI-ARIA best practices.



- **Keyboard Support**:

  - Excel-like focus for efficient navigation and editing.

  - Seamless copy/paste from Excel, Google Sheets, or any other sheet format.



- **Lightweight**: Minimal initial bundle size ![Min size](https://badgen.net/bundlephobia/min/@revolist/revogrid@latest). Can be imported with polyfills or as a module for modern browsers.



- **Intelligent Virtual DOM**: Smart row recombination to minimize redraws.



- **Virtual Scroll**: Handles large datasets with infinite scroll.



- **Formula Support**: Evaluate formulas in cell data.



- **Master Detail/Subtables/Forms**: Expand rows to reveal child data.



- **Drag and Drop**: Drag and drop in rows and columns.



- **Sorting**: Multiple options, customizable per column, with advanced event handling.



- **Filtering**:

  - Predefined system filters.

  - Preserve existing collections.

  - Custom filters to extend system filters with your own set.



- **Export**: Export data to file.



- **Custom Sizes**: Define custom sizes for columns and rows. Automatic sizing based on content.



- **Column Resizing**: Adjust column widths.



- **Pinned/Sticky/Freezed Elements**:

  - Columns (define left or right).

  - Rows (define top or bottom).



- **Grouping**:

  - Column grouping (nested headers).

  - Row grouping (nested rows).



- **Cell Editing**: In-place editing of cell data.



- **Cell Merging**: Merge cells to form groups.



- **Customizations**:

  - Column header template.

  - Row header template.

  - Cell template (create your own cell views).

  - Cell editor (use predefined or apply your own custom editors and cell types).

  - Cell properties (define custom properties for rendered cells).



- **Column Types**: [More details](https://rv-grid.com/guide/column/#Column-Formats)

  - Text/String (default).

  - Number.

  - Select.

  - Date.

  - Custom (create extended styles using any template).



- **Range Operations**:

  - Selection.

  - Editing.



- **Theme Packages**:

  - Excel-like (default).

  - Material (compact, dark, or light).



- **Extensibility**: Modern VNode features and tsx support for easy extension.



- **Trimmed Rows**: Hide rows on demand.



- **Plugin System**: Create custom plugins or extend existing ones easily.



- **Additional Customizations and Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).







Framework Friendly





Framework friendly



I am RevoGrid, your solution for efficiently representing large datasets 
 in an "Excel-like" data table or as a list. Render native components inside each cell!














## Installation



The library published as a [scoped NPM package](https://docs.npmjs.com/misc/scope) in the [NPMJS Revolist account](https://www.npmjs.com/org/revolist).

[Check for more info on our demo side](https://rv-grid.com/guide/installation).



With NPM:



```bash

npm i @revolist/revogrid --save;

```



With Yarn:



```bash

yarn add @revolist/revogrid;

```



## Browser Support



| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |

| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |

| Latest ✔   | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

|



## Framework



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



- [JavaScript](https://rv-grid.com/guide/);

- [VueJs](https://rv-grid.com/guide/vue3/);

- [Svelte](https://rv-grid.com/guide/svelte/);

- [React](https://rv-grid.com/guide/react/);

- [Angular](https://rv-grid.com/guide/angular/).



## 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:



- [Import the grid into your project](https://rv-grid.com/guide/installation)



### Vanilla JS Grid Usage



```javascript

// 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](https://rv-grid.com/guide/)



## Versions



- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.

- **3.0+**: Breaking changes introduced:

    -   Removed the redundant viewport component.

    -   Renamed classes to support Bootstrap and other libraries:

        -   `row` -> `rgRow`

        -   `col` -> `rgCol`

        -   `data-cell` -> `rgCell`

        -   `data-header-cell` -> `rgHeaderCell`

    -   Migrated all method names to lowercase to align with modern event naming conventions. For example, `afterEdit` is now `afteredit`. Check the API for details.

    -   Added support for pure ESM modules to enable the use of the grid in all modern frontend tooling like Vite, Parcel, etc. You can now import custom elements without lazy loading. Note that you are responsible for polyfills.



- **4.0+**: Breaking changes introduced. See the [migration guide](https://rv-grid.com/guide/migration). 



-   Redesigned type support:

        - Removed deprecated namespaces:

            - **Before**: `RevoGrid.ColumnRegular`

            - **Now**: `ColumnRegular`;

        - Improved type import:

            - **Before**: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`

            - **Now**: `import { ColumnRegular } from '@revolist/revogrid'`.

        - Changed viewport type names everywhere. For example, before: `rowDefinitions: [{ type: "row", index: 0, size: 145 }]`, after: `rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]`.

    -   Updated [event](https://rv-grid.com/guide/api/revoGrid.html#Events) naming convention. Review your [event](https://rv-grid.com/guide/api/revoGrid.html#Events) usage. [Event names](https://rv-grid.com/guide/api/revoGrid.html#Events) are all lowercase now and are aligned with modern event naming conventions. For example, `afterEdit` -> `afteredit`.

    - Multiple event breaking changes introduced: beforerowrender now returns `BeforeRowRenderEvent`. Check all events for details.



-   **Major improvements**:

    -   Rethought the entire framework approach. Introduced Pro version with advance support and pro features.

    -   Introduced slot support.

    -   Updated scrolling system for better mobile support.

    -   Advance template support. Introduced `additionalData` for templates and editors. `Prop` gives access to parent/root app context.

    -   Redesigned the documentation.

    -   Fixed major issues and significantly improved overall performance, making the grid multiple time faster.

    -   Enhanced plugin support - now with full access to grid providers.

    -   Updated documentation.

    -   Provided full framework support and native render for  Angular, React, Svelte and Vue.

 

-   **What next?**

    -   Check our [Roadmap](https://github.com/users/revolist/projects/3)



## 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](https://cdn.prod.website-files.com/62cd69e08130a1a33f5ef900/6310b4d500e971695db5e9c3_615b5db69ce8931a276e5ed2_Social_Icons_AQ_3_32x32.png)](https://altruistiq.com)



### Become a Sponsor



If you or your company would like to support the ongoing development of RevoGrid, please consider [![Sponsor Us](https://img.shields.io/badge/Sponsor%20Us-%F0%9F%92%96-brightgreen)](https://opencollective.com/revogrid) or use a [Pro version](https://rv-grid.com/pro/). 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?



- **Expand Your Knowledge**: Working on complex libraries allows you to dive deep into modern web technologies, improve your coding skills, and learn best practices in performance optimization, data handling, and component-based architecture.

- **Experience**: Contributing to an open-source project like provides you with practical experience that can be a great addition to your portfolio. It demonstrates your ability to work collaboratively, solve complex problems, and contribute to a project's success.

- **Professional Growth**: By contributing, you become part of a network of talented developers. This can lead to mentorship opportunities, collaborations, and professional connections that can benefit your career. 



## License



MIT



---