Fixed columns and headers isn't quite working for us

kowadago · January 2023

Link to test case:
Table options used:

    $('.DT_table').DataTable({
          dom: 'Bfr',
          paging: false,
          scrollX: true,
          fixedHeader: true,
          fixedColumns: {left: 2},
          columnDefs: [{
            type: 'natural', targets: 1,
          }],
          buttons: [
          {
            extend: 'excel',
            text: '<i class="dt-btn-icon fa fa-2x fa-file-excel-o"></i>',
            className: 'btn btnExport',
          },
          {
            extend: 'print',
            text: '<i class="fa fa-2x fa-print">',
            className: 'btn btnPrint',
            messageTop: $(document).find('h4').html(),
            customize: function (win) {
              $(win.document.body).find('h1').css('text-align','center');
              $(win.messageTop).find('h4').css('text-align','center');
              console.log(win.document)
            },
          }],
    })

Debugger code (debug.datatables.net):
N/A
Error messages shown:
None
Description of problem:
We have an RTL table and wanted to have the first 2 columns fixed for easier readability on mobile devices (turning responsive has resulted in hiding columns, which wasn't desirable) We noticed a few issues in our case:
1. The first column was squeezed almost completely ignoring its content
2. The Datatable top buttons and search field are scrolled off the screen along while scrolling the table
3. Static header isn't working when scrolling vertically
4. The fixed columns classes & styling are gone

See here

kthorngren · January 2023

Many times this is the result of not using the correct style integration files for the style framework you are using. Use the Download Builder to get the correct files. If you are still having issues then we will need to see the problem to help debug. Please post a link to your page or a test case replicating the issues.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kowadago · January 2023

Hi! Thank you for the quick response, I used the download builder a while ago when starting this. I have tried to mimic a close example here http://live.datatables.net/cetofixe/3/

kthorngren · January 2023

I don't have the test case completely right as the search input seems to be placed incorrectly. But there are some problems I found which may help:

This error is in the console:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Move jquery.js above bootstrap.js.

You have duplicated and conflicting CSS and JS include statements. I commented them out. The CDN bundle contains these includes.
You have dom: 'Bfr'. You are missing t for the table. This can cause strange issues. Also you should use the Bootstrap styled string for the dom option.

Here is the updated test case:
http://live.datatables.net/felaluxi/1/edit

I added some rows to show fixedHeader works.

Let us know if these changes helps.

Kevin

kowadago · January 2023

I posted a reply earlier not sure if is went through but I don't see it in the thread!

Hi Kevin, good catch on the duplicate JS & CSS include statements and the jQuery misplaced include position! Much appreciated
Also many thanks on pointing my attention to the Bootstrap styled string I didn't understand its use and I missed seeing the small DOM settings letters in the CSS classes. Kudos for providing the update test case

I noticed that removing the explicit include for "https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" from my code messed the search input position, so I am keeping if for now till I figure out why this is happening.

On my code having the fixed header behaves funny, headers show on the table and show on the top of the page as I scroll vertically (appearing twice!), not sure why this ain't happening at the code example I shared earlier. Yet to figure out.

Still need to make the top print, export buttons and the search input static/fixed while scrolling the table horizontally, is there a special class that I need to add or a workaround for this that you might know of?

allan · January 2023

I've added your comment above as a quote. It was caught in the spam queue - sorry. It looks like one of the emoji characters was giving it some problems.

Are you able to share a link to a page showing the header being duplicated? It sounds like it might be cloning for some reason before it needs to - possibly due to being initialised hidden?

Still need to make the top print, export buttons and the search input static/fixed while scrolling the table horizontally

There isn't an option in DataTables for that I'm afraid. I was wondering if position: sticky would do it, but I can't seem to get that to work as expected. I'm sure there is an answer there, but I'm missing it...

Allan

kowadago · January 2023

Thank you Alan for adding my previous comment. I think you are right about the position sticky, I added the below CSS classes which seems to have helped position them. I believe the trick was to make the content of the row for the search and buttons to "fit-content" rather than 100%

.dataTables_filter,
.dt-buttons.btn-group{
  position: sticky;
  right: 0;
  width: fit-content;
}

Here is an updated fiddle
http://live.datatables.net/felaluxi/2/

Would that be easily integratabtle into DataTables allowing for different buttons setup and support for RTL?

I will try to see what is causing this duplicate header and replicate it for review..

kowadago · January 2023

A quick follow up, the CSS code above did not work for me on my page unfortunately. The buttons and search input still moves with the rest of the non-fixed columns part of the table to the far right, well beyond the user's screen view when scrolled horizontally.

kowadago · January 2023

@allan @kthorngren is there a way for us to create HTML buttons away from DataTable buttons, then hide all DataTable buttons, however be able to trigger DT buttons using the created HTML buttons? This way we can place the HTML buttons in any place, with whatever CSS style, yet be able to trigger DT buttons when clicked?

kthorngren · January 2023

Sorry I don't know why the styling is a problem. However you have a couple options:

Use the Direct insertion method to place the buttons where you want. Remove the B from the dom config.
Create your own buttons and use button().trigger() to trigger the Datatable button.

Kevin

kowadago · January 2023

Thank you, I will give that a try now. Would you be so kind to let me know how I can do the same for the columns visibility button?

I tried adding it as one of the DT buttons, but the selection pop up shows beyond the table, see here http://live.datatables.net/felaluxi/3/edit

In the example for button().trigger() it shows table.button( '2-1' ).trigger() can you explain what does '2-1' mean?

kowadago · January 2023

Option 1 Direct insertion method worked perfectly, thank you

Is there a way to do the same as below but for the search input?
table.buttons().container().appendTo( $('.#customDiv', table.table().container() ) );

kthorngren · January 2023

You can use jQuery to move the search element. Do this in `-option initComplete.

Kevin

kowadago · January 2023

That's awesome, I think we are conversing to a complete solution here...
Quick note, removing the DOM option from the configuration introduced another issue: right below the table now shows the page number (page 1 of X), and we are not interested in showing pagination at all. Is there another way other than enforcing display: none in the CSS of the dataTables_info element?

kthorngren · January 2023

Set the info to false.

Kevin

Fixed columns and headers isn't quite working for us

Fixed columns and headers isn't quite working for us

Answers

Howdy, Stranger!

Categories

DataTables

Fixed columns and headers isn't quite working for us

Fixed columns and headers isn't quite working for us

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables