tabulator-table
This commit is contained in:
salam committed
1 parent
92fee3e0a0
commit
aee337e75e
15 files changed
+639
-25109
No files matched your search
@@ -0,0 +1,211 @@
|
||||
.dark {
|
||||
border: 1px solid #282828;
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
.dark[tabulator-layout="fitColumns"] .tabulator-header .tabulator-col:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.dark .tabulator-header {
|
||||
background-color: #080808;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-calcs-holder {
|
||||
border-top: 1px solid #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background-color: #292929 !important;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col {
|
||||
border-right-color: #393838;
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col.tabulator-row-header {
|
||||
border-right: 1px solid #393838 !important;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col.range-header-col {
|
||||
border-right: 2px solid #3FB449;
|
||||
}
|
||||
|
||||
|
||||
.dark .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
border-top-color: #393838;
|
||||
border-bottom-color: #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col input,
|
||||
.dark .tabulator-header .tabulator-col select {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #4b4b4b;
|
||||
border-radius: 2px;
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col input:focus,
|
||||
.dark .tabulator-header .tabulator-col select:focus {
|
||||
border-color: #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-col input+input {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dark .tabulator-header .tabulator-cell {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.dark .tabulator-tableholder::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
/* width of the entire scrollbar */
|
||||
}
|
||||
|
||||
.dark .tabulator-tableholder::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
/* color of the tracking area */
|
||||
}
|
||||
|
||||
.dark .tabulator-tableholder::-webkit-scrollbar-thumb {
|
||||
background-color: #666;
|
||||
/* color of the scroll thumb */
|
||||
border-radius: 20px;
|
||||
/* roundness of the scroll thumb */
|
||||
border: 3px solid #333;
|
||||
/* creates padding around scroll thumb */
|
||||
}
|
||||
|
||||
.dark .tabulator-tableholder::-webkit-scrollbar-corner {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.dark .tabulator-tableholder .tabulator-table {
|
||||
color: #fff;
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
.dark .tabulator-row {
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
.dark .tabulator-row.tabulator-row-even {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.dark .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.dark .tabulator-row.tabulator-selected {
|
||||
background-color: #009136;
|
||||
}
|
||||
|
||||
.dark .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #00531f;
|
||||
}
|
||||
|
||||
.dark .tabulator-row.tabulator-group {
|
||||
border-right-color: #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell {
|
||||
border-right-color: #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell input,
|
||||
.dark .tabulator-row .tabulator-cell select,
|
||||
.dark .tabulator-row .tabulator-cell textarea {
|
||||
background-color: #121212;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border: 2px solid #3FB449 !important;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -3px;
|
||||
top: 2px;
|
||||
height: 2px;
|
||||
width: 6px;
|
||||
background: #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
background: #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -3px;
|
||||
top: 3px;
|
||||
height: 2px;
|
||||
width: 8px;
|
||||
background: #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-cell .tabulator-data-tree-branch {
|
||||
border-left: 2px solid #3FB449;
|
||||
border-bottom: 2px solid #3FB449;
|
||||
}
|
||||
|
||||
.dark .tabulator-row .tabulator-responsive-collapse {
|
||||
border-top: 1px solid #393838;
|
||||
border-bottom: 1px solid #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer {
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-calcs-holder {
|
||||
border-bottom: 1px solid #393838;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background-color: #292929 !important;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-spreadsheet-tabs {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab {
|
||||
padding: 4px 10px;
|
||||
border-width: 0 1px 1px 1px;
|
||||
background-color: #000;
|
||||
color: #ececec;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark .tabulator-footer .tabulator-page,
|
||||
.dark .tabulator-footer .tabulator-page-size {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.dark .tabulator-popup,
|
||||
.dark .tabulator-tooltip {
|
||||
color: #000;
|
||||
}
|
||||
-24898
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,29 @@
|
||||
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" },
|
||||
];
|
||||
|
||||
|
||||
// console.log('tabledata', tabledata);
|
||||
import { TabulatorFull as Tabulator } from 'tabulator-tables';
|
||||
|
||||
var table = new Tabulator("#example-table", {
|
||||
height: "311px",
|
||||
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!!!!");
|
||||
});
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user