cscan / vue-excel-editor Goto Github PK
View Code? Open in Web Editor NEWVue2 plugin for displaying and editing the array-of-object in Excel style
License: MIT License
Vue2 plugin for displaying and editing the array-of-object in Excel style
License: MIT License
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.
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
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
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?
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.
Is it possible to limit the Moment locales outputted in the final build to reduce the package size?
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.
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?
Anyway i can drag and copy cells
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.
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.
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 👋😃
Hey,
first of all the library is really great.
Some features that would be really cool would be:
I would be happy to contribute but first wanted to check on what you are currently working.
Cheers
Hi,
This is nice looking project.
I am missing tests.
Thank you.
Kind regards,
TY
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.
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!
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
vue-excel-editor should be using vue2-datepicker, how to set its language
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!
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.
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
)?
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.
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 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"
},
Is it possible to fix the first 3 Rows?
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'}
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?
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.
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.
Do you have examples of how to have empty rows and columns?
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.
I am trying to achieve the google sheet behaviour of using enter key.
Steps - Assume a cell is currently chosen in first row
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.
Hello,
first of all I wanna thank you for your effort building this library, it's really awesome.
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"
The styles are being rendered with '!important' value, this could bring a lot of problems when manipulating the style.
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 want a transposed table, can this be achieved?
Hi, I want to create a table with a secondary table header. Do the project provide some API to get it? Thank you !!
I would appreciate your answers.
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
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 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" />
Hi, can I export the excel file in a customized way? For example, bold font, colored cell etc.
<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.
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
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.
Hi, first of all the library is really great.
is there a way to fill the autocomplete by calling a db in the server
Hi would it be possible to add some of these features?
Currently when I switch tab and come back, the active cell goes away. Is there a way to retain it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.