search

glideapps / glide-data-grid

🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.
https://grid.glideapps.com
MIT License
4.03k stars 292 forks source link

Custom cell usage #260

Closed infalmo closed 2 years ago

infalmo commented 2 years ago

Can you please provide an example on how to use the custom cells from glide-data-grid-cells? Also, how would I implement my own cell in my project?

infalmo commented 2 years ago

I did go through this, but it doesn't work in NextJS.

./node_modules/@toast-ui/editor/dist/toastui-editor.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@glideapps/glide-data-grid-cells/dist/js/cells/article-cell-editor.js
infalmo commented 2 years ago

Would it be possible to create a plugin system, where only the necessary custom cells are loaded and registered? Similar to how handsontable does it.

jassmith commented 2 years ago

Look into how this is done here for dynamic loading in next. https://github.com/glideapps/glide-data-grid/tree/main/test-projects/next-gdg

infalmo commented 2 years ago

Yep, I used next/dynamic to load the grid, which works well until useExtraCells is imported.

jassmith commented 2 years ago

is your usage of useExtraCells inside of the dynamic or outside of it? I don't think next should be loading it unless its outside the dynamic?

infalmo commented 2 years ago

Yep, I'm using it within the component file loaded using next/dynamic.

infalmo commented 2 years ago

Of all data-grids I've used, this one has the most modular API and a clean UI. Extensibility of custom cells is a major lacking feature, that I'm willing to help contribute to.

jassmith commented 2 years ago

wtf is going on with next loading the dep server side if its inside a dynamic. I thought the entire point of the dynamic was to prevent that...

jassmith commented 2 years ago

As far as cell extensibility I am more than happy to have help here. What did you have in mind?

infalmo commented 2 years ago

Here's my take on it:

  1. Add a function useCustomCells(cells) similar to this in the glide-data-grid package, where the user passes an array of custom cells they want to use (instead of hardcoding it).
  2. glide-data-grid-cells can then only contain implementations for common cell types, which can be individually imported by the user (allowing for tree shaking).
jassmith commented 2 years ago

I like it, glide-data-grid-cells should keep its current super export but it can grow individual exports as well. This way we can maintain back compat.

jassmith commented 2 years ago

https://github.com/glideapps/glide-data-grid/commit/45fce27fe671de87da8440ef9d29c9ef9cedd356

infalmo commented 2 years ago

Any way I can test the update? Maybe a beta release?

jassmith commented 2 years ago

4.0.3-alpha2 should be out in 2 to 3 minutes

infalmo commented 2 years ago

Can confirm (from limited testing) that useCustomCells works as intended. However, importing just DropdownCell from glide-data-grid-cells causes NextJS to throw the above mentioned error, so I suppose article cell editor is still being imported in some way or the other.

infalmo commented 2 years ago

Would making each cell type a dedicated package (glide-data-grid-cells-dropdown, glide-data-grid-cells-star etc) be ideal? I can think of several advantages, including isolation of components and reduction of dependencies. Can't think of any real downsides apart from having to publish several packages than one unified module.

jassmith commented 2 years ago

how are you importing DropdownCell? you should be able to do import DropdownCell from "@glideapps/glide-data-grid/cells/dropdown-cell"

infalmo commented 2 years ago

Oh, I did import { DropdownCell } from @glideapps/glide-data-grid. Will give that a spin, thanks!

jassmith commented 2 years ago

Looking forward to hear if it works. I can't see why next wouldn't tree-shake that correctly.

infalmo commented 2 years ago 
./components/glideGrid/resources.js:2:0
Module not found: Package path ./dist/js/cells/star-cell is not exported from package /home/ubuntu/dev/et-app/node_modules/@glideapps/glide-data-grid-cells (see exports field in /home/ubuntu/dev/et-app/node_modules/@glideapps/glide-data-grid-cells/package.json)
  1 | import DropdownCell from "@/components/glideGrid/customCells/dropdown"
> 2 | import StarCell from "@glideapps/glide-data-grid-cells/dist/js/cells/star-cell"
  3 | 
  4 | import DataEditor, {
  5 |   GridCellKind,

This is however not related to the current issue, and is thus being closed.

jassmith commented 2 years ago

Yes of course it is possible, when using with Next however it is recommended to wrap the data grid in a component which is then imported as a dynamic. Canvas doesn't really render on the server correctly anyway.

On Wed, Apr 13, 2022 at 9:50 AM Adithya Dsilva @.***> wrote:

Would it be possible to create a plugin system, where only the necessary custom cells are loaded and registered? Similar to how handsontable https://handsontable.com does it.

— Reply to this email directly, view it on GitHub https://github.com/glideapps/glide-data-grid/issues/260#issuecomment-1098272649, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHN225AWL733N5T6Y2HWDVE33L5ANCNFSM5TJT4LWQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>