2020-12-04 13:06

Plans for native Vue style and compatibility with vuetify?

Expected behavior and actual behavior.

The canvas-datagrid component looks very promising and powerful and very much needed in the Vue community. Is there a version planned that is closer to how native vue components operate? It would also be specially helpful if it was compatible with Vuetify and Nuxtjs.

Steps to reproduce the problem.


Specifications like the version of the project, operating system, or hardware.



  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • weixin_39871162 weixin_39871162 5月前

    I am a noob to your control, so perhaps I am not using it in the way I should be with Vuetify.

    Don't take this the wrong way, because I see and respect the tremendous amount of work you put into it and perhaps it is required to be done the way you have chosen, but canvas-datagrid appears to be using different paradigm than what you typically see in Vuetify.

    Vuetify takes on more of an enabler approach rather than a monolithic, do everything in one component approach. For example: In the v-data-table, you define the row template which specifies how it looks, what it contains, etc. With CDG, you provide hundreds of properties for coloring background, foreground, text size, etc. That requires a lot more code on your side but also reduces flexibility on developer side. If you don't have a way to put buttons or icons in a cell, then you have to go back to the control to add that functionality.

    Other things I noticed (but again, I am a noob to CDG): How do you get CDG to respect the boundaries of the parent container (height and width) and then auto size as the containers resize? How do you style it using Vuetify styles? Perhaps some examples of these would help, but what I see from the documentation seems like I need to deal a lot with the native DOM, CSS and/or javascript. That is a different approach than what Vuetify strives for, which is not to touch the DOM and use CSS.

    Today, I am using v-tree-view and v-data-grid from Vuetify. They are OK, but they have performance issues. To make the data grid performant, I have to use paging, but in my app, paging is troublesome. It would be preferable to have a scroll bar that controls where in the dataset the rendering is taking place (as yours does). They currently do not support this behavior.

    The v-tree-view is a much more complicated component, and I am not even sure I can do what I want with canvas-datagrid, but I have responded to this part in issue #187.

    Again, I think what you have here is fantastic! Perhaps a lot of my issues/concerns can be alleviated if there were some more examples with how to make it work with vuetify. Such as:

    How to make it responsive. How to define the template for the rows/headers.

    Here is an example of a tree and a data grid that I am trying to create in Vuetify.

    tree and data grid

    点赞 评论 复制链接分享
  • weixin_39871162 weixin_39871162 5月前

    It is indeed tricky and why many people I have encountered just end up writing something custom every time. I think your grid has a great deal of power and I love the fact that it has no dependencies. I have done other apps in the past that are more spreadsheet like grids and I think canvas-datagrid would have been a slam dunk. My current project, however, is different. It needs the canvas part of what you have done, but all the other stuff is above and beyond my current needs (at the moment!).

    Oh, and as for other interfaces that could provide the functionality, you already know Vuetify. I think it strives to simplify the component definitions and still handle some of the complexities that you mention here without events. I say strive, because they certainly have a way to go, but you can see from how things are defined, it works toward that direction.

    点赞 评论 复制链接分享
  • weixin_39558391 weixin_39558391 5月前

    Hi , I use it with Vuetify right now without any problem. What sort of changes specifically are you suggesting? I'm open to just about anything. A Vue version? Style mappings? I think we could probably do multiple build targets in webpack, e.g.: 1) WebComponent 2) Vue 3) React etc.. It wouldn't be hard. The react example (that does not work in safari for some reason) shows a lightweight wrapper for react, but I don't use react, so it's nothing more than a POC.

    If you're interested in making some PRs let me know. Also, I have a slack channel, you can ask me about the stranger parts of the lib.

    点赞 评论 复制链接分享