aria-grid-demo: live examples of @jambotron/aria-grid with Jambotron light/dark and Synthwave themes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/examples/basic-example.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { JtGridCellDirective, JtGridColumn, JtGridComponent } from '@jambotron/aria-grid';
+import { makeServers, Server } from '../data/servers';
+import { text } from '../i18n/labels';
+import { CodeComponent } from './code';
+
+/** Example 1: columns, cell templates, sorting, paging, filtering and the empty state. */
+@Component({
+  selector: 'demo-basic-example',
+  imports: [JtGridComponent, JtGridCellDirective, DatePipe, CodeComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label class="filter">
+      <span>Filter</span>
+      <input type="search" placeholder="name, region or owner" [value]="filter()" (input)="filter.set($any($event.target).value)" />
+    </label>
+
+    <jt-grid [rows]="rows()" [columns]="columns()" [trackBy]="byId" [label]="t().servers"
+             [initialSort]="{ key: 'name', direction: 'asc' }" [pageSize]="10" [emptyMessage]="t().nothing">
+      <ng-template jtGridCell="status" let-row>
+        <span class="chip chip--{{ row.status }}">{{ statusText(row.status) }}</span>
+      </ng-template>
+      <ng-template jtGridCell="cpu" let-row>
+        <span class="meter" [style.--value]="row.cpu"><span>{{ row.cpu }}%</span></span>
+      </ng-template>
+      <ng-template jtGridCell="memoryGb" let-row>{{ row.memoryGb }} GB</ng-template>
+      <ng-template jtGridCell="created" let-row>{{ row.created | date: 'mediumDate' }}</ng-template>
+    </jt-grid>
+
+    <demo-code [code]="code" />
+  `
+})
+export class BasicExampleComponent {
+  protected readonly t = text;
+  protected readonly statusText = (s: Server['status']) => this.t()[s];
+  private readonly all = makeServers();
+  protected readonly filter = signal('');
+
+  // rows is a plain input: filter the array yourself, the grid keeps the page and the sort
+  protected readonly rows = computed(() => {
+    const q = this.filter().trim().toLowerCase();
+    return q ? this.all.filter(s => [s.name, s.region, s.owner].some(v => v.includes(q))) : this.all;
+  });
+
+  // computed — so the column titles follow the language switch
+  protected readonly columns = computed<JtGridColumn<Server>[]>(() => {
+    const t = this.t();
+    return [
+      { key: 'name', label: t.name, sort: s => s.name },
+      { key: 'region', label: t.region, sort: s => s.region },
+      { key: 'status', label: t.status, sort: s => s.status },
+      { key: 'cpu', label: t.cpu, sort: s => s.cpu, align: 'end' },
+      { key: 'memoryGb', label: t.memory, sort: s => s.memoryGb, align: 'end' },
+      { key: 'created', label: t.created, sort: s => s.created },
+      { key: 'owner', label: t.owner }   // no sort — the header is not a button
+    ];
+  });
+
+  protected readonly byId = (s: Server) => s.id;
+
+  protected readonly code = `columns: JtGridColumn<Server>[] = [
+  { key: 'name',     label: 'Name',    sort: s => s.name },
+  { key: 'status',   label: 'Status',  sort: s => s.status },
+  { key: 'cpu',      label: 'CPU',     sort: s => s.cpu, align: 'end' },
+  { key: 'created',  label: 'Created', sort: s => s.created },
+  { key: 'owner',    label: 'Owner' }            // not sortable
+];
+byId = (s: Server) => s.id;
+
+<jt-grid [rows]="rows()" [columns]="columns" [trackBy]="byId" label="Servers"
+         [initialSort]="{ key: 'name', direction: 'asc' }" [pageSize]="10"
+         emptyMessage="No servers match the filter.">
+  <ng-template jtGridCell="status" let-row>
+    <span class="chip chip--{{ row.status }}">{{ row.status }}</span>
+  </ng-template>
+  <ng-template jtGridCell="created" let-row>{{ row.created | date }}</ng-template>
+  <!-- no template for "name" and "owner": the grid prints row[key] -->
+</jt-grid>`;
+}