# 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](https://gitlab.com/fl.raimberdiyev/vue2-excel-grid)

## Install

```bash
npm install vue2-excel-grid
```

## Basic usage

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

Vue.use(Vue2ExcelGrid)
```

```vue
<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/](./docs/)

- [Getting Started](./docs/getting-started.md)
- [Cell Selection](./docs/cell-selection.md)
- [Keyboard Navigation](./docs/keyboard-navigation.md)
- [Fill Handle](./docs/fill-handle.md)
- [Copy/Paste](./docs/copy-paste.md)
- [Resize & Hide](./docs/resize-hide.md)
- [Grouping](./docs/grouping.md)
- [Merge Cells](./docs/merge-cells.md)
- [Drag and Drop](./docs/drag-and-drop.md)
- [Complex Headers & Slots](./docs/complex-headers-and-slots.md)
- [Select Column](./docs/select-column.md)
- [Cell Editability](./docs/cell-editability.md)
- [Input Mask](./docs/input-mask.md)
- [Excel Export](./docs/excel-export.md)
- [Excel Import](./docs/excel-import.md)
- [Toolbar](./docs/toolbar.md)
- [Local Sync](./docs/local-sync.md)
- [API Reference](./docs/api-reference.md)

## Demo

```bash
npm run demo
```

## Tests

```bash
npm run test:unit
```

## License

MIT