DataGridXL — Demos
Mockup data generated using Mockaroo.com.
DataGridXL Main Features Demo
This demo demonstrates many but not all of DataGridXL3 features.
First of all, you'll notice its unbeaten performance. Scroll through the list or make a multi-range cell selection using keyboard and mouse and see how snappy it all feels. Because of its curated virtual shadow DOM, DataGridXL delivers 60FPS scroll performance, even with advanced column types as seen in this demo.
Features in this Demo:
Excel-style actions:
- Full Clipboard Support: Cut, Copy and Paste
- Multi-range Cell Selection
- Undoable Row Actions: Insert, Delete, Move and Hide.
- Undoable Column Actions: Insert, Delete, Move, Hide and Resize.
- Unlimited Undo & Redo actions
- Undoable Sort By Column (Ascending or Descending)
Column Types and Settings
- Readonly-style ID column
- Avatar Column (dynamically-generated lazy-loading images)
- First Name and Last Name (blazing fast sorting)
- Support for Foreign Languages and scripts: Chinese, Arab, etc.
- Email-column with cell popover that displays mailto-hyperlink.
- Birth-date column with custom inline date picker
- City column that takes any value
- Country column with autocomplete dropdown and emoji flag rendering
- Department column: "tag" type with different colors for each value
- Checkbox column: double-click a checkbox to toggle or press space to toggle all checkboxes inside cell selection
- Rating column: displays numbers 1-5 as star graphics
- Base Salary column: formats numeric values as $x,xx. Applies heatmap-style background coloring.
Other Features in this demo
- Super fast cell search. Search any cell value using the rightmost input bar below the data grid.
- Fullscreen mode. Click the fullscreen button to make the data grid fill your entire screen.
Please sign up to download a 14-day trial version of DataGridXL3 and follow the DataGridXL documentation to get started.
Code
import DataGridXL from "path/to/DataGridXL.js";
// import data
import data from '/assets/modules/data.js';
import items from '/assets/modules/items.js';
// import pickers
import datePicker from '/assets/modules/datePicker.js';
import autocomplete from '/assets/modules/autocomplete.js';
// import validators
import isValidDateString from '/assets/modules/isValidDateString.js';
export function init(){
const grid = new DataGridXL("grid", {
licenseKey: "your_license_key",
data: data,
columns: [
{
title: "ID",
source: 'id',
readOnly: true,
width: 50
},
{
title: "Avatar",
source: "avatar",
type: "image",
settings: {
// getImageURL: function(value){
// return `/proxy-avatar?url=${encodeURIComponent(value.replace('/svg', '/png'))}`;
// }
},
hideText: true,
width: 30,
popover: function(cellRef, colRef){
// display a larger version...
const elem = document.createElement('div');
elem.style.padding = '.5rem';
const img = document.createElement('img');
img.src = cellRef.value;
img.style.width = '3rem';
img.style.height = '3rem';
elem.appendChild(img);
return elem;
}
},
{
title: "First Name",
source: "first_name"
},
{
title: "Last Name",
source: "last_name"
},
{
title: "Chinese Name",
source: "chinese_name"
},
{
title: "Arab Name",
source: "arab_name"
},
{
title: "Email",
source: "email",
type: "email",
width: 200,
popover: function(cell, colRef){
if(!colRef.settings.isEmail(cell.value)) return null;
// return a clickable-link
const elem = document.createElement('div');
elem.style.padding = '.5rem';
const link = document.createElement('a');
link.href = `mailto:${cell.value}`;
link.textContent = String(cell.value);
elem.appendChild(link);
return elem;
}
},
{
title: 'Birth Date',
source: 'birth_date',
type: 'date',
picker: datePicker,
sortFunction: function(a,b){
return new Date(a.value) - new Date(b.value);
},
validateFunction: function(cell){
if(isValidDateString(cell.value)){
return true;
} else {
return false;
}
},
},
{
title: "City",
source: "city"
},
{
title: 'Country',
source: 'country',
picker: new autocomplete(items),
validateFunction: function(cell){
// perhaps find `items` in autocomplete...
if(items.find(item => {
return item.Country == cell.value;
}) || !cell.value){
return true;
} else {
return false;
}
},
formatFunction: function(cell){
if(!cell.value) return '';
const item = items.find(item => {
return item.Country == cell.value;
});
if(!item) return cell.value;
return `${item.Emoji} ${item.Country}`;
}
},
{
title: "Department",
source: "department",
type: 'tag',
settings: {
colors: {
"default": { bg: "#cccccc", text: "#000000" },
"Development": { bg: "#ede9fe", text: "#7c3aed" }, // paars (cool dev vibe)
"Management": { bg: "#ecfccb", text: "#65a30d" }, // limegroen (organiserend, helder)
"Recruitment": { bg: "#cffafe", text: "#0891b2" }, // cyaan (mensgericht, fris)
"Human Resources": { bg: "#fee2e2", text: "#b91c1c" } // roodtint (warm, empathisch)
}
}
},
{
title: 'Available For Work',
source: 'is_available',
// settings
type: 'checkbox', // was 'boolean',
isToggle: true,
values: [true, false],
align: 'center',
parseFunction: function(cellValue){
if(cellValue == 'false' || cellValue == 'FALSE' || !cellValue){
return false;
} else {
return true;
}
},
validateFunction: function(cell){
if(typeof cell.value == 'boolean'){
return true;
} else {
return false;
}
},
hideText: true
},
{
title: "Skill Rating",
source: "skill_rating",
type: "rating",
hideText: true
},
{
title: "Base Salary",
source: "base_salary",
formatFunction: function(cellRef){
if(isNaN(cellRef.value)) return cellRef.value;
return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
cellRef.value
);
},
validateFunction: function(cellRef){
return !isNaN(cellRef.value);
},
styleFunction: function(cellRef){
const heatmapColors = [
{ value: 2000, color: "#e0f2f1" }, // minty koud
{ value: 3000, color: "#b2dfdb" },
{ value: 4000, color: "#80cbc4" },
{ value: 5000, color: "#ffecb3" },
{ value: 6000, color: "#ffcc80" },
{ value: 7000, color: "#ff8a65" },
{ value: 7500, color: "#d84315" } // diep warm oranje
]
const index = Math.floor((cellRef.value-2000)/1000);
return {
backgroundColor: heatmapColors[index]?.color || '#ccc'
};
}
},
],
allowAlign: true
});
}