Request for More Detailed Example of TreeGrid Usage in Hilla Documentation

SuperGhazi · November 14, 2024, 4:34pm

Hi Vaadin community,

I’ve been exploring the usage of the TreeGrid component in Hilla and referred to the official documentation for guidance. While the example provided is helpful, I find it lacks sufficient detail, particularly regarding the DataService.java and Person.java classes that would complete the demonstration.

Would it be possible for someone to share a more comprehensive example or expand on the existing documentation? Specifically, I am interested in how the backend data service (DataService.java) and the data model (Person.java) should be structured to fully support the TreeGrid.

Any code samples or pointers would be greatly appreciated!

Thank you in advance for your help.

Best regards,
Ghazi

rofa · November 14, 2024, 7:55pm

Hi, you’re right, those files should be included in the code snippets below the sample.

Luckily, since our documentation source code is open source, it’s available via github:

github.com

vaadin/docs/blob/latest/src/main/java/com/vaadin/demo/domain/DataService.java

package com.vaadin.demo.domain;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import com.fasterxml.jackson.databind.ObjectMapper;

import org.springframework.core.io.ClassPathResource;

public class DataService {

    public static <T> T getItems(Class<T> clazz, String dataFileName) {
        ObjectMapper mapper = new ObjectMapper();
        try {
            InputStream stream = new ClassPathResource("data/" + dataFileName)
                    .getInputStream();
            return mapper.readValue(stream, clazz);
        } catch (Exception e) {

This file has been truncated. show original

github.com

vaadin/docs/blob/latest/frontend/demo/domain/DataService.ts

import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import type RawReport from 'Frontend/generated/com/vaadin/demo/domain/Report';
import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth';
import type UserPermissions from 'Frontend/generated/com/vaadin/demo/domain/UserPermissions';
import type ViewEvent from 'Frontend/generated/com/vaadin/demo/domain/ViewEvent';

const datasetCache: Record<string, any> = {};

async function getDataset<T>(fileName: string, count?: number): Promise<T[]> {
  if (!datasetCache[fileName]) {
    datasetCache[fileName] = (
      await import(`../../../src/main/resources/data/${fileName}.json`)
    ).default;
  }

  // Create deep clones to avoid sharing the same item instances between examples
  return datasetCache[fileName].slice(0, count).map((item: T) => ({ ...item }));
}

This file has been truncated. show original

github.com

vaadin/docs/blob/latest/src/main/java/com/vaadin/demo/domain/Person.java

package com.vaadin.demo.domain;

import java.util.Date;

import javax.annotation.Nonnull;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties; // hidden-source-line

@JsonIgnoreProperties(ignoreUnknown = true) // hidden-source-line
// tag::snippet[]
public class Person {

    @Nonnull
    private String firstName;

    @Nonnull
    private String lastName;

    @Nonnull
    private String email;

This file has been truncated. show original

I created a ticket about adding those to the code boxes on the page: TreeGrid React+Lit code samples: Include related code files in samples · Issue #3912 · vaadin/docs · GitHub