Skip to content

UI: Migrate all tables of the Manager UI to Vaadin counterpart #2714

Description

@MartinaeyNL

Description

As part of #2552, we'd like to replace all Material tables (<or-mwc-table>) with the Vaadin Design System.
We'd be using the Vaadin Grid component, and distribute an extended class with HTML tagname <or-vaadin-grid>.

The syntax of the new Vaadin component would be really similar, and only require some column configuration.
This is the example that can be found in their documentation:

@state()
  private items: Person[] = [];

  protected override async firstUpdated() {
    const { people } = await getPeople();
    this.items = people;
  }

  protected override render() {
    return html`
      <vaadin-grid .items="${this.items}">
        <vaadin-grid-column path="firstName"></vaadin-grid-column>
        <vaadin-grid-column path="lastName"></vaadin-grid-column>
        <vaadin-grid-column path="email"></vaadin-grid-column>
        <vaadin-grid-column path="profession"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    EnhancementImprovement of an existing feature

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions