Excel Editor for VUE 3

import { createApp } from 'vue'
import App from './App.vue'
import VueExcelEditor from 'vue3-excel-editor'

const app = createApp(App)
app.use(VueExcelEditor)
...

export default {
    name: 'app',
    data: {
        jsondata: [
            {user: 'hc', name: 'Harry Cole',    phone: '1-415-2345678', gender: 'M', age: 25, birth: '1997-07-01'},
            {user: 'sm', name: 'Simon Minolta', phone: '1-123-7675682', gender: 'M', age: 20, birth: '1999-11-12'},
            {user: 'ra', name: 'Raymond Atom',  phone: '1-456-9981212', gender: 'M', age: 19, birth: '2000-06-11'},
            {user: 'ag', name: 'Mary George',   phone: '1-556-1245684', gender: 'F', age: 22, birth: '2002-08-01'},
            {user: 'kl', name: 'Kenny Linus',   phone: '1-891-2345685', gender: 'M', age: 29, birth: '1990-09-01'}
        ]
    }
}

methods: {
    onDelete (records) {
      records = records.map(rec => ['del', rec.keys.join()])
      redis.multi(records).exec()
    },
    onUpdate (records) {
      records = records.map(rec => ['hset', rec.keys.join(), rec.name, rec.newVal])
      redis.multi(records).exec()
    }
}

methods: {
    newRecord () {
        const rec = {
            user: 'nm',
            name: 'Norman Morris',
            phone: '1-222-3333333',
            gender: 'M',
            age: 28,
            birth: '1993-05-16'
        }
        // Call this to new record
        this.$refs.grid.newRecord(rec)
    }
}

methods: {
    delRecord () {
        this.$refs.grid.deleteRecord(0) // delete the 1st record: Harry Cole
    }
}

    this.$refs.grid.fields.forEach((field) => {
        if (field.name === 'col23') field.label = 'Product'
        if (field.label === '') field.label = '(' + field.name + ')'
    })
    this.$forceUpdate()  // remember to call vue update to reflesh the display

    this.$refs.grid.fields.forEach((field) => {
        if (field.name === 'col23') field.invisible = false
    })
    this.$forceUpdate()  // remember to call vue update to reflesh the display

methods: {
    exportAsExcel () {
        const format = 'xlsx'
        const exportSelectedOnly = true
        const filename = 'test'
        this.$refs.grid.exportTable(format, exportSelectedOnly, filename)
    }
    exportAsCsv () {
        const format = 'csv'
        const exportSelectedOnly = true
        const filename = 'test'
        this.$refs.grid.exportTable(format, exportSelectedOnly, filename)
    }
}

methods: {
    onSelect (selectedRows) {
      console.log(selectedRows)
    }
}

data () {
    return {
        count: 0
    }
}
computed: {
    showDeleteAction () {
        return this.count > 0  // Show if any records selected
    },
    showSendEmailInvitationAction () {
        return this.count === 1  // Show if single record is selected
    },
    showSendBirthdayGreetingAction () {
        // Show only if any selected people birthday matched today
        if (this.count > 0) {
            return this.$refs.grid.getSelectedRecords().filter(item => item.birth === today).length > 0
        else
            return false
    }
}

methods: {
    onBeforeNameChange (...args) {
        console.log(...args)  // show all the arguments: newVal, oldVal, oldRow, field
    },
    onBeforePhoneChange (newVal) {
        // This example demonstrate how to ensure the uniqueness of the phone number
        if (this.jsondata.findIndex(row => row.phone === newVal) >= 0)
            return false  // return false to reject the update
    },
    onBeforeBirthChange (newVal, oldVal, row) {
        row.age = moment().diff(newVal, 'years')  // calculate the age if birth is changed
    }
}

methods: {
    onBeforePhoneChange (newVal) {
        return new Promise((done) => {
            axios.post('checkPhoneNumber', {
                    phone: newVal
                })
                .then(done(true))
                .catch((e) => {
                    console.error(e)
                    done(false)
                })
        })
    }
}

const moment = require('moment')

methods: {
    sortingBirth (a, b) {
        return moment(a).diff(moment(b), 'days')
    }
}

methods: {
    validPhoneNum (content, oldContent, record, field) {
        if (content === '') return 'Mandatory field'
        if (!/^[0-9]{1}-[0-9]{3}-[0-9]{7}$/.test(content)) return 'Invalid Phone Number'
        return '' // return empty string if there is no error
    }
}

methods: {
    validWholeRecord (content, oldContent, record, field) {
        if (record.age !== moment().diff(record.birth, 'years')) return 'The age and birth do not match'
        return '' // return empty string if there is no error
    }
}

methods: {
    logValidationError (error, row, field) {
        // For row validation, the field argument will be null value
        console.log(error, row, field)
    }
}

methods: {
    // Hold Alt Key and click on any name, program will route to the page "User Profile"
    routeToUserFunc (content, record) {
        this.$router.push(`/user/${record.user}`)
    },
    showLinkOrString(record) {
        return record.gender === 'M' // Only gender M show the link
    }
}

methods: {
    phoneToText (val) {
        // convert number to hyphenated i.e. 14152345678 => 1-415-2345678
        return val.replace(/^(.)(...)(.*)$/, '$1-$2-$3')
    },
    phoneToVal (text) {
        // convert hyphenated text to number i.e. 1-415-2345678 => 14152345678
        return text.replace(/-/g, '')
    },
}

methods: {
    badgeColor (rec) {
        return 'blue'
    }
}

methods: {
    doAction (rec) {
        if (rec.do === 'Edit')
            // do Edit process
        else if (rec.do === 'Remove')
            // do Remove process
    }
}

  jsondata = [
    {region: 'US', area: 'AZ', user: "hc", name: "Harry Cole", phone: "1-415-2345678", gender: "M", age: 25, birth: "1997-07-01"},
    {region: 'US', area: 'AZ', user: "sm", name: "Simon Minolta", phone: "1-123-7675682", gender: "M", age: 25, birth: "1999-11-12"},
    {region: 'US', area: 'CL', user: "ra", name: "Rachael Amy", phone: "1-456-9981212", gender: "F", age: 19, birth: "2000-06-11"},
    {region: 'US', area: 'CL', user: "ag", name: "Mary George", phone: "1-556-1245684", gender: "F", age: 19, birth: "2002-08-01"},
    {region: 'CN', area: 'GZ', user: "kl", name: "Kenny Linus", phone: "1-891-2345685", gender: "F", age: 29, birth: "1990-09-01"}
  ])

data: {
    myLabels = {
        footerLeft: (top, bottom, total) => `Record ${top} to ${bottom} of ${total}`,
        first: 'First',
        previous: 'Previous',
        next: 'Next',
        last: 'Last',
        footerRight: {
            selected: 'Selected:',
            filtered: 'Filtered:',
            loaded: 'Loaded:'
        },
        processing: 'Processing',
        tableSetting: 'Table Setting',
        exportExcel: 'Export Excel',
        importExcel: 'Import Excel',
        back: 'Back',
        reset: 'Default',
        sortingAndFiltering: 'Sorting And Filtering',
        sortAscending: 'Sort Ascending',
        sortDescending: 'Sort Descending',
        near: '≒ Near',
        exactMatch: '= Exact Match',
        notMatch: '≠ Not Match',
        greaterThan: '> Greater Than',
        greaterThanOrEqualTo: '≥ Greater Than or Equal To',
        lessThan: '< Less Than',
        lessThanOrEqualTo: '≤ Less Than Or Equal To',
        regularExpression: '~ Regular Expression',
        customFilter: 'Custom Filter',
        listFirstNValuesOnly: n => `List first ${n} values only`,
        apply: 'Apply',
        noRecordIsRead: 'No record is read',
        readonlyColumnDetected: 'Readonly column detected',
        columnHasValidationError: (name, err) => `Column ${name} has validation error: ${err}`,
        noMatchedColumnName: 'No matched column name',
        invalidInputValue: 'Invalid input value',
        missingKeyColumn: 'Missing key column',
        noRecordIndicator: 'No record'
    }
}

data: {
    myLabels = {
        footerLeft: (top, bottom) => `纪录 ${top} 至 ${bottom}`,
        first: '头页',
        previous: '上一页',
        next: '下一页',
        last: '尾页',
        footerRight: {
          selected: '选择：',
          filtered: '过滤：',
          loaded: '载入：'
        },
        processing: '工作中',
        tableSetting: '表格设定',
        exportExcel: '汇出 Excel',
        importExcel: '汇入 Excel',
        back: '关',
        reset: '预设',
        sortingAndFiltering: '排序及过滤',
        sortAscending: '小至大排序',
        sortDescending: '大至小排序',
        near: '≒ 接近',
        exactMatch: '= 等于',
        notMatch: '≠ 不等于',
        greaterThan: '> 大于',
        greaterThanOrEqualTo: '≥ 大于或等于',
        lessThan: '< 少于',
        lessThanOrEqualTo: '≤ 少于或等于',
        regularExpression: '~ 正规表示式',
        customFilter: '过滤内容',
        listFirstNValuesOnly: n => `只列出 ${n} 项`,
        apply: '应用',
        noRecordIsRead: '没有纪录被读取',
        readonlyColumnDetected: '不可更新唯读纪录',
        columnHasValidationError: (name, err) => `纪录栏位 ${name} 发生核实错误: ${err}`,
        noMatchedColumnName: '没有能配对之栏位',
        invalidInputValue: '输入错误内容',
        missingKeyColumn: '找不到关键栏位',
        noRecordIndicator: '沒有纪录'
    }
}