Custom header filter not responsive

svyas001

Test case url : https://live.datatables.net/homegaco/2/

Datatable version used : 1.10.24

I am not able to set the width of the column when I used columnDefs: [{ visible: false, targets: groupColumn }, { width: '10%', targets: 5 }].

Expected Result : Custom header filter is not display responsive.

allan

You example doesn't run with an error of

DataTables warning: table id=main-table - Incorrect column count. For more information about this error, please see https://datatables.net/tn/18

Is that happening for you as well in your example?

Also worth noting that 1.10.24 is fairly old now (March 2021). 1.13.8 is the current release. It would be worth updating (although I doubt it will impact the issue you are seeing).

Allan

kthorngren

Not sure if I understand the problem but if you are wanting to control the size of the column search input then use a CSS, something like this:

thead input {
        width: 100%;
    }

If not please update your test case to show the issue.

Kevin

svyas001

I have modified the test case and it's up and running now.

https://live.datatables.net/homegaco/3/edit

In that I want to make the datable responsive with custom header filter. As you can see with custom filter it's not responsive. Also, I am not able to set the individual column height when I used columnDefs: [{ visible: false, targets: groupColumn }, { width: '10%', targets: 5 }],

kthorngren

As you can see with custom filter it's not responsive.

I added the CSS I suggested. Is this what you are looking for?

I am not able to set the individual column height when I used columnDefs

I assume you mean column width? I removed the nowrap class from the -tag table` tag. See the styling docs for details. Is this what you are looking for?

https://live.datatables.net/homegaco/5/edit

Maybe a custom ellipsis rendering helper will help.

Kevin

svyas001

Hi Kevin,

Thanks for your support.

I have implemented the CSS as you suggested and also remove the class="table datatable-responsive" and apply class="display ". After this it's look like below:

allan

Please link to a test case showing the issue so I can look into it.

You might want to add:

thead th {
  white-space: nowrap;
}

which might help.

Allan

svyas001

Hi Allan,

I have already added the test case

https://live.datatables.net/homegaco/5/edit

I have tried your solution as well but it's not working.

kthorngren

The test case looks different than your screenshot:

Does the test case display the way you want?

To help troubleshoot please update the test case to show the styling issues you have. Or post a link to your page.

Kevin

svyas001

Hi Kevin,

I have tried to create test case as it is but somehow the font is not supporting so it does not look actual but now you can see the extra filter textbox at last which should be responsive as per screen size.

https://live.datatables.net/homegaco/7/edit

Below is the JS bin without font.

This is from my actual site with font. In that you can see also extra filter and header name is not responsive.

Want to set the custom filter with responsive header, filter and grouping.

After clear the catch, now it display like this. Header is look ugly.

Also, add the UI with small screen.

Thank you,
Sanket Vyas

kthorngren

I think I understand now. Your other test cases didn't include the Responsive extension so I was trying to help with a different issue. See if this thread helps you to remove/show the appropriate search input headers using the responsive-resize event.

Kevin

svyas001

Thanks Kevin, modified my script to work accordingly. Also change the sequence of the table column and it worked.