DataTable

const dataTableFixture = {
  id: "data-table",
  columns: [
    { key: "service", header: "Service", head: true },
    { key: "p95", header: "p95", num: true },
    { key: "status", header: "Status", sortable: false },
  ],
  rows: [
    { service: "ledger-api", p95: 142, status: "healthy" },
    { service: "billing-worker", p95: 88, status: "healthy" },
    { service: "analytics-ingest", p95: 310, status: "degraded" },
  ],
  defaultSort: "p95",
  zebra: true,
} satisfies {
  id: string;
  columns: Array<{
    key: "service" | "p95" | "status";
    header: string;
    head?: boolean;
    num?: boolean;
    sortable?: boolean;
  }>;
  rows: Array<{ service: string; p95: number; status: string }>;
  defaultSort: "service" | "p95" | "status";
  zebra: boolean;
};
 
import { DataTable, type DataColumn } from "@grassroot/ui-react";
 
type ServiceRow = (typeof dataTableFixture.rows)[number];
 
export default function DataTableDemo() {
  return (
    <div>
      <DataTable<ServiceRow>
        columns={dataTableFixture.columns as DataColumn<ServiceRow>[]}
        data={dataTableFixture.rows}
        defaultSort={dataTableFixture.defaultSort}
        zebra={dataTableFixture.zebra}
      />
    </div>
  );
}

<script setup lang="ts">
const dataTableFixture = {
  id: "data-table",
  columns: [
    { key: "service", header: "Service", head: true },
    { key: "p95", header: "p95", num: true },
    { key: "status", header: "Status", sortable: false },
  ],
  rows: [
    { service: "ledger-api", p95: 142, status: "healthy" },
    { service: "billing-worker", p95: 88, status: "healthy" },
    { service: "analytics-ingest", p95: 310, status: "degraded" },
  ],
  defaultSort: "p95",
  zebra: true,
} satisfies {
  id: string;
  columns: Array<{
    key: "service" | "p95" | "status";
    header: string;
    head?: boolean;
    num?: boolean;
    sortable?: boolean;
  }>;
  rows: Array<{ service: string; p95: number; status: string }>;
  defaultSort: "service" | "p95" | "status";
  zebra: boolean;
};
 
import { DataTable, type DataColumn } from "@grassroot/ui-vue";
 
type ServiceRow = (typeof dataTableFixture.rows)[number];
const columns = dataTableFixture.columns as DataColumn<ServiceRow>[];
</script>
 
<template>
  <div>
    <DataTable
      :columns="columns"
      :data="dataTableFixture.rows"
      :default-sort="dataTableFixture.defaultSort"
      :zebra="dataTableFixture.zebra"
    />
  </div>
</template>

import { Component } from "@angular/core";
const dataTableFixture = {
  id: "data-table",
  columns: [
    { key: "service", header: "Service", head: true },
    { key: "p95", header: "p95", num: true },
    { key: "status", header: "Status", sortable: false },
  ],
  rows: [
    { service: "ledger-api", p95: 142, status: "healthy" },
    { service: "billing-worker", p95: 88, status: "healthy" },
    { service: "analytics-ingest", p95: 310, status: "degraded" },
  ],
  defaultSort: "p95",
  zebra: true,
} satisfies {
  id: string;
  columns: Array<{
    key: "service" | "p95" | "status";
    header: string;
    head?: boolean;
    num?: boolean;
    sortable?: boolean;
  }>;
  rows: Array<{ service: string; p95: number; status: string }>;
  defaultSort: "service" | "p95" | "status";
  zebra: boolean;
};
 
import { GrassrootDataTable, type DataColumn } from "@grassroot/ui-angular";
 
type ServiceRow = (typeof dataTableFixture.rows)[number];
 
@Component({
  selector: "app-data-table-demo",
  standalone: true,
  imports: [GrassrootDataTable],
  template: `
    <div>
      <grassroot-data-table
        [columns]="columns"
        [data]="fixture.rows"
        [defaultSort]="fixture.defaultSort"
        [zebra]="fixture.zebra"
      />
    </div>
  `,
})
export class DataTableDemoComponent {
  protected readonly fixture = dataTableFixture;
  protected readonly columns = dataTableFixture.columns as DataColumn<ServiceRow>[];
}
 
export default DataTableDemoComponent;

<script lang="ts">
  const dataTableFixture = {
    id: "data-table",
    columns: [
      { key: "service", header: "Service", head: true },
      { key: "p95", header: "p95", num: true },
      { key: "status", header: "Status", sortable: false },
    ],
    rows: [
      { service: "ledger-api", p95: 142, status: "healthy" },
      { service: "billing-worker", p95: 88, status: "healthy" },
      { service: "analytics-ingest", p95: 310, status: "degraded" },
    ],
    defaultSort: "p95",
    zebra: true,
  } satisfies {
    id: string;
    columns: Array<{
      key: "service" | "p95" | "status";
      header: string;
      head?: boolean;
      num?: boolean;
      sortable?: boolean;
    }>;
    rows: Array<{ service: string; p95: number; status: string }>;
    defaultSort: "service" | "p95" | "status";
    zebra: boolean;
  };
 
  import { DataTable } from "@grassroot/ui-svelte";
</script>
 
<div>
  <DataTable
    columns={dataTableFixture.columns}
    data={dataTableFixture.rows}
    defaultSort={dataTableFixture.defaultSort}
    zebra={dataTableFixture.zebra}
  />
</div>

/** @jsxImportSource solid-js */
const dataTableFixture = {
  id: "data-table",
  columns: [
    { key: "service", header: "Service", head: true },
    { key: "p95", header: "p95", num: true },
    { key: "status", header: "Status", sortable: false },
  ],
  rows: [
    { service: "ledger-api", p95: 142, status: "healthy" },
    { service: "billing-worker", p95: 88, status: "healthy" },
    { service: "analytics-ingest", p95: 310, status: "degraded" },
  ],
  defaultSort: "p95",
  zebra: true,
} satisfies {
  id: string;
  columns: Array<{
    key: "service" | "p95" | "status";
    header: string;
    head?: boolean;
    num?: boolean;
    sortable?: boolean;
  }>;
  rows: Array<{ service: string; p95: number; status: string }>;
  defaultSort: "service" | "p95" | "status";
  zebra: boolean;
};
 
import { DataTable, type DataColumn } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
type ServiceRow = (typeof dataTableFixture.rows)[number];
 
export default function DataTableDemo(): JSX.Element {
  return (
    <div>
      <DataTable<ServiceRow>
        columns={dataTableFixture.columns as DataColumn<ServiceRow>[]}
        data={dataTableFixture.rows}
        defaultSort={dataTableFixture.defaultSort}
        zebra={dataTableFixture.zebra}
      />
    </div>
  );
}