| Base Example |
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: [
["01", "Jonathan", "jonathan@example.com","Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["02", "Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["03", "Shannon", "shannon@example.com","Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["04", "Robert", "robert@example.com","Product Accounts Technician",
"Hoeger", "San Marino"],
["05", "Noel", "noel@example.com","Customer Data Director",
"Howell - Rippin", "Germany"],
["06", "Traci", "traci@example.com","Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["07", "Kerry", "kerry@example.com","Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["08", "Patsy", "patsy@example.com","Dynamic Assurance Director",
"Streich Group", "Niue"],
["09", "Cathy", "cathy@example.com","Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-gridjs"));
|
| Card Table |
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
sort: true,
pagination: {
limit: 5
},
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-card"));
|
| Pagination |
new gridjs.Grid({
columns: [{
name: 'ID',
width: '120px',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
},"Name", "Date", "Total", "Status",
{
name: 'Actions',
width: '100px',
formatter: (function (cell) {
return gridjs.html("");
})
},
],
pagination: {
limit: 5
},
data: [
["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid",],
["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
]
}).render(document.getElementById("table-pagination"));
|
| Search |
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
search: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-search"));
|
| Sorting |
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison"
, "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-sorting"));
|
| Loading State |
vnew gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
pagination: {
limit: 5
},
sort: true,
data: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"]
])
}, 2000);
});
}
}).render(document.getElementById("table-loading-state"));
|
| Fixed Header |
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
sort: true,
pagination: true,
fixedHeader: true,
height: '400px',
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-fixed-header"));
|
| Hidden Columns |
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company",
{
name: 'Country',
hidden: true
},],
pagination: {
limit: 5
},
sort: true,
data: [
["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
"Hauck Inc", "Holy See"],
["Harold", "harold@example.com", "Forward Creative Coordinator",
"Metz Inc", "Iran"],
["Shannon", "shannon@example.com", "Legacy Functionality Associate",
"Zemlak Group", "South Georgia"],
["Robert", "robert@example.com", "Product Accounts Technician",
"Hoeger", "San Marino"],
["Noel", "noel@example.com", "Customer Data Director",
"Howell - Rippin", "Germany"],
["Traci", "traci@example.com", "Corporate Identity Director",
"Koelpin - Goldner", "Vanuatu"],
["Kerry", "kerry@example.com", "Lead Applications Associate",
"Feeney, Langworth and Tremblay", "Niger"],
["Patsy", "patsy@example.com", "Dynamic Assurance Director",
"Streich Group", "Niue"],
["Cathy", "cathy@example.com", "Customer Data Director",
"Ebert, Schamberger and Johnston", "Mexico"],
["Tyrone", "tyrone@example.com", "Senior Response Liaison",
"Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-hidden-column"));
|
