88 lines
2.4 KiB
PHP
88 lines
2.4 KiB
PHP
<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';
|
|
|
|
|
|
|
|
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>
|