Powerful Vue 3 Data Grid component built on top of RevoGrid.

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

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

⚠️ Note: Repository Notice: This repo is read-only. Create new issues at the revogrid repo

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

Usage Vue 3

[!TIP] For Vue 2, use this repo

With NPM:

1npm i @revolist/vue3-datagrid --save;

With Yarn:

1yarn add @revolist/vue3-datagrid;

1// App.vue
2<template>
3    <Grid
4      :editors="gridEditors"
5      :source="source"
6      :columns="columns"
7      @cell-custom-action="testCustomCellAction"
8      @cell-click="testAction"
9    />
10</template>
11
12<script lang="ts" setup>
13/**
14 * This is an example of a Vue3 component using Revogrid
15 */
16import { provide, readonly, ref } from 'vue';
17/**
18 * Import Revogrid, Renderer and Editor for Vue
19 */
20import Grid, { VGridVueEditor, VGridVueTemplate, Editors } from '@revolist/vue3-datagrid';
21
22import Editor from './Editor.vue';
23import Cell from './Cell.vue';
24
25const count = ref(0)
26provide('read-only-count', readonly(count));
27
28const MY_EDITOR = 'custom-editor';
29
30// Vue column editor register
31const gridEditors: Editors = { [MY_EDITOR]: VGridVueEditor(Editor) };
32
33// Define columns
34const columns = [
35  {
36    prop: 'name',
37    name: 'First',
38    // editor type
39    editor: MY_EDITOR,
40    // vue cell component register
41    cellTemplate: VGridVueTemplate(Cell),
42  },
43  {
44    prop: 'details',
45    name: 'Second',
46  },
47];
48// Define source
49const source = [
50  {
51    name: '1',
52    details: 'Item 1',
53  },
54  {
55    name: '2',
56    details: 'Item 2',
57  },
58];
59
60// For testing events
61function testCustomCellAction(e: CustomEvent) {
62  console.log('Custom cell action', e);
63}
64function testAction(e: CustomEvent) {
65  console.log('Editor action', e);
66}
67</script>

1// Cell.vue
2<template>
3  <div ref="cell" @click="customCellClickEvent">{{ rowIndex }}</div>
4</template>
5
6<script lang="ts" setup>
7import { defineProps, ref, inject } from 'vue';
8import type { ColumnDataSchemaModel } from '@revolist/vue3-datagrid';
9
10const props = defineProps<ColumnDataSchemaModel>();
11const cell = ref<HTMLElement>();
12
13const message = inject('sample');
14function customCellClickEvent() {
15  console.log('Custom cell click > Injected message:', message);
16  const event = new CustomEvent('cell-custom-action', {
17      bubbles: true,
18      detail: { row: props.model },
19  });
20  cell.value?.dispatchEvent(event);
21}
22</script>

1// Editor.vue
2<template>
3  <button @click="onBtn">Finish edit</button>
4</template>
5<script lang="ts">
6import { defineComponent } from 'vue';
7export default defineComponent({
8  props: ['rowIndex', 'model', 'save', 'close'],
9  methods: {
10    onBtn(e: MouseEvent) {
11      // create and dispatch event
12      const event = new CustomEvent('cell', {
13        bubbles: true,
14        detail: { row: this.model },
15      });
16      this.$el.dispatchEvent(event);
17
18      e.stopPropagation();
19      if (typeof this.close === 'function') {
20        (this.close as () => void)();
21      }
22    },
23  },
24});
25</script>
26

Example and guide

• Vue 3 and Vue 2
• React
• Angular
• Svelte
• JavaScript

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?

  • Check our Roadmap

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.

Become a Sponsor

If you or your company would like to support the ongoing development of RevoGrid, please consider 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

---