DataGridXL — Demos
DataGridXL Demo
This demo demonstrates numerous DataGridXL features. Performance, Pickers (dropdowns), Checkbox types, Heatmap-type column, Rating, Color type, Readonly...
Code
// import data
import data from '/assets/modules/data.js';
import colors from '/assets/modules/colors.js';
import items from '/assets/modules/items.js';
// import pickers
import colorPicker from '/assets/modules/colorPicker.js';
import datePicker from '/assets/modules/datePicker.js';
import autocomplete from '/assets/modules/autocomplete.js';
// import validators
import isValidDateString from '/assets/modules/isValidDateString.js';
import validateEmail from '/assets/modules/validateEmail.js';
import DataGridXL from "path/to/DataGridXL.js";
const grid = new DataGridXL("grid", {
licenseKey: "your_license_key",
data: data,
columns: [
{
title: "Name",
source: "first_name",
picker: colorPicker,
width: 140,
align: 'right'
},
{
title: "Last Name",
source: "last_name",
// editor == 'date'
type: 'date',
picker: datePicker,
width: 200,
align: 'center'
},
{
title: 'Image',
source: 'demo',
type: 'image',
hideText: true
},
{
title: 'Labels',
source: 'device_os',
type: 'tag',
},
{
title: "Email",
source: "email",
readOnly: true
},
{
title: 'Boolean',
source: 'boolean',
// 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;
}
},
// textFormatter: function(cell){
// if(cell.value === true){
// return '✅';
// } else if(cell.value === false){
// return '⬜';
// } else {
// return cell.value;
// }
// },
validateFunction: function(cell){
if(typeof cell.value == 'boolean'){
return true;
} else {
return false;
}
},
hideText: true
},
{
title: "Internet Speed (Mbps)",
source: "rating",
styleFunction: function(cell){
if(!cell.value){
return '';
}
const minValue = 1;
const maxValue = 5;
const ratio = cell.value/maxValue;
return {
backgroundColor: (
ratio < 0.2 ? colors.critical :
ratio < 0.4 ? colors.bad :
ratio < 0.6 ? colors.medium :
ratio < 0.8 ? colors.good :
colors.verygood
)
};
}
},
{
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: 'Date',
source: 'date',
type: 'date',
picker: datePicker,
validateFunction: function(cell){
if(isValidDateString(cell.value)){
return true;
} else {
return false;
}
},
sortFunction: function(a,b){
return new Date(a.value) - new Date(b.value);
}
},
{
title: "Aka",
source: "aka",
readOnly: true
},
{
title: "Email",
source: "email",
validateFunction: function(cell){
if(validateEmail(cell.value)){
return true;
} else {
return false;
}
}
},
{
title: "Rating",
source: "rating",
// type
type: "rating",
validateFunction: function(cell){
if(!isNaN(cell.value) && cell.value >= 0 && cell.value <= 5){
return true;
} else {
return false;
}
},
//hideText: true
},
{
title: "Progress",
source: "rating",
type: "progress",
validateFunction: function(cell){
if(!isNaN(cell.value)){
return true;
} else {
return false;
}
},
//hideText: true
},
{
title: "Color",
source: "color",
type: "color",
picker: colorPicker,
validateFunction: function(cell){
if(CSS.supports('color', cell.value)){
return true;
} else {
return false;
}
}
},
// HI THERE
{
title: "Name",
source: "first_name",
picker: colorPicker,
width: 140,
align: 'right'
},
{
title: "Last Name",
source: "last_name",
// editor == 'date'
type: 'date',
picker: datePicker,
width: 200,
align: 'center'
},
// {
// title: 'Image',
// source: 'demo',
// type: 'image',
// hideText: true
// },
{
title: 'Labels',
source: 'device_os',
type: 'tag',
},
{
title: "Email",
source: "email",
readOnly: true
},
// {
// title: 'Boolean',
// source: 'boolean',
// // settings
// type: 'toggle', // was 'boolean'
// values: [true, false],
// align: 'center',
// parseValue: function(cellValue){
// if(cellValue == 'false' || cellValue == 'FALSE' || !cellValue){
// return false;
// } else {
// return true;
// }
// },
// // textFormatter: function(cell){
// // if(cell.value === true){
// // return '✅';
// // } else if(cell.value === false){
// // return '⬜';
// // } else {
// // return cell.value;
// // }
// // },
// validator: function(cell){
// if(typeof cell.value == 'boolean'){
// return true;
// } else {
// return false;
// }
// },
// hideText: true
// },
{
title: "Internet Speed (Mbps)",
source: "rating",
styleFunction: function(cell){
if(!cell.value){
return '';
}
const minValue = 1;
const maxValue = 5;
const ratio = cell.value/maxValue;
return {
backgroundColor: (
ratio < 0.2 ? colors.critical :
ratio < 0.4 ? colors.bad :
ratio < 0.6 ? colors.medium :
ratio < 0.8 ? colors.good :
colors.verygood
)
};
}
},
{
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: 'Date',
source: 'date',
type: 'date',
picker: datePicker,
validateFunction: function(cell){
if(isValidDateString(cell.value)){
return true;
} else {
return false;
}
},
sortFunction: function(a,b){
return new Date(a.value) - new Date(b.value);
}
},
{
title: "Aka",
source: "aka",
readOnly: true
},
{
title: "Email",
source: "email",
validateFunction: function(cell){
if(validateEmail(cell.value)){
return true;
} else {
return false;
}
}
},
{
title: "Rating",
source: "rating",
// type
type: "rating",
validateFunction: function(cell){
if(!isNaN(cell.value) && cell.value >= 0 && cell.value <= 5){
return true;
} else {
return false;
}
},
//hideText: true
},
{
title: "Progress",
source: "rating",
type: "progress",
validateFunction: function(cell){
if(!isNaN(cell.value)){
return true;
} else {
return false;
}
},
//hideText: true
},
{
title: "Color",
source: "color",
type: "color",
picker: colorPicker,
validateFunction: function(cell){
if(CSS.supports('color', cell.value)){
return true;
} else {
return false;
}
}
},
],
renderer: "snap"
});