GridTreeToggle, GridPro, and CrudEdit using React

Hi. Has anyone tried working with the GridTreeToggle, GridPro, and CrudEdit components using Hilla + React? There’s no documentation for them on https://hilla.dev/docs/react. I’ve tried looking at the Lit documentation, because sometimes it’s similar to React, but to no avail. I’ve also just tried random stuff, but that’s a very time consuming approach.

These components should work with Hilla + React, and we are planning to add the documentation for the missing components within the next couple of months.

@tireless-elk, is there some example somewhere in GitHub for using these components with React? The kitchen sink, maybe?

Hi, here are some examples for GridTreeColumn and GridPro: https://github.com/vaadin/react-components/blob/main/test/kitchen-sink/Row5.tsx and Crud: https://github.com/vaadin/react-components/blob/main/test/kitchen-sink/Row3.tsx

Concerning GridTreeToggle in particular, sadly we don’t have neither lit nor React examples. If you are looking for tree grid with a toggle arrow with some string label, please consider using GridTreeColumn instead.

The GridTreeToggle component only implements the indent and the toggle arrow features. Users need to wire it to the grid’s API in order to actually display the hierarchical depth and change the expanded/collapsed state in the grid. This is a bit complex to setup, and probably only worth if you absolutely need rich text content with a toggle near it. Here is an example of using the web component in plain vanilla JS: https://cdn.vaadin.com/vaadin-web-components/24.0.0/#/elements/vaadin-grid-tree-toggle

The GridTreeColumn though is a column that renders a plain text label using a data key with the toggle, the most basic case.

It uses a GridTreeToggle inside, but automatically wires it up.

Thanks for the resources, I’ll check them out! My IDE doesn’t seem to recognize GridTreeColumn as a component that can be imported though, so I thought that perhaps it had been renamed, but I see now that’s not the case.

gridtreecolumn.png

there are known issues with auto-import of the components, probably not specific to the particular component

Ah, ok. So I can just write the import statement manually and it should work?

yes

Great. I will check out the examples, thank you for the help!

By the way, if you use VSCode, setting the “Include Package JSON Auto Imports: “on”” in the TypeScript language preferences may help with the React component imports. You can also set in locally for the project in the .vscode/settings.json file:

{
  "typescript.preferences.includePackageJsonAutoImports": "on"
}

image.png

I’m using IntelliJ, but thanks for tip.