From 78b1c4535ca2388003ea7a29282962bca18cee0c Mon Sep 17 00:00:00 2001
From: Gerard Braad <me@gbraad.nl>
Date: Thu, 22 Jun 2023 22:05:05 +0800
Subject: [PATCH] PatternFly table

---
 package.json  |  1 +
 src/app.tsx   | 51 +++++++++++++++++++++++++++++----------------------
 src/index.tsx |  2 +-
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index bdde1a5..bf28db6 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@patternfly/react-core": "5.0.0-prerelease.13",
     "@patternfly/react-icons": "5.0.0-prerelease.7",
     "@patternfly/react-styles": "5.0.0-prerelease.5",
+    "@patternfly/react-table": "5.0.0-prerelease.13",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "yarn": "^1.22.19"
diff --git a/src/app.tsx b/src/app.tsx
index aeeef92..dc0387b 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,7 +4,11 @@ import { TailscaleBackendState, TailscalePeer, TailscaleStatus, TailscaleUp } fr
 import { Icon } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-
+import {
+    ExpandableRowContent,
+    Table, Caption, Thead, Tbody, Tr, Th, Td,
+    SortByDirection,
+} from '@patternfly/react-table';
 
 type ApplicationProps = {
 }
@@ -30,26 +34,29 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
 
     render() {
 
+
+        const columns: TableProps['cols'] = ['', 'IP', 'Hostname'];
+  
+
+        
         return (
             <>
                 {
                     this.state.Status != null
-                        ? <table>
-                            <tr>
-                                <th>Online</th>
-                                <th>IP</th>
-                                <th>Host name</th>
-                            </tr>
-
-                            <Peer {...this.state.Status.Self} />
-                            {
-                                Object.entries(this.state.Status.Peer).map(peer => {
-                                    return <Peer {...peer[1]} />
+                        ? <Table
+                                aria-label="Tailscale peers"
+                                variant='compact' borders={false}>
+                            <Caption>Tailscale peers</Caption>
+                            <Tbody>
+                                <Peer {...this.state.Status.Self} />
+                                {
+                                    Object.entries(this.state.Status.Peer).map(peer => {
+                                        return <Peer {...peer[1]} />
+                                    }
+                                    )
                                 }
-                                )
-                            }
-
-                        </table>
+                            </Tbody>
+                        </Table>
                         : <p>Loading...</p>
                 }
             </>
@@ -61,14 +68,14 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
 class Peer extends React.Component<TailscalePeer> {
     render() {
         return (
-            <tr>
-                <td>
+            <Tr>
+                <Td>
                     {this.props.Online
                         ? <Icon status="success"><CheckCircleIcon /></Icon>
                         : <Icon status="danger"><ExclamationCircleIcon /></Icon>
-                    }</td>
-                <td>{this.props.TailscaleIPs[0]}</td>
-                <td>{this.props.HostName}</td>
-            </tr>);
+                    }</Td>
+                <Td>{this.props.TailscaleIPs[0]}</Td>
+                <Td>{this.props.HostName}</Td>
+            </Tr>);
     }
 }
diff --git a/src/index.tsx b/src/index.tsx
index 578b966..26bc6b4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Application } from './app';
 
-import "patternfly/patternfly-5-overrides.scss";
+//import "patternfly/patternfly-5-overrides.scss";
 
 document.addEventListener("DOMContentLoaded", function () {
   ReactDOM.render(