Convert Figma logo to code with AI

revolist logorevogrid

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

2,823
178
2,823
39

Top Related Projects

13,639

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

25,610

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

React components for efficiently rendering large lists and tabular data

A lightning fast JavaScript grid/spreadsheet

Quick Overview

RevoGrid is a high-performance virtual data grid component for web applications. It's designed to handle large datasets efficiently, offering features like virtual scroll, custom editors, and sorting. RevoGrid is framework-agnostic and can be used with various web technologies.

Pros

  • High performance with virtual scrolling for large datasets
  • Framework-agnostic, compatible with multiple web technologies
  • Customizable with various plugins and extensions
  • Supports both desktop and mobile interfaces

Cons

  • Learning curve for advanced customizations
  • Documentation could be more comprehensive
  • Limited built-in themes and styling options
  • Smaller community compared to some other grid libraries

Code Examples

  1. Basic grid initialization:
const grid = document.querySelector('revo-grid');
grid.source = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
  1. Adding column definitions:
grid.columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'age', name: 'Age', cellTemplate: (h, props) => `${props.model[props.prop]} years` }
];
  1. Enabling sorting:
grid.canSortByColumn = true;
grid.sortable = true;
  1. Adding a custom editor:
grid.editors = {
  age: {
    component: (h, props) => h('input', {
      type: 'number',
      value: props.value,
      onInput: (e) => props.onInput(e.target.value)
    })
  }
};

Getting Started

To use RevoGrid in your project, follow these steps:

  1. Install RevoGrid:
npm install @revolist/revogrid
  1. Import and use in your HTML or JavaScript:
<script type="module">
  import '@revolist/revogrid';
</script>

<revo-grid></revo-grid>
  1. Initialize the grid with data:
const grid = document.querySelector('revo-grid');
grid.source = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
grid.columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'age', name: 'Age' }
];

This basic setup will create a functional RevoGrid with two columns and two rows of data.

Competitor Comparisons

13,639

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

  • More comprehensive feature set, including advanced filtering, grouping, and pivoting
  • Extensive documentation and community support
  • Enterprise version with additional features for complex data handling

Cons of ag-grid

  • Steeper learning curve due to its complexity
  • Larger bundle size, which may impact performance for smaller projects
  • Licensing costs for enterprise features

Code Comparison

ag-grid:

import { Grid } from 'ag-grid-community';

const gridOptions = {
  columnDefs: [{ field: 'name' }, { field: 'age' }],
  rowData: [{ name: 'John', age: 30 }]
};
new Grid(document.querySelector('#myGrid'), gridOptions);

revogrid:

import { RevoGrid } from '@revolist/revogrid';

const grid = document.querySelector('revo-grid');
grid.source = [{ name: 'John', age: 30 }];
grid.columns = [{ prop: 'name' }, { prop: 'age' }];

Key Differences

  • ag-grid offers more built-in features and customization options
  • revogrid has a simpler API and is easier to set up for basic use cases
  • ag-grid has a larger ecosystem and more third-party integrations
  • revogrid is more lightweight and may be better suited for smaller projects

Both libraries provide powerful data grid solutions, but ag-grid is more feature-rich and complex, while revogrid focuses on simplicity and performance.

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

  • More mature and feature-rich, with a longer development history
  • Extensive documentation and community support
  • Offers both open-source and commercial versions with additional features

Cons of Handsontable

  • Larger file size and potentially heavier performance impact
  • Steeper learning curve due to its extensive feature set
  • Commercial license required for some advanced features

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

RevoGrid:

const grid = document.querySelector('revo-grid');
grid.source = data;
grid.columns = columns;
grid.rowHeaders = true;
grid.filter = true;

RevoGrid is a newer, lightweight alternative to Handsontable, focusing on performance and modern web technologies. It uses Web Components, making it framework-agnostic and easy to integrate. RevoGrid has a smaller footprint and potentially better performance for large datasets.

However, RevoGrid may lack some advanced features found in Handsontable and has a smaller community and ecosystem. The choice between the two depends on specific project requirements, performance needs, and desired feature set.

Both libraries offer powerful data grid solutions, with Handsontable providing a more comprehensive toolkit and RevoGrid emphasizing simplicity and performance.

25,610

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of TanStack Table

  • Highly flexible and customizable with a headless architecture
  • Supports various UI frameworks (React, Vue, Solid, Svelte)
  • Extensive documentation and active community support

Cons of TanStack Table

  • Steeper learning curve due to its headless nature
  • Requires more setup and configuration for basic functionality
  • May have a larger bundle size for simple use cases

Code Comparison

TanStack Table:

import { useReactTable, getCoreRowModel } from '@tanstack/react-table'

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

RevoGrid:

import { RevoGrid } from '@revolist/revogrid';

<RevoGrid
  source={data}
  columns={columns}
/>

Key Differences

  • TanStack Table is a headless library, providing more flexibility but requiring more setup
  • RevoGrid is a complete UI component, offering quicker implementation but less customization
  • TanStack Table supports multiple frameworks, while RevoGrid is primarily focused on web components

Both libraries have their strengths, with TanStack Table excelling in flexibility and RevoGrid in ease of use. The choice depends on project requirements and developer preferences.

React components for efficiently rendering large lists and tabular data

Pros of react-virtualized

  • More mature and widely adopted project with a larger community
  • Offers a broader range of components beyond just grids (e.g., lists, tables, masonry)
  • Extensive documentation and examples available

Cons of react-virtualized

  • Larger bundle size due to its comprehensive feature set
  • Steeper learning curve for beginners due to its complexity
  • Less frequent updates and maintenance in recent years

Code Comparison

react-virtualized:

import { Grid } from 'react-virtualized';

<Grid
  cellRenderer={({ columnIndex, key, rowIndex, style }) => (
    <div key={key} style={style}>
      {`Cell ${rowIndex}, ${columnIndex}`}
    </div>
  )}
  columnCount={1000}
  columnWidth={100}
  height={300}
  rowCount={1000}
  rowHeight={30}
  width={300}
/>

RevoGrid:

import { RevoGrid } from '@revolist/revogrid-react';

<RevoGrid
  source={data}
  columns={columns}
  theme="material"
  resize={true}
  range={true}
/>

The code comparison shows that RevoGrid has a simpler API for basic grid setup, while react-virtualized requires more configuration but offers finer control over cell rendering. RevoGrid focuses on providing a full-featured data grid out of the box, whereas react-virtualized is more flexible and can be used for various virtualized components.

A lightning fast JavaScript grid/spreadsheet

Pros of SlickGrid

  • Mature and battle-tested, with a long history of development and use in production environments
  • Extensive documentation and community support
  • Highly customizable with a wide range of plugins and extensions

Cons of SlickGrid

  • Older codebase, which may lack some modern JavaScript features and optimizations
  • Steeper learning curve due to its complexity and extensive API
  • Less frequent updates and maintenance compared to more recent grid libraries

Code Comparison

SlickGrid:

var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onCellChange.subscribe(function (e, args) {
  console.log("Cell changed: ", args);
});

RevoGrid:

<revo-grid source={data} columns={columns}>
  <revo-grid-column prop="id" name="ID"></revo-grid-column>
  <revo-grid-column prop="name" name="Name"></revo-grid-column>
</revo-grid>

SlickGrid uses a more traditional JavaScript approach, while RevoGrid leverages modern web components for a declarative setup. RevoGrid's syntax is more concise and easier to read, especially for developers familiar with component-based frameworks. However, SlickGrid's approach offers more fine-grained control over grid initialization and event handling.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

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

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


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

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

  • 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 naming convention. Review your event usage. Event names 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?

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?

  • 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


NPM DownloadsLast 30 Days