grid design

resources/views/filament/pages/monitor.blade.php

@@ -6,6 +6,45 @@
         .fi-page-content {
             row-gap: 0;
         }
+
+        #monitor-table {
+            border: 1px solid #e7e7e8;
+        }
+
+        .tabulator {
+            font-size: 12px;
+        }
+
+        .tabulator .tabulator-header {
+            background-color: #fff;
+            border-bottom: 1px solid #e7e7e8;
+        }
+
+        .tabulator .tabulator-footer {
+            background-color: #fff;
+            border-top: 1px solid #e7e7e8;
+        }
+
+        .dark {
+            #monitor-table {
+                border: 1px solid #525252;
+            }
+
+            .tabulator {
+                font-size: 12px;
+            }
+
+            .tabulator .tabulator-header {
+                border-bottom: 1px solid #525252;
+            }
+
+            .tabulator .tabulator-footer {
+                border-top: 1px solid #525252;
+            }
+
+            .tabulator .tabulator-header .tabulator-col {
+                border-right: 1px solid #525252;
+            }
     </style>
     <script type="module">
         import {
@@ -15,7 +54,7 @@
         var r = 10;
 
         var tabledata = {!! $data !!}
-        var table = new Tabulator("#example-table", {
+        var table = new Tabulator("#monitor-table", {
             rowHeight: 80,
             height: screen.height - 382 + "px",
             pagination: true,
@@ -61,6 +100,6 @@
     </script>
 
 
-    <div id="example-table" class="h-20">
+    <div id="monitor-table" class="h-20">
     </div>
 </x-filament-panels::page>