Table

const tableFixture = {
  id: "table",
  caption: "Service latency",
  headers: [
    { key: "service", label: "Service" },
    { key: "p95", label: "p95", num: true },
  ],
  rows: [
    { id: "ledger-api", service: "ledger-api", p95: "142ms", selected: true },
    { id: "billing-worker", service: "billing-worker", p95: "88ms", selected: false },
  ],
} satisfies {
  id: string;
  caption: string;
  headers: Array<{ key: "service" | "p95"; label: string; num?: boolean }>;
  rows: Array<{ id: string; service: string; p95: string; selected: boolean }>;
};
 
import { Table } from "@grassroot/ui-react";
 
export default function TableDemo() {
  return (
    <div>
      <Table>
        <caption>{tableFixture.caption}</caption>
        <thead>
          <tr>
            {tableFixture.headers.map((header) => (
              <Table.Header key={header.key} num={header.num}>
                {header.label}
              </Table.Header>
            ))}
          </tr>
        </thead>
        <tbody>
          {tableFixture.rows.map((row) => (
            <Table.Row key={row.id} selected={row.selected}>
              <Table.Cell head>{row.service}</Table.Cell>
              <Table.Cell num>{row.p95}</Table.Cell>
            </Table.Row>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

<script setup lang="ts">
const tableFixture = {
  id: "table",
  caption: "Service latency",
  headers: [
    { key: "service", label: "Service" },
    { key: "p95", label: "p95", num: true },
  ],
  rows: [
    { id: "ledger-api", service: "ledger-api", p95: "142ms", selected: true },
    { id: "billing-worker", service: "billing-worker", p95: "88ms", selected: false },
  ],
} satisfies {
  id: string;
  caption: string;
  headers: Array<{ key: "service" | "p95"; label: string; num?: boolean }>;
  rows: Array<{ id: string; service: string; p95: string; selected: boolean }>;
};
 
import { Table, TableCell, TableHeader, TableRow } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Table>
      <caption>
        {{
          tableFixture.caption
        }}
      </caption>
      <thead>
        <tr>
          <TableHeader v-for="header in tableFixture.headers" :key="header.key" :num="header.num">
            {{ header.label }}
          </TableHeader>
        </tr>
      </thead>
      <tbody>
        <TableRow v-for="row in tableFixture.rows" :key="row.id" :selected="row.selected">
          <TableCell head>{{ row.service }}</TableCell>
          <TableCell num>{{ row.p95 }}</TableCell>
        </TableRow>
      </tbody>
    </Table>
  </div>
</template>

import { Component } from "@angular/core";
const tableFixture = {
  id: "table",
  caption: "Service latency",
  headers: [
    { key: "service", label: "Service" },
    { key: "p95", label: "p95", num: true },
  ],
  rows: [
    { id: "ledger-api", service: "ledger-api", p95: "142ms", selected: true },
    { id: "billing-worker", service: "billing-worker", p95: "88ms", selected: false },
  ],
} satisfies {
  id: string;
  caption: string;
  headers: Array<{ key: "service" | "p95"; label: string; num?: boolean }>;
  rows: Array<{ id: string; service: string; p95: string; selected: boolean }>;
};
 
import {
  GrassrootTable,
  GrassrootTableCell,
  GrassrootTableHeader,
  GrassrootTableRow,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-table-demo",
  standalone: true,
  imports: [GrassrootTable, GrassrootTableCell, GrassrootTableHeader, GrassrootTableRow],
  template: `
    <div>
      <table grassrootTable>
        <caption>
          {{
            fixture.caption
          }}
        </caption>
        <thead>
          <tr>
            @for (header of fixture.headers; track header.key) {
              <th grassrootTableHeader [num]="header.num ?? false">{{ header.label }}</th>
            }
          </tr>
        </thead>
        <tbody>
          @for (row of fixture.rows; track row.id) {
            <tr grassrootTableRow [selected]="row.selected">
              <td grassrootTableCell [head]="true">{{ row.service }}</td>
              <td grassrootTableCell [num]="true">{{ row.p95 }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  `,
})
export class TableDemoComponent {
  protected readonly fixture = tableFixture;
}
 
export default TableDemoComponent;

<script lang="ts">
  const tableFixture = {
    id: "table",
    caption: "Service latency",
    headers: [
      { key: "service", label: "Service" },
      { key: "p95", label: "p95", num: true },
    ],
    rows: [
      { id: "ledger-api", service: "ledger-api", p95: "142ms", selected: true },
      { id: "billing-worker", service: "billing-worker", p95: "88ms", selected: false },
    ],
  } satisfies {
    id: string;
    caption: string;
    headers: Array<{ key: "service" | "p95"; label: string; num?: boolean }>;
    rows: Array<{ id: string; service: string; p95: string; selected: boolean }>;
  };
 
  import { tableCellClass, tableHeaderClass, tableRowClass } from "@grassroot/ui-core";
  import { Table } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Table>
    <caption>{tableFixture.caption}</caption>
    <thead>
      <tr>
        {#each tableFixture.headers as header (header.key)}
          <th class={tableHeaderClass(header.num)} data-num={header.num || undefined} scope="col">
            {header.label}
          </th>
        {/each}
      </tr>
    </thead>
    <tbody>
      {#each tableFixture.rows as row (row.id)}
        <tr class={tableRowClass(row.selected)} data-selected={row.selected || undefined}>
          <td class={tableCellClass(false, true)} data-head="true">{row.service}</td>
          <td class={tableCellClass(true)} data-num="true">{row.p95}</td>
        </tr>
      {/each}
    </tbody>
  </Table>
</div>

/** @jsxImportSource solid-js */
const tableFixture = {
  id: "table",
  caption: "Service latency",
  headers: [
    { key: "service", label: "Service" },
    { key: "p95", label: "p95", num: true },
  ],
  rows: [
    { id: "ledger-api", service: "ledger-api", p95: "142ms", selected: true },
    { id: "billing-worker", service: "billing-worker", p95: "88ms", selected: false },
  ],
} satisfies {
  id: string;
  caption: string;
  headers: Array<{ key: "service" | "p95"; label: string; num?: boolean }>;
  rows: Array<{ id: string; service: string; p95: string; selected: boolean }>;
};
 
import { Table } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function TableDemo(): JSX.Element {
  return (
    <div>
      <Table>
        <caption>{tableFixture.caption}</caption>
        <thead>
          <tr>
            {tableFixture.headers.map((header) => (
              <Table.Header num={header.num}>{header.label}</Table.Header>
            ))}
          </tr>
        </thead>
        <tbody>
          {tableFixture.rows.map((row) => (
            <Table.Row selected={row.selected}>
              <Table.Cell head>{row.service}</Table.Cell>
              <Table.Cell num>{row.p95}</Table.Cell>
            </Table.Row>
          ))}
        </tbody>
      </Table>
    </div>
  );
}