javascripthtmlangularjsngtable

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.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?


Solution

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