# au-table-editor
table editor based on vue with cell merging  
（have nothing to do with package "au-table"）

![preview](https://gitee.com/au114514/au-table-editor/raw/develop/preview.png)

1. muti-cell merging  
2. mobile-friendly
3. undo/redo
4. fully-typed
5. unit test

**Notice: This is a 【VUE Component】, and can only be used in vue projects**

*Noob work. Please use with caution*  

## Usage
```
npm install @aurouscia/au-table-editor

import { AuTableEditor, AuTableData } from '@aurouscia/au-table-editor'   
//"AuTableData" is the editor's data type, import when writing typescript  
import '@aurouscia/au-table-editor/style.css'  
//import its styles

//The component must be suppressed by v-if before data is ready
<AuTableEditor v-if="loadComplete" :table-data="【PASS IN INITIAL DATA】" @save="【SAVE EDITED DATA AND RETURN STATUS】">
</AuTableEditor>

<!--see: src/DemoParent.vue in source code-->
```
1. To save the edited data permanently, you need to setup a backend and write some code to save the data.  
2. To control its size, use a non-position:static element as its parent.  
3. Be sure to use data provided by `@save` when saving. Do not use the passed-in object, for it can be inconsistent with status inside the editor.
4. To remove the footer, pass ```:no-ads="true"``` property to the component.
## Demo
Want to try it yourself?
```
git clone https://gitee.com/au114514/au-table-editor  
npm install  
npm run dev
```
PS: I'm not sure if this git host can be reached outside the great wall

## data format
if using typescript, write ```import {AuTableData} ```
```
{
    id:0,name:"testTable", 
    cells: 
    [
        ["表头","","","",""],
        ["1A","1B","1C","1D","1E"],["2A","2B","2C","2D","2E"],["3A","3B","3C","3D","3E"],
        ["4A","4B","4C","4D","4E"],["5A","5B","5C","5D","5E"],["6A","6B","6C","6D","6E"],
        ["7A","7B","7C","7D","7E"],["8A","8B","8C","8D","8E"],["9A","9B","9C","9D","9E"],
    ],
    merges:[{row:0,col:0,right:4,down:0}] //position and size of merging groups
}
```

## .net SDK
nuget：Aurouscia.TableEditor.Core  
(only type definitions and xlsx import/export utils, need further developing)