Powerful data grid component built with StencilJS

Overview

RevoGrid

Latest Version on NPM Software License Tree shaking Tree shaking

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

  • Millions of cells viewport with a powerful core in-build by default;
  • Keyboard support with excel like focus;
  • Super light initial starter Min size. Can be imported with polifill or as module for modern browsers;
  • Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws;
  • Sorting (multiple options, can be customized per column and advanced with events);
  • Filtering
    • Predefined system filters;
    • Preserve existing collection;
    • Custom filters (extend existing system filters with your own set);
  • Export to file;
  • Custom sizes per Column and Row;
  • Column resizing;
  • Autosize support (Column size based on content);
  • Pinned/Sticky/Freezed:
    • Columns (define left or right);
    • Rows (define top or bottom);
  • Grouping:
    • Column grouping (Nester headers);
    • Row grouping (Nested rows);
  • Cell editing;
  • Customizations:
    • Header template;
    • Cell template (build your own cell view);
    • Cell editor (apply your own editors and cell types);
    • Cell properties (build you own properties around rendered cells);
  • Column types;
    • Text/String (default);
    • Number;
    • Select;
    • Date;
    • Custom (take any type as template and create your own extended style);
  • Drag and drop rows;
  • Range operations:
    • Selection;
    • Edit;
  • Theme packages:
    • Excel like (default)
    • Material (compact, dark or light);
  • Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format);
  • Easy extenation and support with modern VNode features and tsx support;
  • Trimmed rows (hide rows on demand);
  • Plugin system (create your own plugins or extend existing one, it's transparent and easy);
  • Automated size calculation;
  • Hundred others small customizations and improvements RevoGrid.

Overview

Framework friendly

The RevoGrid component helps represent a huge amount of data in a form of data table "excel like" or as list. On top of it it provides inbuilt range edit or per cell edit, keyboard support and custom edit and render features. Works in any major framework or with no framework at all.

Chrome Firefox Safari Opera Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

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;

Framework

Basic Usage

Grid works as web component. All you have to do just to place component on the page and access it properties as an element. We provide many ways to integrate our grid in your project:

Vanilla Js grid usage

const grid = document.querySelector('revo-grid');
const columns = [
  { prop: 'name', name: 'First column' },
  {
    prop: 'details',
    name: 'Second column',
    cellTemplate: (createElement, props) => {
      return createElement('div',
        {
          style: { backgroundColor: 'red' },
          class: { 'inner-cell': true },
        },
        props.model[props.prop] || '',
      );
    },
  },
];
const items = [{ name: 'New item', details: 'Item description' }];
grid.columns = columns;
grid.source = items;

Framework usage VueJs example

">
<template>
  <v-grid :source="rows" :columns="columns"/>
template>

<script>
import VGrid from '@revolist/vue-datagrid';
export default {
  name: 'App',
  data() => ({
      columns: [
        { prop: 'name', name: 'First' },
        { prop: 'details', name: 'Second' },
      ],
      rows: [{ name: '1', details: 'Item 1' }],
    };
  }),
  components: { VGrid },
};
script>

Versions

  • 2.0+ Introduced plugin system, grouping, sorting and filtering.
  • 3.0+ Breaking changes introduced version. New component loading and esm modules. Bootstrap support and much more.

Contributing

If you have any idea, feel free to open an issue to discuss a new feature, or fork RevoGrid and submit your changes back to me.

License

MIT


Comments
  • Vue components inside cell?

    Vue components inside cell?

    How could one use a Vue component inside of a cell?

    For example, I'd like to put an element-ui button in there for edit/delete/etc. I'd need be able to handle the click event. I'd also like to use a datepicker component.

    This does not seem obvious to me using the cell renderer.

    Thanks for all the hard work on this great component!

    enhancement 
    opened by bbbford 25
  • support mouse selection range feature

    support mouse selection range feature

    Why was the mouse selection range feature removed in later versions?

    I see that https://github.com/revolist/revogrid/commit/40de4843301082d9fe90b5788c414a76a525069e is the last version that supports mouse selection range (online demo), what is the problem that abandoned this feature?

    Is there any plan to support it in the future?

    opened by SolidZORO 9
  • remove table sort

    remove table sort

    Hi, some basic customization features which I think are lacking:

    1. ability to disable edit on columns definition
    2. removing sort after a table has been sorted (third consecutive click could remove the table sort)

    on a separate note: I've noticed the grid is not ignoring keyboard shortcuts when having a cell selected. example: select a cell and do cmd+L to edit the url on the page, notice that the cell value changes.

    I'm happy to try to help you improve this if you can give me some pointers.

    opened by jorgemmsilva 8
  • Custom Row Headers

    Custom Row Headers

    As far as I am concern, row headers only display numbers and are not customizable, am I right?

    Let's say in your example here https://revolist.github.io/revogrid/ you want name to be a row header so that's not selectable, is that possible?

    enhancement 
    opened by kas84 8
  • How to pass user props to vue cell template ?

    How to pass user props to vue cell template ?

    Hi, I am using vue framework and like to pass user props to a vue cell template.

    tableColumns: [{ name: "Actions", prop: "amsRecid", cellTemplate: VGridVueTemplate(CellActions) }]

    Is there any possibility like

    userProps: {userProp1: 'Test 1', userProp2: 'Test 2'} cellTemplate: VGridVueTemplate(CellActions, userProps) ?

    And then inside cell template:

    ... props: ["rowIndex", "prop", "userProp1", "userProp2", ...], ...

    opened by duese1990 5
  • Save data when losing focus from cell

    Save data when losing focus from cell

    As can be seen from the demo (https://revolist.github.io/revogrid/demo/), when the cell contents is changed and without clicking enter, click with the mouse on another cell, the inputted value is not saved. How do i save the value when focus from cell is lost without pressing the enter key ?

    opened by dennisgeerts 5
  • [Feature Request] stretch like table display

    [Feature Request] stretch like table display

    My project needs to make each column expand evenly. Just like element-plus's table I tried it myself, because I use vue, so I wrapped a component and listened to the change of columns to calculate the size of the columns that are not set to size, while in the resize event, through the plugin to get the dimensionProvider to update the size of columns. But the current plugin interface does not provide dimensionProvider, so I used patch-package to modify the source code. I think it might be possible to enhance the current stretchPlugin or change the plugin's interface.

    enhancement 
    opened by odex21 5
  • Row headers not working with bootstrap-vue

    Row headers not working with bootstrap-vue

    Describe the issue With :row-headers="true" you can see that row headers are active but the labels on it are not visible. The problem is probably a conflict with boostrap.css.

    To Reproduce Check here https://codesandbox.io/s/quirky-dan-ruyv0?file=/src/App.vue Try to remove line 16: import "bootstrap/dist/css/bootstrap.css"; You should see the labels appearing when deleting the import, but it should not conflict with bootstrap css.

    bug 
    opened by Magenta94 5
  • Get active (focused) cell / row

    Get active (focused) cell / row

    Is there a way to get an active or focused cell or row (data)? Want to implement custom keyboard shortcuts when e.g. enter is pressed on a cell, but didn't find any APIs to pull it off.

    opened by lauri865 5
  • Remote virtual scrolling, data loaded from the server, any example

    Remote virtual scrolling, data loaded from the server, any example

    Describe the issue Hi, I'm trying to use revogrid to display 1 million+ records, i have a working API that can serve "pages" of rows (array of objects) using filters, sorts and offsets. Can this library get data and still use filters and sorts on that data if the data is remote? Or how would you display this data in revogrid, because downloading it all would take about 1-2 minutes..

    Thanks

    opened by Wyzix33 4
  • Feature: Drag to select multiple cells

    Feature: Drag to select multiple cells

    In Excel and other spreadsheet programs, including web-based such as google spreadsheet or handsontable tool - You click and drag to select multiple cells.

    Selecting multiple cells is possible already, by selecting a cell, holding shift, and selecting the finish cell. It is just about implementing the intuitive drag functionality.

    I might implement it myself if I'll find time on some weekend, but anyway it is here to document the feature.

    opened by snird 4
  • Accessing the instance of a Custom Component Cell

    Accessing the instance of a Custom Component Cell

    I'm rendering custom components for my cells, and I want to be able to access the instance of a custom component given row,col position.

    Is the structure of the code ready to achieve this? If not, any clues on how to do it?

    opened by c4b4d4 0
  • Event afteredit is called two times

    Event afteredit is called two times

    in angular the afteredit event when called to get the details shows me twice the same detail.

    This is the code

    App component HTML

    <revo-grid [source]="rows" [columns]="columns" theme="material" (afteredit)="onAfterEdit($event)">

    App Component Typescript

    onAfterEdit({ detail }) { console.log(detail) } }

    image
    opened by Jenvers 0
  • beforefocuslost event never fires (confirmed on multiple frameworks)

    beforefocuslost event never fires (confirmed on multiple frameworks)

    Describe the issue The API documentation lists an event beforefocuslost (https://revolist.github.io/revogrid/guide/api.html#events) that fires before cell focus is lost. I also see this event in the code in custom-element/revo-grid.js. However, this event never fires for some reason. I was able to reproduce this both with React and Svelte, so the issue has to be in the root repo.

    To Reproduce Each of these examples implements 2 events, Svelte implements beforeEdit (to use as control group to show that I'm using events correctly) and beforeFocusLost (to show that this event does not fire). The React example, similarly, implements afterEdit and beforeFocusLost. In both cases, the beforeEdit/afterEdit events DO fire, while beforeFocusLost does not.

    Svelte example: https://codesandbox.io/s/revogrid-svelte-legacy-forked-h101lq React example: https://codesandbox.io/s/bold-hill-cchvlf

    opened by atsepkov 0
  • Trigger on last row in focus after viewportscroll

    Trigger on last row in focus after viewportscroll

    I'd like to realize a trigger event when the last row of a grid is in focus. This is to add infinite scroll via my api. I researched in the docs but could not find a proper method. Only viewportscroll seemed appropriate. Is there any way to discover then the last row of the grid comes into the user's viewport?

    Thanks

    opened by donmb1 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v3.3.0)
  • v3.3.0(Oct 11, 2022)

    What's Changed

    • fix grouping (sorting order + collapsing) by @shatkovski in https://github.com/revolist/revogrid/pull/361

    Full Changelog: https://github.com/revolist/revogrid/compare/3.2.18...v3.3.0

    Source code(tar.gz)
    Source code(zip)
  • 3.2.18(Oct 5, 2022)

    What's Changed

    • custom filter by @JavaZWT in https://github.com/revolist/revogrid/pull/354
    • add custom group label rendering by @shatkovski in https://github.com/revolist/revogrid/pull/359

    New Contributors

    • @JavaZWT made their first contribution in https://github.com/revolist/revogrid/pull/354

    Full Changelog: https://github.com/revolist/revogrid/compare/v3.2.7...v3.2.8

    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(Aug 11, 2022)

    What's Changed

    • Update autoSizeColumn.ts by @sujeetpillai in https://github.com/revolist/revogrid/pull/309
    • Update read.me by @alinoil in https://github.com/revolist/revogrid/pull/329
    • Bump jsdom from 16.3.0 to 16.7.0 by @dependabot in https://github.com/revolist/revogrid/pull/330
    • Bump svelte from 3.31.2 to 3.49.0 by @dependabot in https://github.com/revolist/revogrid/pull/340

    New Contributors

    • @alinoil made their first contribution in https://github.com/revolist/revogrid/pull/329

    Full Changelog: https://github.com/revolist/revogrid/compare/3.1.8...v3.2.0

    Source code(tar.gz)
    Source code(zip)
  • 3.1.8(Jun 16, 2022)

    What's Changed

    • Bump async from 2.6.3 to 2.6.4 by @dependabot in https://github.com/revolist/revogrid/pull/311
    • fix boolean string attribute (stretch) by @shatkovski in https://github.com/revolist/revogrid/pull/326

    New Contributors

    • @shatkovski made their first contribution in https://github.com/revolist/revogrid/pull/326

    Full Changelog: https://github.com/revolist/revogrid/compare/3.1.6...3.1.8

    Source code(tar.gz)
    Source code(zip)
  • v3.1.1(Apr 12, 2022)

    What's Changed

    • Bump minimist from 1.2.5 to 1.2.6 by @dependabot in https://github.com/revolist/revogrid/pull/306
    • Fixed sorting for column grouping
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Mar 29, 2022)

    What's Changed

    • Multi Filtering improvement to current filter plugin by @islarky88 in https://github.com/revolist/revogrid/pull/302
    • Bump tmpl from 1.0.4 to 1.0.5 by @dependabot in https://github.com/revolist/revogrid/pull/288

    New Contributors

    • @islarky88 made their first contribution in https://github.com/revolist/revogrid/pull/302

    Full Changelog: https://github.com/revolist/revogrid/compare/v3.0.99...v3.1.0

    Multifiltering update Screen Shot 2022-03-29 at 12 19 50 PM

    Source code(tar.gz)
    Source code(zip)
  • v3.0.99(Mar 19, 2022)

    What's Changed

    • Improve filter plugin by @ThisIsRex in https://github.com/revolist/revogrid/pull/258
    • Bump tmpl from 1.0.4 to 1.0.5 by @dependabot in https://github.com/revolist/revogrid/pull/252
    • Add getSelectedRange() API by @wglas85 in https://github.com/revolist/revogrid/pull/263
    • stop closing cell during IME is composing by @drs-t0m0 in https://github.com/revolist/revogrid/pull/275
    • Bump ansi-regex from 5.0.0 to 5.0.1 by @dependabot in https://github.com/revolist/revogrid/pull/287
    • In a string comparison equals doesn't work by @sujeetpillai in https://github.com/revolist/revogrid/pull/300

    New Contributors

    • @ThisIsRex made their first contribution in https://github.com/revolist/revogrid/pull/258
    • @drs-t0m0 made their first contribution in https://github.com/revolist/revogrid/pull/275
    • @sujeetpillai made their first contribution in https://github.com/revolist/revogrid/pull/300

    Full Changelog: https://github.com/revolist/revogrid/compare/v3.0.98...v3.0.99

    Source code(tar.gz)
    Source code(zip)
  • v3.0.98(Oct 5, 2021)

  • v3.0.97(Jul 23, 2021)

  • v3.0.96(Jul 22, 2021)

  • v3.0.95(Jun 18, 2021)

  • v3.0.94(Jun 18, 2021)

  • v3.0.93(Jun 18, 2021)

  • v3.0.92(Jun 18, 2021)

    • Row header switched to component instead of tsx function;
    • Fixed memory loop for row headers template which was caused by incorrect data binding loop
    Source code(tar.gz)
    Source code(zip)
  • v3.0.7(Apr 12, 2021)

  • v3.0.61(Apr 11, 2021)

  • v3.0.6(Apr 11, 2021)

  • v3.0.51(Apr 6, 2021)

  • v3.0.5(Apr 6, 2021)

  • v3.0.3(Mar 29, 2021)

  • v3.0.0(Mar 26, 2021)

    Updates for version 3.0

    Version 3.0 introduces breaking changes:

    • Removed viewport component, this extra layer was redundant;
    • Changed classes to complex names in order to support bootstrap and other libraries:
      • row -> rgRow;
      • col -> rgCol;
      • data-cell -> rgCell;
      • data-header-cell -> rgHeaderCell;
    • All methods migrated to lowercase in order to support the modern approach of event naming. It means events name migration: afterEdit -> afteredit for all events. Check api for details;
    • Added pure esm modules support in order to use the grid in all modern frontend tooling like vitejs, parcel etc, now you can import custom-elements without lazy loading, just keep in mind you are responsible for polifills.
    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Mar 5, 2021)

    1. Added sorting none
    2. Initially revo-grid had structure as:
    <revo-grid>
      <viewport/>
      <some extra elements/>
    </revo-grid>
    

    The viewport was an additional layer of complexity. Initially introduced as a proxy. We are removing this layer to simplify things and bring direct order of store load and communication with internal components.

    1. #188 fix
    Source code(tar.gz)
    Source code(zip)
Owner
Revolist
We are focusing in software development where we can encounter some challenge to get through.
Revolist
Powerful virtual data grid smartsheet with advanced customization

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

null 0 May 30, 2021
A powerful flexbox grid system for Vue.js 2.x, built with inline-styles

vue-grid A powerful flexbox grid system for Vue.js 2.x, built with inline-styles Installation npm install @liqueflies/vue-grid --save # or yarn

Lorenzo Girardi 24 May 28, 2022
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...

vue-easytable English | 中文 Introduction Based on vue2.x flexible table components. v2.0 New Version Complete rewriting of version 1.0. Based on JSX sy

null 3.1k Jan 3, 2023
Spreadsheet data grid component. Handles enormous data processing.

Powerful data grid component built on top of RevoGrid. Millions of cells and thousands columns easy and efficiently. Demo and API • Key Features • How

Revolist 158 Dec 28, 2022
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

Module SonarCloud Status ag-grid-community ag-grid-enterprise ag-Grid ag-Grid is a fully-featured and highly customizable JavaScript data grid. It del

ag-Grid 9.5k Dec 30, 2022
Vue Grid Responsive - Responsive grid system based on Bootstrap for Vue

Responsive grid system based on Bootstrap for Vue

André Lins 27 Sep 11, 2022
Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

Only Vue 3 for now! This plugin includes 3 global components: simple-grid-container,simple-layout-container and simple-grid-item,that will help you to build excellent layout for your app.

Roman Harmyder 2 Dec 7, 2021
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.

Handsontable 17.4k Jan 1, 2023
Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel

Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel. It provides easy data binding, data validation, filtering, sortin

39488750 0 Nov 21, 2019
An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc

Vue-good-table An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination and much mor

null 2k Jan 2, 2023
Simple yet powerful Data Table for Vue with vanilla HTML structure

VueJs Smart Table Vue Smart Table was created out of the need for a simple highly customizable data table plugin that could take advantage of Vue's sl

Hector Romero 196 Jan 7, 2023
An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination

Vue-good-table An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination and much mor

Obaid Samadian 0 May 13, 2019
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.

This is the official wrapper of Handsontable data grid for Vue. It provides data binding, data validation, filtering, sorting and more. Installation U

Handsontable 750 Jan 4, 2023
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x

Introduction vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x. The data table component in Vuetify 3 hasn't

HC 222 Dec 30, 2022
A flexible grid component for Vue.js

vue-grid A flexible grid component for Vue.js vue-grid is designed to be an advanced Vue.js grid component allowing for fast loading and rendering of

Dave Williams 112 Nov 24, 2022
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 187 Jan 2, 2023
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

Gao Qi(高琦) 861 Dec 19, 2022
A short and powerful infinite scroll list library for vue, with zero dependencies 💪

A short and powerful infinite scroll list library for vue, with zero dependencies ?? Tiny & dependency free – Only 3kb gzipped Render m

腾讯TNTWeb前端团队 138 Jan 4, 2023
Vue.js 2 grid components

Vue 3 package is now available for subscribers The package is stored on the vue3 branch. Please see instructions here There are almost no breaking cha

Matanya 1.5k Dec 29, 2022