GridJs
Overview Official Website
Grid.js is a Free and open-source JavaScript table plugin
Basic#
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
<div id="table-gridjs"></div>
// Basic Table
if (document.getElementById("table-gridjs"))
new gridjs.Grid({
columns: [{
name: 'ID',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
},
"Name",
{
name: 'Email',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
},
"Position", "Company", "Country",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html("" + "Details" + "");
})
},
],
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#
Pagination can be enabled by setting
pagination: true:
<div id="table-pagination"></div>
// pagination Table
if (document.getElementById("table-pagination"))
new gridjs.Grid({
columns: [{
name: 'ID',
width: '120px',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
}, "Name", "Date", "Total",
{
name: 'Actions',
width: '100px',
formatter: (function (cell) {
return gridjs.html("");
})
},
],
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#
Grid.js supports global search on all
rows and columns. Set
search: true to enable the
search plugin:
<div id="table-search"></div>
// search Table
if (document.getElementById("table-search"))
new gridjs.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#
To enable sorting, simply add
sort: true to your config:
<div id="table-sorting"></div>
// Sorting Table
if (document.getElementById("table-sorting"))
new gridjs.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#
Grid.js renders a loading bar automatically while it waits for the data to be fetched. Here we are using an async function to demonstrate this behaviour (e.g. an async function can be a XHR call to a server backend)
<div id="table-loading-state"></div>
// Loading State Table
if (document.getElementById("table-loading-state"))
new gridjs.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#
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
<div id="table-fixed-header"></div>
// Fixed Header
if (document.getElementById("table-fixed-header"))
new gridjs.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"));