cscan / vue3-excel-editor Goto Github PK

let rec = {
        id: 1,
        headerId: 1,
        itemNumber: 1,
        description: "description",
 }
this.jsondata.splice(0, 0, rec);

I try modified v-model data on runtime but it won't effect the grid both appending or removing

I also try $refs.newRecord and $ref.deleteRecords(0) both won't work either

I need to use v-if on the component then switch it's visibility to make it work like this

this.shouldShowDataGrid = false;
await setTimeout(async () => {
        this.shouldShowDataGrid = true;
}, 10);

currency input feature can be added, it would be great

Want an example custom column header

My code

function cellStyle(content) { if(content !== null && content === "BREAK45") { objectColor.color = "red"; return content; } else { objectColor.color = "black"; return content; } }

All columns of row 5 that have the string "BREAK45" should be colored red, but they're not.

Any suggestions?

谢谢.

There is an add column function but there is no delete column function.
Being able to delete columns would be cool.

when i click the space in the cell ,how to maintain the content of the cell to edit?

If we were to use CDN for vue3-excel-editor, what should be the cdn link and also what could be the basic idea and approach for the same.

I am trying to use formulas in the sheet. To do this I used to-text prop then executed the input if it starts with = symbol. Now I want to show the formula when the cell is double clicked (in the edit mode). Is there a way to do this?

Hello. Excellent component! Congratulations.

But a very nice feature are:

Custom background / font color to fixed headers [ A | B | C ]. Not only the default gray color
Custom background / font color to fixed rows 1, 2, 3. Not only the default gray color.
Custom background / font color to cells. Not only the default white color.

Something similar to dark/light theme. To adapt the color scheme of the component to existent design.

Thanks!!!

我看现在内置的有select datatime 等，我们项目里面有需要 有个 下拉表格。 类似 aggird 和 hansontable 里面的 下拉表格。
1、下拉表格支持的功能， 支持上下箭头选择行。
2、支持回车选中当前行，并填充数据到弹出单元格的行内。
3、自定义下拉表格工具栏。
4、其他功能同当前table。

Allow html in cell via :html props

drag and drop row and column feature needed

I am adding a local source of data for the Excel editor like this:

<script setup lang="ts">
import { ref } from 'vue'
const jsondata = ref([
  {
    "name": "John Doe",
    "date": "01/10/2023",
    "wages": "$ 1000.00"
  },
  {
    "name": "Jack Smith",
    "date": "01/12/2023",
    "wages": "$ 2000.00"
  }])
</script>
<template>
    <vue-excel-editor no-footer
    v-model="jsondata">
          <vue-excel-column 
          field="name" 
          label="Name"
          type="string" 
          width="300px" />
          <vue-excel-column 
          field="date"
          label="Date"
          type="date"
          width="150px" />
          <vue-excel-column 
          field="wages"
          label="Wages"
          type="number" 
          width="150px" />
     </vue-excel-editor>
</template>

but the grid shows a "no record" message, if I click on one of the table headers, then it loads the data

Add field type autocomplete with url and query parameter props. it would be greate feature

Hello,

It is not possible to scroll down when using the phone. The horizontal scroll works perfectly (via finger touch), but the same functionality does not work for virtual scrolling.

It will be a bliss if the lib has a delete column function

How can i change the background color of this? trying using tailwind css class but doesn't work only text colors

May I ask if region selection is supported？

Hello, everybody! Is it possible to add subtitles in table like on pic?

I am using Vue3 composition API, and I made a button handler to delete selected records. The action partially works. The record(s) are removed from the data model, the 'delete' event is called, and exporting the data afterwards does not include the deleted rows.

However: the rows are NOT visually removed from the table. They still appear, and can be selected and edited. No changes are tracked on those edits, and the records can't be deleted again. Tested with just deleteRecord() and had the same problem.

   const grid = ref<any>(null)
   
   const DeleteRecord = () => {
        grid.value.deleteSelectedRecords()
    }

For deleting row, can you add "show-delete-col" property with confirm options

Can i disable sorting?

Excuse me, has this document not been updated to vue3?, Is the object obtained by the method still pointing to this

(newIfBottom is true)

Table stops creating new rows when I click enter after number of rows in a page + 1. If number of rows in a page is 25 after the 26th row it stops creating new rows. When you import an excel it imports without a problem. But the main problem remains. Let say excel table has 56 rows. After 57th row you can not create new row simply by clicking enter or down arrow.

I think the problem is in the moveSouth function (line 2173 in VueExcelEditor.vue). If you change inside of the if statement from this.currentRowPos + 1 >= this.table.length to this.currentRowPos+1 >= this.pageSize && this.pageBottom >= this.table.length it works. Can you please review and change it?

is there any function for deleting a selected row?

Selecting a section or multiple cells do not work

I searched in the code and there's no existing code for free-select

Description:
The current version of the sheetjs dependency used in this package is vulnerable to a Prototype Pollution attack (CVE-2023-30533). This vulnerability can be exploited to potentially compromise the application's security.

Details:

• Vulnerable dependency: sheetjs (version < 0.19.3)
• Vulnerability details: https://git.sheetjs.com/sheetjs/sheetjs/src/branch/master/CHANGELOG.md#v0193 (Fixed "Prototype Pollution" vulnerability (CVE-2023-30533))
• Updated package source: https://git.sheetjs.com/SheetJS/sheetjs# (This repository contains the fixed version 0.19.3) [docs: https://docs.sheetjs.com/docs/getting-started/installation/frameworks#legacy-endpoints ]

after executing deleteSelectedRecords() or deleteRecord(0) the table display is not updated without forcing a call to refresh()

Trying to export a large excel sheet with over 65k records and it freezes with error "Uncaught RangeError: Invalid array length". Could you please see if there is a workaround?

Hi
Could you please explain how can I use nested JSON as a column header field?

for example

{
...
car:[{car1: red},{car2: blue}]
....
}
 <vue-excel-column field="car[0].car1">
 <vue-excel-column field="car[1].car2">

Thank you

Hi could you provide declaration file because i am using vue3 with typescript

https://vuejs.org/api/sfc-script-setup.html
i'm using this new approach, but now how do I access the grid.

Basic column sorting does not work anymore on the vue3 version

I can provide a codepen if necessary

Thanks for the great work, this plugin is awesome!

can i or how to paste multi cells from excel?

When data is modified, the selected data is also changed

<vue-excel-editor 
    ref="exGrid" 
    v-model="jsondata" 
    height="300px" 
    @select="gridSelect" 
    @update="gridUpdate"
  >
    <vue-excel-column field="user"   label="User ID"       type="string" width="150px" />
    <vue-excel-column field="name"   label="Name"          type="string" width="150px" />
    <vue-excel-column field="phone"  label="Contact"       type="string" width="150px" />
    <vue-excel-column field="gender" label="Gender"        type="select" width="100px" :options="['F','M','U']" />
    <vue-excel-column field="age"    label="Age"           type="number" width="100px" />
    <vue-excel-column field="birth"  label="Date Of Birth" type="date"   width="150px" />
</vue-excel-editor>

file VueExcelEditor.vue line 1921

throw new Error(VueExcelEdutor: [row=${i+1}, val=${val}] + field.mandatory)

probably a typo VueExcelEdutor == should be VueExcelEditor

Hey Guys!

is it possible to export a excel file with specific columns of the table?

when i input too many data , will appear a scroller out the vue3-excel-editor.

with XLSX we can read uploaded file but i can't reproduce it.

Usually we find this on the web:

Inside the Template vue

<label>Files
  <!-- <input type="file" id="files" ref="files" multiple onChange={this.handleChange} /> -->
  <input type="file" @change="onChange" />
</label>
<div v-for="(file, key) in files" class="file-listing">{{ file.name }} <span class="remove-file" v-on:click="removeFile( key )">Remove</span></div>
    <button v-on:click="addFiles()">Add Files</button>

// import XLSX from 'xlsx';  // will make a error
// Changed for:
import { read, utils, writeFile } from 'xlsx';
// but XLSX is still undefined

// and something like that with vue:
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      alert(this.file)
      if (this.file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          /* Parse data */
          const bstr = e.target.result;
          const wb = XLSX.read(bstr, { type: 'binary' });
          /* Get first worksheet */
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          /* Convert array of arrays */
          const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
        }

        reader.readAsBinaryString(this.file);
      }
    },


- NO 2:
If we uploaded a file with success, 
automatically load the hosted file when reloading the web page.

but if i remove the import XLSX from 'xlsx'; we obiously get:
Uncaught ReferenceError: XLSX is not defined.
I can i load, write and read the excel file?