Code sample: https://plnkr.co/edit/hdYjHtEx1Dto1q6UVCS9
$scope.idFilter = {
id: {
id: "number",
placeholder: "Filter by id", // Working
}
};
$scope.nameFilter = {
id: {
id: "text",
placeholder: "Filter by name", // Working
}
};
$scope.statusFilter = {
status: {
id: "select",
placeholder: "Filter by status", // Not working
}
};
It is easy to add a placeholder on a number or text filters in ngTable. However I could not manage to find a solution for select filter. I know that placeholder on a 'select' element is not trivial by itself, but it is achievable.
Can you find a solution for it in ngTable?
If not, can you recommend another table component that have this feature?
You can add extra option in your select with val:''
to simulate placeholder:
{
id: '',
title: 'Filter by Status'
}
And add default filter to refer "Filter by Status"
$scope.myTableParams = new NgTableParams({filter: { status: ""}}, {
counts: [],
dataset: users
});
Result: https://plnkr.co/edit/luaas1dExIuCYMa4WtN3?p=preview
Update:
Add this CSS in order to distinct the placeholder look from other selections:
/* Set the select filter placeholder item look */
table.ng-table select.filter-select.ng-empty {
color: gray;
}
/* Prevent select filter placeholder look to cascade to its options */
table.ng-table select.filter-select > option {
color: #767676;
}