A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.

The Data Grid uses a declarative approach to enable apps to choose the best rendering techniques that fit their use cases. When using a framework or library such as Angular, leverage the frameworks default syntax and conventions for rendering lists of DOM elements.

Angular

In Angular you can use *ngFor directive and have full render control of when and how the framework creates rows. This enables more advanced performance optimizations such as trackBy.

@Component({
  selector: 'demo-grid',
  template: `
    <nve-grid>
      <nve-grid-header>
        <nve-grid-column *ngFor="let field of workflows[0] | keyvalue"></nve-grid-column>
      </nve-grid-header>
      <nve-grid-row *ngFor="let workflow of workflows">
        <nve-grid-cell *ngFor="let field of workflow | keyvalue"></nve-grid-cell>
      </nve-grid-row>
    </nve-grid>
  `
})
export class App {
  workflows = [
    { id: '1', status: 'complete' },
    { id: '2', status: 'failed' },
    ...
  ];
}

Lit

Creating dynamic grid rows and cells in Lit uses the standard array syntax.

@customElement('demo-grid')
export class App {
  @state() workflows = [
    { id: '1', status: 'complete' },
    { id: '2', status: 'failed' },
    ...
  ];

  render() {
    return html`
    <nve-grid>
      <nve-grid-header>
        ${Object.keys(this.workflows[0]).map(field => html`<nve-grid-column>${field}</nve-grid-column>`)}
      </nve-grid-header>
      ${this.workflows.map(workflow => html`
      <nve-grid-row>
        ${Object.entries(workflow).map(([field, value]) => html`<nve-grid-cell>${value}</nve-grid-cell>`)}
      </nve-grid-row>`)}
    </nve-grid>`
  }
}

Data Grid Integrations

Angular

Lit