New feature about vue-table HOT 23 CLOSED

@ratiw of course, but will be great feature for your vue-table :D

from vue-table.

Turns out vuetable can now use vue-editable to do inline editing. You can try it out by following this instructions.

git clone https://github.com/ratiw/vuetable-example-vueify-bootstrap.git vevb
cd vevb
git checkout develop
npm install
npm run dev

• Open your browser and go to http://localhost:8080
• Open web browser console to see the output message
• Try double-click on any cell

Pro:

• This way vuetable can stay light without having to embed the inline editing feature inside.

• cell-dblclicked is just another event, you can choose to do anything with it or nothing at all.

• Someone else can extend vue-editable to make more features out of it or even make another one that support different field type inline editing.

• You can add more option(s) to field definition and make use of it inside the event, like

  events: {
      'vuetable:cell-dblclicked': function(item, field, event) {
          if (field.editor === 'select') {
              // do something here
          }
      }
  }
  

Con:

• You will need to keep track and handle any change you made back to the server side yourself.

What do you guys think? @NightZpy @mdaliyan @mozami

from vue-table.

@NightZpy vue-editable component looks very interesting. Anyway, vuetable was never meant to have inline editing as it would complicate the data update on the server. It would better suits for another table component that does not deal ajax request directly. But let me think about it and see if there is any interesting way to do it. :)

from vue-table.

I add in my project, using vue-editable -really very tiny, but works-:

method for vuetable:
editable: function(e, field , id, token){ updateData['_token'] = token; updateData[field] = value; this.$editable(e,function(value){ Vue.http.patch(url.update + id, updateData, function (result){ console.log(result); }); }); },

In vuetable template:
`

But the vue-editable, only works passing to textfield. Very interesting add support for select, checkbox, radio or anothers field types!

from vue-table.

@NightZpy I know what you mean. It's a quick and easy way, but I just don't think that it is the appropriate way to go. It should be implemented as plugin for the component. But I never thougt about plugin for vuetable before, so I will have to think about it and see if it is possible. Thanks for the suggestion anyway. :)

from vue-table.

I like, better than implement as attribute inner template :D
Ready to test :D

from vue-table.

This is certainly nice to have! Ive tested the demo by @ratiw and it looks good. I think it should be optional, so one can enable editable features if needed as it may not be necessary for every instance.

from vue-table.

@mozami What I did was only add another event call cell-dblclicked, no inline/in-place editing feature was added. The example just makes use of vue-editable component by registering it and call it from within cell-dblclicked event.

I think in-place editing feature is not suitable for vuetable but might be good for another component in the future.

from vue-table.

I don't see any Cons. What you mention as Con, is unavoidable. The mail purpose is to change server data!

Nice.

from vue-table.

@ratiw I have a problem. Ready updated the vue-table source, but now problem load data into table, event load-error is launch. Server call works (data is retrieve), but, the error even persist and not load data in table. No error in javascript console :(

index.blade.php
vue-table.blade.php
vuetable.js
crud.js

from vue-table.

@NightZpy Did you make any change to the template in the original vue-table.js file? It seems like you separated them in different files and include them back in again using Blade template.

It's hard for me to help or make any suggestion based on what you do. Are you sure your data structure and pagination data returned from the server are in correct format? Please also try to dump the response in vuetable:load-error out to see more detail about it.

from vue-table.

Hi @ratiw, thanks for your support!

No, i don't make changes into vue-table.js.

Response from server (show in the network tab in chrome):
{ "total":10, "per_page":2, "current_page":1, "last_page":5, "next_page_url":"http:\/\/generator.developer.com\/api\/v1\/providers?page=2", "prev_page_url":null, "from":1, "to":2, "data":[ { "id":22, "code":"23423", "name":"aaa", "specialty":"234234", "district":"", "address":"", "phone":"", "movil1":"", "movil2":"", "contact":"", "email":"", "created_at":"2016-05-29 12:11:31", "updated_at":"2016-05-29 12:11:31", "deleted_at":null }, { "id":17, "code":"189905", "name":"lenyn", "specialty":"Programmer", "district":"", "address":"", "phone":"", "movil1":"", "movil2":"", "contact":"", "email":"", "created_at":"2016-05-29 08:11:01", "updated_at":"2016-05-29 08:13:49", "deleted_at":null } ] }

Dump response:

TypeError: r.call is not a function(…)

from vue-table.

I cut in parts, because browserify doen't works for me. Any suggestion for not cut template in a different file that js file?

It worked before upgrading to the new vue-table (with cell-dbclicked) :(

from vue-table.

@NightZpy If you don't modify anything, just use vue-table.js in the src directory. It's the main file I always work with as I usually don't use browserify as well.

Please also expand the error message to see more error info.

TypeError: r.call is not a function(…)

from vue-table.

Didn't error info into console, is dump data console.log(response).

This is all dump:

TypeError: r.call is not a function
    at http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js:7:4256

Yes, i use vue-table.js.

But, require doesn't works for me :(

from vue-table.

This problem using babel with browserify: go

from vue-table.

@NightZpy This problem has already been discussed and solved. It's not the problem with browserify. It is because you split up vuetable files instead of using the one provided by the library in npm or bower.io. The package installed using npm or bower.io will have package.json that will tell browserify how to handle .vue file.

from vue-table.

@NightZpy I suggest you start a small project trying to install vuetable via npm and compile with browserify or webpack first. Make it work before adding more things as it will confuse you.

from vue-table.

@NightZpy If you do not familiar with browserify, you do not need to use it. vuetable can be used just by include its javascript file vue-table.js. No compilation needed. Please see this example.

from vue-table.

@ratiw i understand you :D but, for example, when install directly from npm, cloning the repo, appear another problem about git repository in dependences section in package.json.

nightzpy@nightzpy-PC /cygdrive/d/Proyectos/Webs/vuetable-example-vueify-bootstrap-master
$ npm install --save-dev --no-optional
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: Cloning into 'C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2'...
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: fatal: '/cygdrive/c/Users/nightzpy/AppData/Roaming/npm-cache/_git-remotes/git-github-com-ratiw-vue-table-git-develop-b82b5a2f/C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f' does not appear to be a git repository
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: fatal: Could not read from remote repository.
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2:
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: Please make sure you have the correct access rights
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: and the repository exists.
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2:
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\nodejs\\node.exe" "C:\\Users\\nightzpy\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "--no-optional"
npm ERR! node v4.4.5
npm ERR! npm  v3.9.2
npm ERR! code 128

npm ERR! Command failed: git -c core.longpaths=true clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2
npm ERR! Cloning into 'C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2'...
npm ERR! fatal: '/cygdrive/c/Users/nightzpy/AppData/Roaming/npm-cache/_git-remotes/git-github-com-ratiw-vue-table-git-develop-b82b5a2f/C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f' does not appear to be a git repository
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Proyectos\Webs\vuetable-example-vueify-bootstrap-master\npm-debug.log

I ready using directly include vue-table.js but, when update, now fail!

/----- UPDATE ------/
But, ready solve the problem, was a version of babel runtine ¬¬.

from vue-table.

@ratiw dbl-clicked event retrieve item element row with html tags for hightligh in searching!

{"id":22,"code":"<span class=\"highlight\">343</span>43","name":"aaa","specialty":"234234","district":"","address":"","phone":"","movil1":"","movil2":"","contact":"","email":"","created_at":"2016-05-29 12:11:31","updated_at":"2016-05-31 06:22:04","deleted_at":null}

Maybe clean data before pass to dbl-clicked event?

Temporal solution:

item = JSON.stringify(item);
item = item.replace('<span class=\\"highlight\\">',"").replace('</span>',"");
item = JSON.parse(item); 

from vue-table.

@NightZpy That was the result of having reactivity. I suggest you remove the highlight functionality from your code as there is no way to remove that at the moment.

from vue-table.

@ratiw already remove :D but highlight functionality thats fine.
Thanks.

from vue-table.