title: jQuery DataTable - Column level filters on top and fixed height not working together
body: <p>I am trying to display data in a jQuery DataTable which has column level filter at the top, fixed height and scroller enabled. I am able to display the column level filter at the top and have it working. But, as soon as I set the height (scrollY property), the column level filters at the top disappear.</p>
  
  <p><strong>Fiddler:</strong> <a href="https://jsfiddle.net/8f63kmeo/6/" rel="nofollow noreferrer">https://jsfiddle.net/8f63kmeo/6/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table id="CustomFilterOnTop" class="display nowrap" width="100%"&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var Report4Component = (function () {
      function Report4Component() {
          //contorls
          this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
          //data table object
          this.customFilterOnTopGrid = null;
      }
      Report4Component.prototype.ShowGrid = function () {
          var instance = this;
          //create the datatable object
          instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
              columns: [
                  { data: "Description", title: "Desc" },
                  { data: "Status", title: "Status" },
                  { data: "Count", title: "Count" }
              ],
              "paging": true,
                  //scrollY: "30vh", 
              //deferRender: true,
              //scroller: true,    
              dom: '&lt;"top"Bf&lt;"clear"&gt;&gt;rt &lt;"bottom"&lt;"Notes"&gt;ilp&lt;"clear"&gt;&gt;',
              buttons: [
                  {
                      text: 'Load All',
                      action: function (e, dt, node, config) {
                          instance.ShowData(10000);
                      }
                  }
              ]
          });
          //now, add a second row in header which will hold controls for filtering. 
          $('#' + instance.customFilterOnTopControl + ' thead').append('&lt;tr role="row" id="FilterRow"&gt;' +
              '&lt;th&gt;Desc&lt;/th&gt;' +
              '&lt;th&gt;Status&lt;/th&gt;' +
              '&lt;th&gt;Count&lt;/th&gt;' +
              '&lt;/tr&gt;');
          $('#' + instance.customFilterOnTopControl + ' thead tr#FilterRow th').each(function () {
              var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
              $(this).html('&lt;input type="text" onclick="StopPropagation(event);" placeholder="Search ' + title + '" class="form-control" /&gt;');
          });
          $("div.Notes").html('&lt;div class="alert alert-warning"&gt;This is a notes section part of the table dom.&lt;/div&gt;');
      };
      Report4Component.prototype.BindEvents = function () {
          var instance = this;
          $("#CustomFilterOnTop thead input").on('keyup change', function () {
              instance.customFilterOnTopGrid
                  .column($(this).parent().index() + ':visible')
                  .search(this.value)
                  .draw();
          });
      };
      Report4Component.prototype.ShowData = function (limit) {
          if (limit === void 0) { limit = 100; }
          var instance = this;
          instance.customFilterOnTopGrid.clear(); //latest api function
          var recordList = [];
          for (var i = 1; i &lt;= limit; i++) {
              var record = {};
              record.Description = "This is a test description of record " + i;
              record.Status = "Some status " + i;
              record.Count = i;
              recordList.push(record);
          }
          instance.customFilterOnTopGrid.rows.add(recordList);
          instance.customFilterOnTopGrid.draw();
      };
      return Report4Component;
  }());
  $(function () {
      var report4Component = new Report4Component();
      report4Component.ShowGrid();
      report4Component.BindEvents();
      report4Component.ShowData();
  });
  function StopPropagation(evt) {
      if (evt.stopPropagation !== undefined) {
          evt.stopPropagation();
      }
      else {
          evt.cancelBubble = true;
      }
  }
  </code></pre>
  
  <p><strong>Current Status</strong></p>
  
  <p>When the following properties are commented,</p>
  
  <pre><code>   //scrollY: "30vh", 
     //deferRender: true,
     //scroller: true,
  </code></pre>
  
  <p>the table appears with the column level filters on top as shown below,</p>
  
  <p><a href="https://i.stack.imgur.com/dHX9q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dHX9q.png" alt="enter image description here"></a></p>
  
  <p><strong>Issue:</strong></p>
  
  <p>When the above properties are enabled, the column level filter disappears,</p>
  
  <p><a href="https://i.stack.imgur.com/DFSmJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DFSmJ.png" alt="enter image description here"></a></p>
  
  <p>You can use the fiddler to see this behavior.</p>
  
  <p><strong>Expectation:</strong></p>
  
  <p>I want to have a DataTable with column level filter on top, fixed height and scroller enabled. What am I missing? Any help / suggestion is appreciated.</p>