first init
This commit is contained in:
arifal
228
resources/js/pages/table-gridjs.js
Executable file
228
resources/js/pages/table-gridjs.js
Executable file
@@ -0,0 +1,228 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import gridjs from 'gridjs/dist/gridjs.umd.js'
|
||||
import 'gridjs/dist/gridjs.umd.js'
|
||||
|
||||
class GridDatatable {
|
||||
|
||||
init() {
|
||||
this.GridjsTableInit();
|
||||
}
|
||||
|
||||
GridjsTableInit() {
|
||||
|
||||
// Basic Table
|
||||
if (document.getElementById("table-gridjs"))
|
||||
new Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
||||
})
|
||||
},
|
||||
"Name",
|
||||
{
|
||||
name: 'Email',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="">' + cell + '</a>');
|
||||
})
|
||||
},
|
||||
"Position", "Company", "Country",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" + "Details" + "</a>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
search: true,
|
||||
data: [
|
||||
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("table-gridjs"));
|
||||
|
||||
|
||||
|
||||
// pagination Table
|
||||
if (document.getElementById("table-pagination"))
|
||||
new Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="" class="fw-medium">' + cell + '</a>');
|
||||
})
|
||||
}, "Name", "Date", "Total",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '100px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<button type='button' class='btn btn-sm btn-light'>" +
|
||||
"Details" +
|
||||
"</button>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
|
||||
data: [
|
||||
["#RB2320", "Alice", "07 Oct, 2024", "$24.05"],
|
||||
["#RB8652", "Bob", "07 Oct, 2024", "$26.15"],
|
||||
["#RB8520", "Charlie", "06 Oct, 2024", "$21.25"],
|
||||
["#RB9512", "David", "05 Oct, 2024", "$25.03"],
|
||||
["#RB7532", "Eve", "05 Oct, 2024", "$22.61"],
|
||||
["#RB9632", "Frank", "04 Oct, 2024", "$24.05"],
|
||||
["#RB7456", "Grace", "04 Oct, 2024", "$26.15"],
|
||||
["#RB3002", "Hannah", "04 Oct, 2024", "$21.25"],
|
||||
["#RB9857", "Ian", "03 Oct, 2024", "$22.61"],
|
||||
["#RB2589", "Jane", "03 Oct, 2024", "$25.03"],
|
||||
]
|
||||
}).render(document.getElementById("table-pagination"));
|
||||
|
||||
// search Table
|
||||
if (document.getElementById("table-search"))
|
||||
new Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
search: true,
|
||||
data: [
|
||||
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("table-search"));
|
||||
|
||||
// Sorting Table
|
||||
if (document.getElementById("table-sorting"))
|
||||
new Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("table-sorting"));
|
||||
|
||||
|
||||
// Loading State Table
|
||||
if (document.getElementById("table-loading-state"))
|
||||
new Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: function () {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
resolve([
|
||||
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
])
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}).render(document.getElementById("table-loading-state"));
|
||||
|
||||
|
||||
// Fixed Header
|
||||
if (document.getElementById("table-fixed-header"))
|
||||
new Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
sort: true,
|
||||
pagination: true,
|
||||
fixedHeader: true,
|
||||
height: '400px',
|
||||
data: [
|
||||
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("table-fixed-header"));
|
||||
|
||||
|
||||
// Hidden Columns
|
||||
if (document.getElementById("table-hidden-column"))
|
||||
new Grid({
|
||||
columns: ["Name", "Email", "Position", "Company",
|
||||
{
|
||||
name: 'Country',
|
||||
hidden: true
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("table-hidden-column"));
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
new GridDatatable().init();
|
||||
});
|
||||
Reference in New Issue
Block a user