` : ''
)
.compact()
.join(' ')
.value();
const countryCellRenderer = ({ value }) => `
${ value }
`;
const percentCellRenderer = ({ value }) => {
const eDivPercentBar = document.createElement('div');
eDivPercentBar.className = 'div-percent-bar';
eDivPercentBar.style.width = `${value}%`;
if (value < 20) {
eDivPercentBar.style.backgroundColor = colors['danger'];
} else if (value < 60) {
eDivPercentBar.style.backgroundColor = colors['warning'];
} else {
eDivPercentBar.style.backgroundColor = colors['success'];
}
const eValue = document.createElement('div');
eValue.className = 'div-percent-value';
eValue.innerHTML = `${value}%`;
const eOuterDiv = document.createElement('div');
eOuterDiv.className = 'div-outer-div';
eOuterDiv.appendChild(eDivPercentBar);
eOuterDiv.appendChild(eValue);
return eOuterDiv;
}
/*
Custom Filters
*/
class SkillFilter {
init({ filterChangedCallback }) {
this.filterChangedCallback = filterChangedCallback;
// Initial State
this.model = {
android: false,
css: false,
html5: false,
mac: false,
windows: false
}
}
getModel() { }
setModel() { }
getGui() {
const eGui = document.createElement("div");
const eInstructions = document.createElement("div");
eInstructions.className = "h6 dropdown-header";
eInstructions.innerText = "Custom Skills Filter";
eGui.appendChild(eInstructions);
const createCheckMarkElement = () => {
var eCheckMark = document.createElement('i');
eCheckMark.className = "fa fa-check fa-fw ml-auto text-success";
return eCheckMark;
}
IT_SKILLS.forEach((skill, index) => {
const skillName = IT_SKILLS_NAMES[index];
const eFilter = document.createElement("a");
eFilter.className = "dropdown-item d-flex align-items-center"
//eFilter.classList.toggle("active", this.model[skill]);
eFilter.href="javascript:;";
const eImg = document.createElement("img");
eImg.src = '//www.ag-grid.com/images/skills/' + skill + '.png';
eImg.height = 20;
eImg.className = "mr-2";
const eName = document.createElement('span');
eName.innerText = skillName;
eFilter.appendChild(eImg);
eFilter.appendChild(eName);
if (this.model[skill]) {
eFilter.appendChild(
createCheckMarkElement()
);
}
eGui.appendChild(eFilter);
eFilter.addEventListener("click", (e) => {
const element = e.currentTarget;
this.model[skill] = !this.model[skill];
this.filterChangedCallback();
// Toggle check marks
if (this.model[skill]) {
element.appendChild(
createCheckMarkElement()
);
} else {
const eCheckMark = element.querySelector('i');
if (eCheckMark) { eCheckMark.remove() }
}
return false;
});
});
return eGui;
}
doesFilterPass({ data }) {
const rowSkills = data.skills;
const { model } = this;
const passed = reduce(
IT_SKILLS,
(acc, skill) => acc || (rowSkills[skill] && model[skill]),
false
);
return passed;
}
isFilterActive() {
return (
this.model.android ||
this.model.css ||
this.model.html5 ||
this.model.mac ||
this.model.windows
);
}
}
class ProficiencyFilter {
init({ filterChangedCallback, valueGetter }) {
this.filterChangedCallback = filterChangedCallback;
this.valueGetter = valueGetter;
this.selected = PROFICIENCY_NONE;
}
getModel() { }
setModel() { }
getGui() {
const eGui = document.createElement("div");
const eInstructions = document.createElement("div");
eInstructions.className = "h6 dropdown-header";
eInstructions.innerText = "Custom Proficiency Filter";
eGui.appendChild(eInstructions);
PROFICIENCY_NAMES.forEach((name, index) => {
const eFilter = document.createElement("a");
eFilter.className = "dropdown-item"
eFilter.classList.toggle("active", PROFICIENCY_VALUES[index] === this.selected);
eFilter.href="javascript:;";
eFilter.innerText = name;
eGui.appendChild(eFilter);
eFilter.addEventListener("click", (e) => {
const element = e.currentTarget;
element.parentElement.childNodes.forEach(function(node) {
node.classList.toggle('active', false);
});
element.classList.toggle("active");
this.selected = PROFICIENCY_VALUES[index];
this.filterChangedCallback();
return false;
});
});
return eGui;
}
doesFilterPass(params) {
const value = this.valueGetter(params);
const valueAsNumber = parseFloat(value);
switch (this.selected) {
case PROFICIENCY_ABOVE40:
return valueAsNumber >= 40;
case PROFICIENCY_ABOVE60:
return valueAsNumber >= 60;
case PROFICIENCY_ABOVE80:
return valueAsNumber >= 80;
default:
return true;
}
}
isFilterActive() {
return this.selected !== PROFICIENCY_NONE;
}
}
export default class AgGridExample extends React.Component {
constructor(props) {
super(props);
this.state = {
rowData: [],
visibleCount: 0,
quickFilterValue: ''
};
this.gridApi = null;
this.onGridReady = this.onGridReady.bind(this);
this.onModelUpdated = this.onModelUpdated.bind(this);
this.onQuickFilterChange = this.onQuickFilterChange.bind(this);
}
componentDidMount() {
fetch(DATA_URL)
.then(res => res.json())
.then(fetchedData => {
this.setState({ rowData: fetchedData });
});
}
componentDidUpdate(prevProps, prevState) {
if (this.gridApi) {
if (this.state.quickFilterValue !== prevState.quickFilterValue) {
this.gridApi.setQuickFilter(this.state.quickFilterValue);
}
}
}
onModelUpdated() {
if (this.gridApi) {
const model = this.gridApi.getModel();
const visibleCount = model.getRowCount();
this.setState({ visibleCount });
}
}
onGridReady({ api }) {
this.gridApi = api;
}
onQuickFilterChange(e) {
this.setState({ quickFilterValue: e.target.value });
}
render() {
const { rowData, visibleCount, quickFilterValue } = this.state;
return (
Over 2,500 Companies use ag-Grid. The "ag" part of ag-Grid stands for "agnostic". The internal ag-Grid engine is implemented in TypeScript with zero dependencies. ag-Grid supports Angular through a wrapper component. The wrapper lets you use ag-Grid in your application like any other Angular component – you pass configuration through property bindings and handle events through event bindings. You can even use Angular components to customize the grid UI and cell contents / behavior.