cscan / vue-excel-editor Goto Github PK

First of all, thanks for the awesome component.

I found out a problem when I changing the readonly props at runtime in vue-excel-column component, it won't take effect.

It only take the value that was initially set during render/mounted. There are no refresh method in the component to refresh the component. I have to do manual reload using v-if.

Hope the author can look into this small bug.

I am new to this Plugin. I could not update(two waybinding) the header label in JSON. Basically what i want is i just give a blank excel sheet for uset to enter and change values as per his needs.So i am loading a blank excel sheet with two rows just like

<vue-excel-editor v-model="defaultJson" > <vue-excel-column v-for="(col,index) in defaultJson" :key="index" :field="'col' + (index+1)" :label="'col' + (index+1)"/> </vue-excel-editor>

defaultJson:[
{col1:'',col2:''},
{col1:'',col2:''},
],

So the excel sheet is loaded with header labels col1 and col2. Now if i update/edit col with anything it is showing up in UI. But defaultJson object still shows the header as col1 and col2 only with values entered in rows([{col1:'asf',col2:'ads'},{col1:'asf',col2:'ads'}])

Whenever I change the header column label the defaultJson also should update keys with new labels.

I may be missing something. Could not figure it out.

I am attempting to add a spellcheck attribute (provided by html) to the cells in the excel. Do you have a suggestion on how or way to achieve this?

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_spellcheck

Something like this would help

<vue-excel-column spellcheck="true" />

I realize I can input a custom filter for Or for example ~[dog|cat]. It would be great if that feature was available in the filter popup by selecting multiple values and then selecting apply. Currently, when I select a single value, the column is only filtered by that single value. Multiple selections is not an option.
Thanks so much.
--Ken

• description
  I could select one or multiple records for row data, but column data doesn't seem to work. Is there any way to select the entire data in one column?

I would appreciate your answers.

Hello,
I was not able to find any way to get the cell identifier according to the row and column.

I wanted to know the column and row of the cell I'm selecting, if the library already has this feature, please, let me know.

Hello,
first of all I wanna thank you for your effort building this library, it's really awesome.

1. My question/issue is that I'm not being able to change the header class in an 'easy' way, for the future changes in the package I'd suggest a more straightforward way to change the style/classes just like a prop, using a css/scss style. Like other frameworks do.
   e.g.: :custom-class="my-class"

2. The styles are being rendered with '!important' value, this could bring a lot of problems when manipulating the style.

Currently the date column type supports only yyyy-mm-dd. Is there a way to support other date formats (mm-dd-yyyy or dd-mm-yyyy)?

How to reset the column-labels for new values?
I use the exel-editor with different numbers of columns, but the labels will be appended.
The changed data are from db-requests on different tables.

Hi, can I export the excel file in a customized way? For example, bold font, colored cell etc.

Is it possible to fix the first 3 Rows?

Is it possible to limit the Moment locales outputted in the final build to reduce the package size?

<button @lcick="exportAsCsv"> Export CSV

exportAsCsv () {
const format = 'csv'
const exportSelectedOnly = true
const filename = 'test'
this.$refs.grid.exportTable(format, exportSelectedOnly, filename)
}
CSV-Export doesn't work!

The Excel-Export works fine.

Hello,

This is not an issue but more a bit of information that may assist those wanting to add this plugin into a Nuxt typescript project or any Vue typescript project.

There are a few things that are required in order to get module resolution working for the plugin.

Firstly a module declaration file is needed. You can add this anywhere inside of your project file structure,
remember the path to where you store this file as it will need to be added to the tsconfig.json file.

The following is required for any Vue typescript project, also required for Nuxt projects.

Install the plugin normally via npm or yarn: npm i vue-excel-editor or yarn add vue-excel-editor

Below is an archive with the module declaration file:
vue-excel-editor.d.ts.zip
Add this file to the root of your project directory or into a folder of your choosing.
Alternatively create the vue-excel-editor.d.ts file yourself and add the following contents:

declare module 'vue-excel-editor';

In the tsconfig.json file, in the "include": [ ] field add the path to the above declaration file.
E.g. "include": ["types/vue-excel-editor.d.ts"]
The above d.ts file is located in a types folder within the project directory.

This will resolve the issue of the module declaration not being found.

Additionally to resolve the VueExcelEditor component methods, the following will be required:

Using the Options API (i.e. Vue.extend({ })):
I am using the newRecord() example.

<script lang="ts>
import Vue, { VueConstructor } from 'vue';
import VueExcelEditor from 'vue-excel-editor';

export default (Vue as VueConstructor<
  Vue & {
    $refs: {
      grid: InstanceType<typeof VueExcelEditor>
    }
  }
>).extend({
  methods: {
    newRecord() {
      // type and interface as per your needs
      const rec = { };

      this.$refs.grid.newRecord(rec);
    }
  }
});
</script>

This will allow the resolution of the this.$refs.grid.newRecord(rec); method by typing the grid ref.
Change 'grid' to match your required Vue element reference name.

Alternatively, Class API:

export default class AppGrid extends Vue {
  $refs: {
    grid: InstanceType<typeof VueExcelEditor>
  },

  methods: {
    ...
  }
}

The grid: InstanceType<typeof VueExcelEditor> can be shortened to grid: VueExcelEditor but it is better to be verbose sometimes.

The following is needed specifically for a Nuxt typescript project.

According to the Nuxt documentation on Vue plugins - https://nuxtjs.org/guide/plugins#vue-plugins
the plugin must be added to the project via its own js file and added to the nuxt.config.js "plugins" section.

vue-excel-editor.js.zip
Extract the above file to the plugins folder inside your Nuxt project directory.
Alternatively create the vue-excel-editor.js file yourself inside the plugins folder (it must be in this folder for Nuxt to detect it correctly) and add the following code:

import Vue from 'vue';
import VueExcelEditor from 'vue-excel-editor';

Vue.use(VueExcelEditor);

You will not need to add the above code into any of the Vue SFC's where the editor is used.

In the nuxt.config.js file add the following to the plugins: [ ] field.
Take note of the mode value. This is important as the plugin does not work with server side rendering and refreshing the app page will result in the following error: syntax error: Cannot use import outside of module.

plugins: [{ src: '@/plugins/vue-excel-editor.js', mode: 'client' }],

With all of the above, you should have an implemented and compiler error free vue-excel-editor plugin for your Vue or Nuxt typescript project.

I hope it helps.

Jarryd 👋😃

Starting with some exisiting data as below:

When an import is done via excel and some rows are filtered out by modifying the data object results in this:

This seems to break after version 1.3.48

Hi, I want to create a table with a secondary table header. Do the project provide some API to get it? Thank you !!

Hey,

first of all the library is really great.

Some features that would be really cool would be:

1. readonly on cells
2. that when you tap through the table you jump from the end to the next row

I would be happy to contribute but first wanted to check on what you are currently working.

Cheers

• environment
  vue: 3.1.3
  @vue/cli: 4.3.1

• description
  Is it possible to statically give the height of a component without a header list and records (data)?
  I tried giving style to the component and css effect on the table itself, but to no avail.

i would appreciate your reply.

How this works?
Do something when user select/unselect the rows
The selected or unselected rows will be passed to the provided trigger method

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

I need a method to reload the content of a second table after selection a row of the first table.

Hey, first of all:
Thank you for this awesome component! It really made my work (and the product) way easier!

But I was wondering about the filtering feature.
When you right click on a col, you get a modal with the different options to filter through.
There are these checkboxes that are implying that you can select multiple at once.
But you can't.
Im my case it just uses the one option you wanted to select and starts filtering with that, instead of letting me select multiple at once.
Is that a feature you plan to include at a later point or a bug that was overlooked?

Ah and another thing, that I found weird:
When something is filtered with regex, sorting on any col seems to sort wrong.

For example: "~word1|word2" & ascending sort -> the rows get filtered, but not sorted correctly.

Maybe sorting was done before filtering?
I might, if I have time later, look into the code myself and make a fork.
But since you know your code better (hopefully), you maybe already know whats the issue :^)

Greetings!

Hi @cscan ,

First of all thanks for working on this extremely powerful tool.
However, when I attempt to run an excel import only the last cell appears in the table, a little debugging reveals the library must be writing all the rows to a single row, effectively overwriting the contents of the row.

Or maybe I'm doing something wrong

Anyway i can drag and copy cells

Sorry, my english is not very good。
I don’t know if the current component can realize the drag copy function，Similar to google Excel.

I need some help.
With "map" the value for "options" should be changed via a method "fetchPRKOPARENT()"

mounted:
this.fetchPRKOPARENT();

data:
// prkoParent_dic: {'2': 'Testtest', '1': 'Test'},
prkoParent_dic: {},

methods:
fetchPRKOPARENT() {
const _this = this;
axios.get(/project_prkoParent_v2).then(response => {
_this.prkoParent_dic = response.data;
console.log('in fetchPRKOPARENT: ', _this.prkoParent_dic); // {'2': 'Testtest', '1': 'Test'}
}).catch(response => {
_this.catch(response);
}).finally(response => {
_this.finally(response);
});
},

the error in console:

in fetchPRKOPARENT: Object 1: "Test" 2: "Testtest"

app.js:132976 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
found in
---> at node_modules/vue-excel-editor/src/VueExcelEditor.vue
at resources/js/components/ProjectTabV2.vue

Map works fine, if I put the optionsvalue direct in the line:

What should I do?

Hi,

First off, great project.

I am having some issue with the map column type.

According to the documentation, when using a column of type="map", the options prop will accept Object or Function.
I am dynamically constructing the Object via a computed method.

When loading the page it console logs the following warning:

Invalid prop: type check failed for prop "options". Expected Array, Function, got Object

It seems to be partially working where I can see it is selecting the correct Text value from the map when I manually change the key value of the column, however I am unable to get the selection dropdown to open.

It returns the following error:

Error in render: "TypeError: _vm.autocompleteInputs is undefined"

found in

---> at node_modules/vue-excel-editor/src/VueExcelEditor.vue

Below is my generated map object:
{ 1_1: "PVC-0.35, White", 1_2: "PVC-0.35, Walnut", 1_3: "PVC-0.35, Mahogony", 1_4: "PVC-0.35, Ebony", 2_1: "ABS-1.0, White", 2_2: "ABS-1.0, Walnut", 2_3: "ABS-1.0, Mahogony", 2_4: "ABS-1.0, Ebony" }

If I change the column value from 1_1 to 1_2, I see the cell text change from "PVC-0.35, White" to "PVC-0.35, Walnut"

If I feed it a simple string array, then the select dropdown functionality works, however then I no longer have the key value to work with.

This is in a sample project that I spun up to test the spreadsheet, so the editor is the only component on the page.
Perhaps I am missing something small. Please let me know if you need further information.

Kind regards,
Jarryd

Is it possible to gain more context on the cell being validated? Currently, I know you can access the value but are you able to know which cell is being validated and further use this to implement a validation based on other values in the sheet?

I want a transposed table, can this be achieved?

• environment
  vue: 3.1.3
  @vue/cli: 4.3.1

• description
  After uploading the excel file, I want to change the data and save it back to the original file. Is there any way? (Now I am using it as exporting again, but I am worried because there are too many files.)

i would appreciate your reply.

Hi,

I realised that after version 1.3.33 the model bound to the vue-excel-editor component doesn't get updated upon Excel import.

Not sure why this is happening

I am trying to achieve the google sheet behaviour of using enter key.

Steps - Assume a cell is currently chosen in first row

1. User presses enter key and it focuses (cursor) on the text area of the cell
2. Again the presses the enter key, the cell below is shown as active cell
3. Again presses enter key, focuses (cursor) on the text area of the active cell.

In order to achieve this I am looking for a method to focus so that I can override the enter key behaviour.

Though of using a combination of moveSouth method and focus method, but couldn't find it.

Please try it out in a google sheet if the above is not clear.

Currently on pressing tab, the cursor only to the next cell. Is there a way to take it to the next row first cell when the cursor reaches the end of the row?

If there is an event with which I can control the tab behaviour, I will also be able to handle the cases to insert new row when there are no more rows after the last cell.

Do you have examples of how to have empty rows and columns?

Hi,

This is nice looking project.
I am missing tests.

Thank you.

Kind regards,
TY

This is a great package. It saved me lots of time. I know its in early stages but one thing that im missing right now is ability to copy an entire column from excel and paste it on the editor. Is this possible yet or in planned ? Thanks

Hi,

I'm using this plugin to dynamically create columns depending on how many requirements there are for each of our clients.
So I have a table for requirements and once that's loaded, I use the names of each requirement as the header for each column and it's working fine.

However, here's the weird part. Whenever I update one of the dynamic grids, it updates all of the dynamic row.

Do you have any idea on how to fix this?
Here's the code snippet:
`<vue-excel-editor ref="excelEditor" v-model="jsondata" no-footer @update="onUpdate">

 <vue-excel-column v-for="(requirement, index) in requirements" :key="'td-' + (index + 2)" 
 :label="requirement.name" type="string" width="80px"
 />

`

Thanks!

Which is the right way to update the data binding in v-model after user edit the column name? like this:

niow, the data from v-model still keep the same

Thank you for this excellent library

How to set a default value in "map" and showing it in the table?

Map

The "map" typed column is the same as "select" typed column, but the record value is not the same as the display text. The options prop required to provide the mapping of the value and text.

<vue-excel-column field="gender" label="Gender" type="map" width="50px" :options="{M:'Male','F':'Female'}

Hi, first of all the library is really great.

is there a way to fill the autocomplete by calling a db in the server

vue-excel-editor should be using vue2-datepicker, how to set its language

I am trying to import a 2 column excel file but the file is not being imported. If I try to import a three column file, I don't have any problems.
When I examined the VueExcelEditor.vue file, I saw the relevant code on line 1721.

importData = importData.filter (rec => Object.keys (rec) .length> 2) .map ((rec) => {

Is it any problem to have length> = 2 instead of length> 2?

Currently when I switch tab and come back, the active cell goes away. Is there a way to retain it?

Please forgive me if there is a better place to ask this question. If so, please advise because I have another non-related question.

When setting key-field=true on column that contains an integer, I get the following error in console when data is loaded:

[Vue warn]: Error in render: "TypeError: val.startsWith is not a function"

found in

---> <VueExcelEditor> at node_modules/vue-excel-editor/src/VueExcelEditor.vue

This happens regardless of setting the "type" prop on the column. If I cast the value in the json data to a string, it works. I am then able to get key in keys array in the OnUpdate event. My goal is to get a numeric key back in the keys array OnUpdate.
Is this intended behavior?
Thank you, Ken

i pass prop options to column
<vue-excel-column field="locationToProvince" type="map" :options="provinces" label="Province"/>
and load api provinces in created hook
this.provinces = this.castRegionToOptionCol(await this.getListProvinces(1));
but options not show.

According to the documentation, the mandatory prop is a string however in the code the mandatory prop is defined as a Boolean,

mandatory: {type: Boolean, default: false},

This causes aa warning in the Vue console.

Hi would it be possible to add some of these features?

1. Custom row title instead of just row number.
2. Regular scroll. Would it be possible to use a Virtual Scroll instead and just have a normal scroll instead of div?
3. Transform entered text so that for example you can type in lowercase but still have it transformed as uppercase.
4. Select multiple cells with shift key.
5. Select multiple cells just by dragging down
6. Validate on selects. If you type something that's not in the options, shouldn't it should clear the value?

When i am using this.$refs.grid.selectedCount n the computed property it is throwing Cannot read property 'selectedCount' of undefined error.

i have added ref="grid" to <vue-excel-editor only.

My template:
<vue-excel-editor
ref="grid"
v-model="defaultJson"
:no-header-edit="false"
:allow-add-col="true"
:add-column="column"
@select="onSelect"

and in script
computed: {
showActionContainer () {
return this.$refs.grid.selectedCount > 0
},
}

i am using showActionContainer to display action buttons. but doing this we are getting this error

This is a good editor thanks for the hardwork.

Im just wondering how can I create a custom column header because there is a feature in the list with custom column header and yet there is nowhere to be found on how to create one on the readme. I want to create a header like this one.

I tried with the "init-style" property, but I was not successful in the implementation

 <vue-excel-column
        field="user"
        text-align="right"
        label="User"
        init-style="style"
      />

  style: {
    backgroundColor: "#42b983"
  },