vue2-excel-grid

Vue 2.6.14 uchun Excel-uslubidagi Grid komponenti — virtual scrolling, freeze panes, merge cells, export/import va boshqa 12 ta funksional bilan.

O'rnatish

npm install vue2-excel-grid

Asosiy ishlatish

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

Vue.use(Vue2ExcelGrid)

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

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

Asosiy imkoniyatlar

• Virtual scrolling (50 000+ qator)
• Freeze panes, merge cells, grouping/outline
• Copy/Paste + Paste Special (Excel-style tiling)
• Fill handle (raqam, sana, hafta kuni, oy ketma-ketligi)
• Drag-and-drop qatorlar
• Excel export/import (.xlsx, .xls, .csv, nested headers)
• Undo/Redo (Ctrl+Z / Ctrl+Y)
• Select (dropdown) ustun tipi — type: 'select' bilan
• Tree select (ierarxik dropdown) — type: 'treeSelect', children orqali, maydon nomlari konfiguratsiya qilinadi
• Dinamik cell editability — cellEditable prop yoki col.editable funksiyasi
• i18n: en | ru | uz | uz-Cyrl
• Ctrl+click row header — bir-biriga tutashmaydigan qatorlarni tanlash
• Footer (jami) qatori — col.showTotal: true bo'lsa, son ustunlar uchun avtomatik yig'indi ko'rsatiladi
• Custom cell slots — #cell-{key} (ko'rsatish), #edit-{key} (tahrirlash), #header-{key} (sarlavha)
• size prop — 'small' | 'middle' | 'large': qator balandligi, shrift o'lchami va padding birga sozlanadi
• autoWidth prop — barcha ustunlar kengligini mazmun uzunligiga avtomatik moslaydi
• transitionEnabled prop — qatorlar kirish/chiqishda animatsiya; scroll paytida avtomatik o'chadi
• col.onSelect callback — select/treeSelect ustunlarda qiymat tanlanganida ishga tushadi
• col.enableSearch — select/treeSelect dropdownida qidiruv maydoni; treeSelect da barcha darajalar bo'yicha qidiradi
• Toolbar — toolbar prop: Undo/Redo, Export/Import, Lock (butun gridni qulflash) va Fullscreen tugmalari, custom tugmalar uchun toolbarButtons prop yoki #toolbar-extra slot

Hujjatlar

To'liq hujjatlar: 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
• Excel Export
• Excel Import
• Toolbar
• API Reference

Demo

npm run demo

Testlar

npm run test:unit

Litsenziya

MIT