`webix.ready(function(){
grid = webix.ui({
container:"tracker",
editaction:"click",
editable:true,
view:"datatable",
css:"webix_header_border",
leftSplit:1,
columns:[
{% for column in program_fields %}
{
id:"{{ column }}",
header:[
{ text:"{{ column|external_name }}", css:"multiline" },
{% if column in program_date_fields %}
{ content:"dateRangeFilter" }
],
sort:"date",
{% if column in editable_fields %}
editor:"date",
fixed: true,
{% endif %}
template: function (obj, common) {
if (obj.{{ column }} === null || obj.{{ column }} === "") {
{% if column in program_na_fields %}
return `<div class="date-cell" >
${webix.i18n.dateFormatStr(obj.{{ column }})}
{% if column in editable_fields %} <span class="webix_icon wxi-pencil">-<input class='nabtn' type='button' value='N/A' na-date-column='{{ column }}' style='font-size: small;'></span>{% endif %}</div>`;
{% else %}
{% if column in editable_fields %}
return common.editIcon(obj, common);
{% else %}
return "";
{% endif %}
{% endif %}
} else if (obj.{{ column }} < new Date(1901, 0, 1)) {
return "N/A";
} else {
return `<div class="date-cell">${webix.i18n.dateFormatStr(obj.{{ column }})}</div>`;
}
}
{% endif %}
},
{% endfor %}
],
select:"row",
scroll:"xy",
hidden:false,
resizeColumn:true,
headermenu:true,
data: data,
});
});
`
I have integrated my datatable with the webix library to create a customized feature - an N/A button in each specific column's datarange filter. This button will help filter out all the N/A values within that particular column, eliminating the need to manually select Jan 1900 as the date range option. By implementing this button, users can easily toggle and filter out N/A values in their data table.