The column filters in the header disappear when i add scrollX:true

The column filters in the header disappear when i add scrollX:true

KEshav09KEshav09 Posts: 18Questions: 9Answers: 0
edited May 2022 in Free community support

Hi team , i have requirement where i have around 12 columns which will be hidden in the beginning and the user can view the columns accordingly . I have already built a column filter which consist of check boxes which appears on mouseover on the thead
Now when i add the scroll:X as true for the datatable the column filter which i have appended to the column header appears behind the table like its hidden behind the table itself the following is the code used for the column filter

 api.columns([3, 4, 5]).every(function () {
              var column = this;
              var showSelection = $(
                '<div><img src="/images/arrow_downward.svg"></div>'
              //   $('<span> ⌄ </span>').appendTo(
              //     $(column.header())
              //   );

              var select = $(
                '<div id="selected' +
                  column.index() +
                  '"><label class="labelforfilter"></label></div>'
                .on("change", function () {
                  var vals = $(":checked", select)
                    .map(function (index, element) {
                      return $.fn.dataTable.util.escapeRegex($(element).val());

                      vals.length > 0 ? "^(" + vals + ")$" : "",

                .each(function (d, j) {
                    '<label id="label' +
                      j +
                      '" class="labelforfilter">' +
                      d +
                      "<input id=" +
                      d +
                      ' type="checkbox" value="' +
                      d +

corresponding css for the column filters : width: 100px;
position: absolute;
background-color: white;
line-height: 1.9;
border-radius: 5px;
grid-template-rows: auto auto auto auto;
display: grid;
justify-content: center;
align-items: center;
/* flex-direction: column; */
box-shadow: 0 2px 10px #0000001a;
z-index: 1000;

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer


  • allanallan Posts: 62,273Questions: 1Answers: 10,212 Site admin

    Can you look to a treat case showing the issue please?


  • KEshav09KEshav09 Posts: 18Questions: 9Answers: 0

    please take a look at the above image the filter is going under the table if i give scrollX:true

    and thats how it normally appears

  • colincolin Posts: 15,208Questions: 1Answers: 2,592
    Answer ✓

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.



Sign In or Register to comment.