RevoGrid is a powerful, reactive, performant, spreadsheet-like data grid component for Vue.js 3 apps.
Key Features:
- Virtual scrolling.
- Data sorting.
- Data filtering.
- Import & export.
- Themeable.
- Column/Cell manipulation.
- Drag and drop.
- Copy/paste from Excel, Google Sheets or any other sheet
Basic Usage:
1. Import and register the component.
import VGrid from "@revolist/vue-datagrid";
export default { // ... components: { VGrid, }, // ... };
2. Add the grid component to the template.
<template> <div id="app"> <v-grid v-if="grid === 1" key="1" :source="rows" :columns="columns" ></v-grid> </div> </template>
3. Define your own column & row data.
export default { name: "App", data() { return { columns: [{ prop: "name", name: "Name", }, { prop: "details", name: "Email", }], rows: [{ name: "1", details: "Item 1", }] }; }, components: { VGrid, }, };
Preview:
Changelog:
v3.5.2 (03/24/2023)
- Update
v3.5.1 (03/23/2023)
- Bugfixes
v3.5.0 (03/21/2023)
- Updated version and advance range selection
v3.4.1 (02/20/2023)
- Updates in plugins and column override
v3.3.1 (01/19/2023)
- Updated package
v3.3.0 (10/11/2022)
- Added sorting and other changes
v3.2.17 (09/06/2022)
- Extended Vite support.
- Typings included
- Fixed issue with build from 3.2.0
v3.2.0 (08/11/2022)
- Update
v3.1.8 (06/16/2022)
- Minor updates around properties
v3.1.6 (05/11/2022)
- update
v3.1.5 (04/12/2022)
- Version updated to load from peers
- Bugfix
v3.1.0 (03/29/2022)
- Multi Filtering improvement to current filter plugin
v3.0.98 (10/06/2021)
- fixed filter problem
v3.0.97 (07/24/2021)
- Filtering issue and sorting update
v3.0.91 (06/17/2021)
- improved props to different cases support for vue
v3.0.9 (04/21/2021)
- Sorting event updated
v3.0.8 (04/11/2021)
- Filter fix
v3.0.61 (04/11/2021)
- Stretch by default
- Edit fix
- Mobile scrolling improvement
v3.0.53 (04/08/2021)
- Minor plugin update for stretch
v3.0.51 (04/06/2021)
- Stretch with scroll support
v3.0.3 (03/29/2021)
- Focus issue fixed
v3.0.2 (03/26/2021)
- Removed viewport component, this extra layer was redundant
- Changed classes to complex names in order to support bootstrap and other libraries
- 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.
- 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
Download Details:
Author: revolist
Live Demo: https://revolist.github.io/revogrid/demo/
Download Link: https://github.com/revolist/vue-datagrid/archive/main.zip
Official Website: https://github.com/revolist/vue-datagrid
Install & Download:
# NPM
$ npm i @revolist/vue-datagrid