Revogrid

<p align="center"> <a href="https://rv-grid.com"> <img src="./assets/logo.svg" alt="RevoGrid Data Grid" 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"/> <a href="https://github.com/revolist/revogrid/actions/workflows/unit.yml"> <img src="https://github.com/revolist/revogrid/actions/workflows/unit.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20"> </a> <a href="https://github.com/revolist/revogrid/actions/workflows/e2e.yml"> <img src="https://github.com/revolist/revogrid/actions/workflows/e2e.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20"> </a> </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"> Used by some of the largest companies in Europe and the United States. </p> <p align="center"> <a href="https://rv-grid.com/demo/">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

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

• Accessibility: Follows WAI-ARIA best practices.

• RTL Support: Comprehensive Right-to-Left language support for Arabic, Hebrew, Persian, and other RTL languages. Features automatic column reordering, proper text alignment, and layout adjustments for RTL interfaces.

• 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 . 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.

• Drag and Drop: Drag and drop in rows and columns.

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

• Filtering:

  • Predefined system filters.
  • Multi column filters.
  • Conditional filters.
  • Preserve existing collections.
  • Selection.
  • Slider.
  • Header filtering.
  • 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.

• Auto Size Columns: Intelligent column width adjustment that automatically adapts to content, ensuring optimal readability and layout efficiency.

• Pinned/Sticky/Freezed Elements:

  • Columns (define left or right).
  • Rows (define top or bottom).

• Grouping:

  • Column grouping (nested headers).
  • Column grouping Drill Down: Collapse grouping columns to streamline your grid view, trimming away unnecessary columns and enhancing data organization. Perfect for focusing on the information that matters most, while keeping your workspace clean and efficient.
  • Row grouping (nested rows).

• Column Types: More details

  • Text/String (default).
  • Number.
  • Select/Dropdown.
  • 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.

• Formula Support: Evaluate formulas in cell data with Excel-like syntax, including basic arithmetic, statistical functions, and cell references.

• Pivot Table: Transform and analyze data dynamically with drag-and-drop field arrangement, aggregation functions, and interactive filtering capabilities.

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

• Cell/Column/Row Span/Merge: Merge cells to form groups.

• Auto Merge: Automatically merges cells with identical values in a column.

• Form editig: Edit forms directly within the grid, featuring all necessary fields, including custom options and markdown support for a fast and enhanced data entry experience.

• Customizations:

  • Column header template.

  • Row header template.

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

  • Nested grids: Build a grid inside a grid, showcasing advanced editing options and user interactions for a more dynamic data presentation.

  • Context Menu: Build context menus for any grid element - from cells to headers. Cut, copy, paste, add rows, modify columns, and more. Fully customizable with your own actions and behaviors.

  • Cell template (create your own cell views).

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

• Rich API & Additional Improvements: Explore hundreds of other small customizations and improvements in RevoGrid.

<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

| | | | | | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | 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),