:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-angular-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Component Catalog

Component	Description
`DataTable`	Presentational, generic table. Renders loading / error / empty / rows states from signal inputs. Pair it with a domain component that supplies data via TanStack Angular Query (see usageExample).

DataTable

Presentational, generic table. Renders loading / error / empty / rows states from signal inputs. Pair it with a domain component that supplies data via TanStack Angular Query (see usageExample).

{
  "name": "DataTable",
  "description": "Presentational, generic table. Renders loading / error / empty / rows states from signal inputs. Pair it with a domain component that supplies data via TanStack Angular Query (see usageExample).",
  "inputs": {
    "rows": "T[] — the data rows",
    "columns": "{ key: keyof T & string; label: string }[] — column definitions",
    "loading": "boolean — show the loading skeleton",
    "error": "string | null — show an error state"
  },
  "deps": [
    "@angular/core",
    "@angular/common"
  ],
  "code": "import { Component, input } from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n@Component({\n  selector: 'rystad-data-table',\n  standalone: true,\n  imports: [NgClass],\n  template: `\n    @if (loading()) {\n      <div class=\"rds-table__state\" role=\"status\">Loading…</div>\n    } @else if (error()) {\n      <div class=\"rds-table__state rds-table__state--error\" role=\"alert\">{{ error() }}</div>\n    } @else if (rows().length === 0) {\n      <div class=\"rds-table__state\">No records.</div>\n    } @else {\n      <table class=\"rds-table\">\n        <thead>\n          <tr>\n            @for (col of columns(); track col.key) { <th>{{ col.label }}</th> }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rows(); track $index) {\n            <tr>\n              @for (col of columns(); track col.key) { <td>{{ row[col.key] }}</td> }\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  `,\n  styleUrl: './data-table.component.scss',\n})\nexport class DataTableComponent<T extends Record<string, unknown>> {\n  readonly rows = input.required<T[]>();\n  readonly columns = input.required<{ key: keyof T & string; label: string }[]>();\n  readonly loading = input(false);\n  readonly error = input<string | null>(null);\n}",
  "notes": [
    "Colors/spacing live in data-table.component.scss and MUST use the Rystad CSS custom properties from get_design_tokens — no hardcoded hex.",
    "Keep this component presentational (no HttpClient here). The domain wrapper owns data fetching via injectQuery.",
    "Every field you render must exist on the validated endpoint response (get_endpoint_details) — never invent columns."
  ],
  "usageExample": "import { Component, inject } from '@angular/core';\nimport { injectQuery } from '@tanstack/angular-query-experimental';\nimport { lastValueFrom } from 'rxjs';\nimport { DataTableComponent } from '../shared/data-table.component';\nimport { WellsService } from './wells.service';\nimport type { Well } from './wells.model';\n\n@Component({\n  selector: 'app-wells-table',\n  standalone: true,\n  imports: [DataTableComponent],\n  template: `\n    <rystad-data-table\n      [rows]=\"query.data() ?? []\"\n      [columns]=\"columns\"\n      [loading]=\"query.isPending()\"\n      [error]=\"query.isError() ? 'Failed to load wells' : null\" />\n  `,\n})\nexport class WellsTableComponent {\n  private readonly wells = inject(WellsService);\n  protected readonly columns = [\n    { key: 'name', label: 'Well' },\n    { key: 'operator', label: 'Operator' },\n  ] as const;\n  protected readonly query = injectQuery(() => ({\n    queryKey: ['wells'],\n    queryFn: () => lastValueFrom(this.wells.list()),\n  }));\n}"
}

DataTable​

DataTable