How Can I Put A Placeholder Text On Ng-table Select Filter?

Code sample: https://plnkr.co/edit/hdYjHtEx1Dto1q6UVCS9 $scope.idFilter = { id: { id: 'number', placeholder: 'Filter by id', // Working } }; $scope.nameFil

Solution 1:

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;
}

Solution 2:

Completing the @CMedina answer :

For multi and different select filters you can create another "statusFilter" object :

$scope.statusFilter2 = {
        status2: {
          id: "select",
          placeholder: "Filter by status",
        }
      };

and then add it to the ngTableParams filter created before :

$scope.myTableParams = new NgTableParams({filter: { status: "", status2: "" }}, {
        counts: [],
        dataset: users
      });

Don't forget to update your DOM.