tabulator-table

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

@@ -1,48 +1,87 @@
-@push('head')
-    <!-- Styles -->
-    //
-    <link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
-    <!-- Scripts -->
-    var table = new Tabulator("#example-table", {
-    layout: "fitDataFill",
-    height: "311px",
-    columns: [{
-    title: "Name",
-    field: "name"
-    },
-    {
-    title: "Progress",
-    field: "progress",
-    hozAlign: "right",
-    sorter: "number"
-    },
-    {
-    title: "Gender",
-    field: "gender"
-    },
-    {
-    title: "Rating",
-    field: "rating",
-    hozAlign: "center"
-    },
-    {
-    title: "Favourite Color",
-    field: "col"
-    },
-    ],
-    });
-    //
-    <script src="{{ asset('js/components/pizza.js') }}"></script>
-@endpush
+<x-filament-panels::page class="h-[calc(100vh-100px)]">
+    <link href="css/app/tabulator-css.css" rel="stylesheet">
+    <div x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-custom-css'))]"></div>
+    <script type="module">
+        import {
+            TabulatorFull as Tabulator
+        } from './js/app/tabulator-js.js';
 
-<x-filament-panels::page>
-    <div x-data="{}" x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-stylesheet'))]">
-        <!-- ... -->
-    </div>
-    <div x-load x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('tabulator') }}">
-        <!-- ... -->
-    </div>
 
-    {{-- Page content --}}
-    <div id="example-table"></div>
+
+        var tabledata = [{
+                id: 1,
+                name: "Oli Bob",
+                age: "12",
+                col: "red",
+                dob: ""
+            },
+            {
+                id: 2,
+                name: "Mary May",
+                age: "1",
+                col: "blue",
+                dob: "14/05/1982"
+            },
+            {
+                id: 3,
+                name: "Christine Lobowski",
+                age: "42",
+                col: "green",
+                dob: "22/05/1982"
+            },
+            {
+                id: 4,
+                name: "Brendon Philips",
+                age: "125",
+                col: "orange",
+                dob: "01/08/1980"
+            },
+            {
+                id: 5,
+                name: "Margret Marmajuke",
+                age: "16",
+                col: "yellow",
+                dob: "31/01/1999"
+            },
+        ];
+
+        var table = new Tabulator("#example-table", {
+            height: "100%",
+            data: tabledata, //assign data to table
+            layout: "fitColumns", //fit columns to width of table (optional)
+            columns: [{
+                    title: "Name",
+                    field: "name"
+                },
+                {
+                    title: "Progress",
+                    field: "progress",
+                    sorter: "number"
+                },
+                {
+                    title: "Gender",
+                    field: "gender"
+                },
+                {
+                    title: "Rating",
+                    field: "rating"
+                },
+                {
+                    title: "Favourite Color",
+                    field: "col"
+                },
+                {
+                    title: "Date Of Birth",
+                    field: "dob",
+                    hozAlign: "center"
+                },
+            ],
+        });
+
+        table.on("rowClick", function(e, row) {
+            alert("Row " + row.getData().id + " Clicked!!!!");
+        });
+    </script>
+    <div id="example-table">
+    </div>
 </x-filament-panels::page>