132 lines
4.2 KiB
PHP
132 lines
4.2 KiB
PHP
<x-filament-panels::page class="h-[calc(100vh-70px)]" id="monitor">
|
|
<link href="css/app/tabulator-css.css" rel="stylesheet">
|
|
<div x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-custom-css'))]"></div>
|
|
|
|
<style>
|
|
.fi-page-content {
|
|
row-gap: 0;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
import {
|
|
TabulatorFull as Tabulator
|
|
} from './js/app/tabulator-js.js';
|
|
|
|
|
|
|
|
var nestedData = [{
|
|
id: 1,
|
|
make: "Ford",
|
|
model: "focus",
|
|
reg: "P232 NJP",
|
|
color: "white",
|
|
serviceHistory: [{
|
|
date: "01/02/2016",
|
|
engineer: "Steve Boberson",
|
|
actions: "Changed oli filter"
|
|
},
|
|
{
|
|
date: "07/02/2017",
|
|
engineer: "Martin Stevenson",
|
|
actions: "Break light broken"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 1,
|
|
make: "BMW",
|
|
model: "m3",
|
|
reg: "W342 SEF",
|
|
color: "red",
|
|
serviceHistory: [{
|
|
date: "22/05/2017",
|
|
engineer: "Jimmy Brown",
|
|
actions: "Aligned wheels"
|
|
},
|
|
{
|
|
date: "11/02/2018",
|
|
engineer: "Lotty Ferberson",
|
|
actions: "Changed Oil"
|
|
},
|
|
{
|
|
date: "04/04/2018",
|
|
engineer: "Franco Martinez",
|
|
actions: "Fixed Tracking"
|
|
},
|
|
]
|
|
},
|
|
]
|
|
|
|
// var tmp document.getElementsById("monitor");
|
|
// console.log(tmp)
|
|
const element = document.getElementById("monitor");
|
|
var h = element.offsetWidth - 824 + "px";
|
|
|
|
//define table
|
|
var table = new Tabulator("#example-table", {
|
|
height: h,
|
|
pagination: true,
|
|
layout: "fitColumns",
|
|
columnDefaults: {
|
|
resizable: true,
|
|
},
|
|
data: nestedData,
|
|
columns: [{
|
|
title: "Make",
|
|
field: "make"
|
|
},
|
|
{
|
|
title: "Model",
|
|
field: "model"
|
|
},
|
|
{
|
|
title: "Registration",
|
|
field: "reg"
|
|
},
|
|
{
|
|
title: "Color",
|
|
field: "color"
|
|
},
|
|
],
|
|
rowFormatter: function(row) {
|
|
//create and style holder elements
|
|
var holderEl = document.createElement("div");
|
|
var tableEl = document.createElement("div");
|
|
|
|
// holderEl.style.boxSizing = "border-box";
|
|
// holderEl.style.padding = "10px 30px 10px 10px";
|
|
// holderEl.style.borderTop = "1px solid #333";
|
|
// holderEl.style.borderBotom = "1px solid #333";
|
|
// tableEl.style.border = "1px solid #333";
|
|
|
|
holderEl.appendChild(tableEl);
|
|
|
|
row.getElement().appendChild(holderEl);
|
|
|
|
var subTable = new Tabulator(tableEl, {
|
|
headerVisible: false,
|
|
layout: "fitColumns",
|
|
data: row.getData().serviceHistory,
|
|
columns: [{
|
|
title: "Date",
|
|
field: "date",
|
|
sorter: "date"
|
|
},
|
|
{
|
|
title: "Engineer",
|
|
field: "engineer"
|
|
},
|
|
{
|
|
title: "Action",
|
|
field: "actions"
|
|
},
|
|
]
|
|
})
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<div id="example-table" class="h-20">
|
|
</div>
|
|
</x-filament-panels::page>
|