q-table with edit functionality similar to excel ?
-
Hello to all,
I am working on a tool, that displays a lot of tables (data retrieved from a data base with axios) and everything works fine. The q-tables looks good, filtering, sorting works fine. It’s a wonderful tool to show the contents.
Like most time: if you have a wonderful thing, you want more! And I want to change values in the q-table and save them back to the data base. That is working fine, if I do it exactly like the example in q-table definition shows (using the q-popup-edit). There are some “power users” who want to change die values for a whole column in the q-table and that ist to much work: They have to click to a field (to show up the q-popup-edit), then input the value, then click to save the value (the q-popup-edit disappears), then click to the next field in the q-table.
What would be nice is quick input: After entering the value und hitting the return-key the value should be saved and this q-popup-edit disappears and the q-pop-up-edit for the same column but the next row should appear. Has anyone an idea?
And one more question: How can I have an active cell? I want the active cell with same highlite (a coloured border or an colored backgrount) and i want to move this active cell with the arrow keys (up, down, right, left) and I want to activate the q-popup-edit for this active cell by hitting the return key. Has anyone an idea?
Thank you
-
@Clareon Those are different components. Quasar TABLE is column oriented, datasource binding paged row viewer. What are you talking about is a GRID component, with x,y addressable CELLS. There are many Vue grid/table components, here is a list. You can choose almost anything and use it in Quasar app:
https://github.com/vuejs/awesome-vue#table
This one is very interesting, please look:
https://github.com/handsontable/vue-handsontable-officialAnd demo:
https://handsontable.com/docs/7.4.2/frameworks-wrapper-for-vue-simple-example.html -
Thank you, qyloxe, I have seen the lengthly list yesterday but I have not trusted to combine any vue-Component from the net to a quasar PWA. The handsontable looks interesting but has a high prizing for only one year updates. So I will search the list in detail. Thank you and have a nice day.
-
Check this out.
I’ve asked Jesus to write up an AE. Hope he will do it.https://codesandbox.io/s/distracted-fire-d02zk
Scott
-
@s-molinari Nice! Now that we need is
-
import/export exel files
-
formulas
Probably out of the scope of quasar standard components…
-
-
Um, yup. Import and Export of Excel would need to be something done on the server. Formulas might be a possible small addition. Thing is, this is mainly for displaying and updating the data, nothing more.
Scott
-
Hello Scott,
thank you very much for your hint to the codesandbox 2 days ago. I read the 800 lines of code and that teached me, that I have to learn more about the internel things of vue an of quasar. I will try to adept the mixin from the example to use with q-table. The idea of getting the screen coordinates of table and cell together with an independent div as overlay at a fixed screen position is good. The other idea of traversing the node-tree to find the left, right, up or down cell is also a key to solve my request. Thank you for the example.Hello dobbel,
exporting csv-files is described at: https://quasar.dev/vue-components/table#Exporting-data
ok, that ist not Excel but a first step to get some data out of a quasar-app and into Excel. Same weeks ago a found, that there are a lot of libraries for javascript and there are many to deal with excel files. I have not tried one so I don’t want to pick out one here. Browsers are not ideal for dealing with files.Formulas are something I also have thinked about. Javascript is a interpreter language and with a custum function getCellValue(row,col) you may type in formulars in Javascript-syntax. Besides the data[] (Array of row values) you will have a form[] (Array of row formulars). The div-element to enter values will then scan the input and in case of the first character is an equal sign … This may work for simple cases. In real excel they probably have a formular tree to know the sequence to evaluate the formulars and they keep track of recursive function calls.
-
@Clareon said in q-table with edit functionality similar to excel ?:
Javascript is a interpreter language and with a custum function getCellValue(row,col) you may type in formulars in Javascript-syntax
Highly not recommended. Keep in mind that almost ANY user input, which you will later display/process, can be used as a XSS attack. More here:
-
Ok, gyloxe, you are right about the XSS attack. Then you have to implement a little formula scanner and interpret the formulas yourself.
The main thing to avoid attacks is, to protect the server. The server must not work on unchecked input. -
@Clareon said in q-table with edit functionality similar to excel ?:
The main thing to avoid attacks is, to protect the server. The server must not work on unchecked input.
You are protecting humans not machines. Server helps in that in cooperation with client. Yet, EVERY input the server has, is untrusted, even if it is “checked” on client. IMHO you need to decide if your value (business) comes from writing the yet another formula evaluator or from using such functionalities. In most situations it’s just simpler to buy some expertise embedded in existing products. IMHO obviously.
