Table

import { Table, Badge } from "@grassroot/ui-react";
 
<Table>
  <thead>
    <tr>
      <Table.Header>Service</Table.Header>
      <Table.Header>p95</Table.Header>
    </tr>
  </thead>
  <tbody>
    <Table.Row selected>
      <Table.Cell head>ledger-api</Table.Cell>
      <Table.Cell num>142ms</Table.Cell>
    </Table.Row>
  </tbody>
</Table>

<script setup lang="ts">
import { TableCell, TableRow, TableHeader, Table } from "@grassroot/ui-vue";
</script>
 
<template>
  <Table
 
  >
    <thead>
      <tr>
        <TableHeader>Service</TableHeader>
        <TableHeader>p95</TableHeader>
      </tr>
    </thead>
    <tbody>
      <TableRow
    selected
  >
        <TableCell head>ledger-api</TableCell>
        <TableCell num>142ms</TableCell>
      </TableRow>
    </tbody>
  </Table>
</template>

import { Component } from "@angular/core";
import { GrassrootTableCell, GrassrootTableRow, GrassrootTableHeader, GrassrootTable } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootTableCell, GrassrootTableRow, GrassrootTableHeader, GrassrootTable],
  template: `
    <grassroot-table
 
    >
      <thead>
        <tr>
          <grassroot-table-header>Service</grassroot-table-header>
          <grassroot-table-header>p95</grassroot-table-header>
        </tr>
      </thead>
      <tbody>
        <grassroot-table-row
      [selected]="true"
    >
          <grassroot-table-cell [head]="true">ledger-api</grassroot-table-cell>
          <grassroot-table-cell [num]="true">142ms</grassroot-table-cell>
        </grassroot-table-row>
      </tbody>
    </grassroot-table>
  `,
})
export class ExampleComponent {
}

import { Table } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Table
 
      >
        <thead>
          <tr>
            <Table.Header>Service</Table.Header>
            <Table.Header>p95</Table.Header>
          </tr>
        </thead>
        <tbody>
          <Table.Row selected>
            <Table.Cell head>ledger-api</Table.Cell>
            <Table.Cell num>142ms</Table.Cell>
          </Table.Row>
        </tbody>
      </Table>
    </>
  );
}