229 lines
12 KiB
JavaScript
229 lines
12 KiB
JavaScript
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();
|
|
});
|