vue2-excel-grid

Excel-style grid component for Vue 2.6.14 — virtual scrolling, freeze panes, merge cells, export/import, and more.

Repository: https://gitlab.com/fl.raimberdiyev/vue2-excel-grid

Install

npm install vue2-excel-grid

Basic usage

import Vue from 'vue'
import Vue2ExcelGrid from 'vue2-excel-grid'

Vue.use(Vue2ExcelGrid)

<template>
  <excel-grid
    v-model="myData"
    :columns="columns"
    :height="400"
    locale="en"
  />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'id', title: '#', width: 50 },
        { key: 'name', title: 'Name', width: 150 },
        { key: 'city', title: 'City', width: 120 }
      ],
      myData: [
        { id: 1, name: 'Ali', city: 'Tashkent' },
        { id: 2, name: 'Bobur', city: 'Samarkand' }
      ]
    }
  }
}
</script>

Key features

• Virtual scrolling (50,000+ rows)
• Freeze panes, merge cells, grouping/outline
• Copy/Paste + Paste Special (Excel-style tiling), optional pasteGrowsRows to auto-create missing rows
• Fill handle (number, date, weekday, month sequences)
• Drag-and-drop rows and columns
• Excel export/import (.xlsx, .xls, .csv, nested headers)
• Undo/Redo (Ctrl+Z / Ctrl+Y)
• Select (dropdown) column type — type: 'select'
• Tree select (hierarchical dropdown) — type: 'treeSelect', via children, with configurable field names
• Dynamic cell editability — cellEditable prop or col.editable function
• i18n: en | ru | uz | uz-Cyrl
• Ctrl+click on a row header — select non-contiguous rows
• Footer (total) row — col.showTotal: true shows an automatic sum for numeric columns
• Custom cell slots — #cell-{key} (display), #edit-{key} (editing), #header-{key} (header)
• size prop — 'small' | 'middle' | 'large': row height, font size, and padding tuned together
• autoWidth prop — auto-fits every column's width to its content
• widthMode prop — 'full' (fill the host, default) | 'auto' (hug the columns, max-content)
• columns[].width accepts any CSS width value — px number, '150px', '20%' (responsive to container resize until manually resized), '10em', etc. — not just a raw px number
• columns[].mask — input mask for editable text cells (engine adapted from maska, vendored — no extra runtime dependency), applied while typing, pasting, and filling
• rowVisible prop — (row, rowIndex) => boolean for host-defined row hiding (status filters, parity, etc.), unioned with hiddenRows/collapsed groups/filterRow
• transitionEnabled prop — row enter/leave animation; automatically disabled during scroll
• col.onSelect callback — fires when a value is picked in a select/treeSelect column
• col.enableSearch — search box in the select/treeSelect dropdown; treeSelect searches every level
• Toolbar — toolbar prop: Undo/Redo, Export/Import, theme picker, size switcher, Lock (read-only mode), and Fullscreen; add custom buttons via toolbarButtons or the #toolbar-extra slot
• localSyncKey prop — saves v-model data as a local IndexedDB version history when the page is being left (tab hidden/closed, not per-edit), deduping identical content via a Web Worker-computed hash; a toolbar button + modal lists versions with a full preview and Save/Restore/Delete, plus a full CRUD ref API (saveLocalVersionNow, listLocalVersions, getLocalVersion, restoreLocalVersion, deleteLocalVersion) for building your own custom UI

Documentation

Full documentation: docs/

• Getting Started
• Cell Selection
• Keyboard Navigation
• Fill Handle
• Copy/Paste
• Resize & Hide
• Grouping
• Merge Cells
• Drag and Drop
• Complex Headers & Slots
• Select Column
• Cell Editability
• Input Mask
• Excel Export
• Excel Import
• Toolbar
• Local Sync
• API Reference

Demo

npm run demo

Tests

npm run test:unit

License

MIT