JavaScript
document.addEventListener("DOMContentLoaded", function() {
var defaultFieldWidth = 160;
var grid = new FancyGrid({
renderTo: 'container',
width: 850,
height: 650,
theme: 'extra-gray',
selModel: 'rows',
trackOver: true,
filter: true,
data: data,
header: false,
nativeScroller: true,
tbar: [{
type: 'string',
width: 200,
emptyText: 'Search',
events: [{
change: function(field, value){
grid.addFilter('position', value, '*');
}
}]
},{
type: 'combo',
width: defaultFieldWidth,
emptyText: 'Teams',
multiSelect: true,
itemCheckBox: true,
editable: false,
data: ["Administrative","Business Development","Business Operations","Central Operations","Communications","Data Science","Design","Developer Experience","Engineering","Finance","Financial Crimes","Financial Partnerships","Internal Systems","Legal","Marketing","Payment System Interfaces","People","Product Management","Risk","Sales","User Operations"],
events: [{
change: function(field, values){
var _values = [];
values.forEach((value, i)=>{
_values[i] = field.data[value].text;
});
if(_values.length === 0){
grid.clearFilter('team');
}
else{
grid.addFilter('team', _values, '=');
}
}
}]
},{
type: 'combo',
width: defaultFieldWidth,
emptyText: 'Location',
multiSelect: true,
itemCheckBox: true,
editable: false,
data: ["Amsterdam", "Berlin", "Chicago", "Dublin", "London", "Melbourne", "Mexico City", "New York City", "Paris", "Remote", "San Francisco", "Seattle", "Singapore", "Stockholm", "Sao Paulo", "Tokyo"],
events: [{
change: function(field, values){
var _values = [];
values.forEach((value, i)=>{
_values[i] =...