How can we fix the header of the Datatable report?

paulo commented on May 28, 2019

I'm trying to fix the header, so when scrolling down we don't lose the the columns. How can this be done in the report? I've tried this but it doesn't fix the header. It shows on the top and the bottom of the report. I thought I woudl scroll down and the header would stay on the top

  DataTables::create(array(
        "dataSource"=>$this->dataStore("searchabletours"),
        "options"=>array(
            "searching"=>true,
            "fixedHeader"=>true
           // "paging"=>true,
        ),
        "columns"=>array(

thanks

David Winterburn commented on Jun 4, 2019

Hi Paulo,

To use DataTables' fixed header option you would need the FixedHeader extension which we haven't included as default for datagrid. Please download the extension via this link:

https://datatables.net/extensions/fixedheader/#Download

Then add or replace the downloaded files to folder packages/datagrid/DataTables. Finally see if the fixedHeader option works or not. Thanks!

paulo commented on Jun 11, 2019

is there a way to install via composer? thanks

David Winterburn commented on Jun 12, 2019

Hi Paulo,

These are mostly js and css files. You could download and replace the files to the datagrid/Datatables folder. We will consider if the fixHeader plugin should be included in the future versions of datagrid. Thanks!

paulo commented on Jun 13, 2019

thanks David. the challenge is for most part I don't have access to the server. My understanding is a lot of people here are on the same boat. We use code control like github and the deployment process takes care of this. In my case I user Forge and Digital Ocean. So, I never have to manually install anything. If/when I do, I need time from administrators which is always a challenge. If we could have that as part of the full cycle, it would be much better.

Thanks for getting back to me. I will try the way you described. Paulo

David Winterburn commented on Jun 14, 2019

Hi Paulo,

I've just checked the latest Datagrid package. It seems the DataTables widget already had the FixedHeader extension included. Please try the option again and let us know if it works for you or not:

        "options"=>array(
            ...
            "fixedHeader" => true,
            ...
        ),

Thanks!

Tracx commented on Jun 8, 2020

hello, I am having the same issue and i am using it like this, but it wont stick to the top when scrolling down. Can anyone help me?

David Winterburn commented on Jun 9, 2020

Hi,

I forgot to mention that to keep DataTables from loading too many plugins which could slow web page, by default only the following 4 plugins are loaded: "AutoFill", "ColReorder", "RowGroup", "Select".

In order for fixed header to work, please add it to DataTables' plugin property like this:

DataTables::create(array(
    ...
    "plugins" => array("FixedHeader")
));

Thanks!

paulo commented on Jun 9, 2020

Hi David, I tried this:

<?php
DataTables::create(array(
    "dataSource"=>$this->dataStore("employee"),
    "plugins" => array("FixedHeader"),

    "options"=>array(
        "paging" => true,
        "fixedHeader" => true,
        "searching"=>true,
        "colReorder"=> true,
    )
));
?>

And it is still now fixing the header - I tried including paging and without paging and the header doesn't stay fixed on the top :(

thanks

Tracx commented on Jun 9, 2020

I added it as well but still not working for me either

David Winterburn commented on Jun 10, 2020

The fixed headers only show when the table is still on screen. If you scroll past the last row of the table the fixed headers will disappear.

If the headers doesn't show even when the table is on screen, please open your browser dev tool (F12) and see if there's any warning message. Thanks!

paulo commented on Jun 10, 2020

thanks again David. Table is still on the screen. Browser error: datatables.bs4.min.css:1 Failed to load resource: the server responded with a status of 404 ()

When I look at the source: e>Active Employee List</title> </head> <body><script type='text/javascript' src='/koolreport_assets/2275118670/KoolReport.js'></script><script type='text/javascript'>KoolReport.load.resources({"js":["\/koolreport_assets\/592253192\/jquery.min.js",["\/koolreport_assets\/807407389\/js\/bootstrap.bundle.min.js"]],"css":["\/koolreport_assets\/807407389\/css\/bootstrap.min.css"]});</script> <div class="report-content">

at the bottom of the page: </table> <script type="text/javascript">

KoolReport.widget.init(
    {"js":["\/koolreport_assets\/592253192\/jquery.min.js",["\/koolreport_assets\/4247062198\/datatables.min.js",["\/koolreport_assets\/4247062198\/pagination\/input.js","\/koolreport_assets\/4247062198\/datatables.bs4.min.js"]]],"css":["\/koolreport_assets\/4247062198\/datatables.bs4.min.css"]},
    function() {
        
        var name = 'datatables5ee0e4e35c0e21';
        var dt = window[name] = $('#' + name).DataTable({"searching":true,"paging":true,"fixedHeader":true,"colReorder":true});

                    
        
        
                            }
);

</script></krwidget>

</div> </body> </html>

thanks

Tracx commented on Jun 10, 2020

My table is on screen and no error messages show :C

David Winterburn commented on Jun 11, 2020

@Paulo: is the path "/koolreport_assets/2275118670/KoolReport.js" correct? If it isn't please adjust your asset property in your report to make it load correctly.

@Tracx: please try this simple setup to see if fixed headers works:

DataTables::create(array(
                "dataSource" => $this->dataStore("myDatastore"),
                "plugins" => ["FixedHeader"],
                "options" => array(
                    "fixedHeader" => true
                )
));

paulo commented on Jun 11, 2020

tried this locally:

Fixed header:

<?php
DataTables::create(array(
    "dataSource"=>$this->dataStore("employee"),
    "plugins" => ["FixedHeader"],
    "options" => array(
      "fixedHeader" => true,
        "searching"=>true,
        "colReorder"=> true,
    )
));
?>

no errors in the console of the browser, so asset is not an issue.

Header doesn't stay fixed. David, what the fixedHeader is doing is repeating the same header at the bottom of the report. As a reminder: We are using Laravel thanks

David Winterburn commented on Jun 12, 2020

Hi Paulo,

Please try to creat an alone report (outside of your Laravel) and use DataTables' fixed header to see if it works. If it does work there might be some conflict with Laravel. If it doesn't work we will continue investigating from there.

paulo commented on Jun 12, 2020

Tracx, are you also using Laravel ? thanks

Tracx commented on Jun 15, 2020

hey Paulo. Yes, I am using Laravel and im asuming its a conflict with Laravel because it wont work still

David Winterburn commented on Jun 16, 2020

Please try this test if you're using Laravel, add the following link to your view page:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

Let me know if this solves your problem or not. Thanks!

paulo commented on Jun 16, 2020

YES!!!! thank you very much. This fixed the header on top and the rows underflow the header

paulo commented on Jun 16, 2020

Should I apply this css everywhere now? thanks.

David Winterburn commented on Jun 17, 2020

Probably only needs this css file when there's a problem with fixed header (Laravel is one of those I think).

paulo commented on Jun 18, 2020

ok thank you

paulo commented on Apr 21, 2021

Hi All, is there a fix for this without having to repeat the link ref css to every report ? thank you

Sebastian Morales commented on Apr 27, 2021

Paulo, we will add this css file for FixedHeader plugin by default in the next version of Datagrid package so that users won't have to manually do. Cheers,

paulo commented on Apr 27, 2021

thank you!

KoolReport's Forum

How can we fix the header of the Datatable report? #895

Build Your Excellent Data Report