koolreport datatable fixed header

ankit raj commented on Jan 26, 2021

Hi, i have followed all steps but i am unable to get fixed header for my datatable. This is a snippet :

  "plugins" => array("FixedHeader"),
            "showFooter"=>true,

            "options"=>array(
                "order" => [],
                "bInfo" => false,
                "dom" => 'Bfrtip',
                "fixedHeader"=>true,
                "buttons" => [
                     array(
                        'extend'=>'excelHtml5',
                        'text'=>'<i class="fa fa-file-excel-o"></i>',
                         'titleAttr'=>'Excel'
                     )
                ],

i have gone to my datatables folder and included the fixed header js and css files as well. There is no error thrown but it doesn't work. what should i do?

David Winterburn commented on Jan 27, 2021

Hi Ankit,

Since version 4.0.0 DataTables has supported a large number of plugins via its plugins property. In your case please try this code:

    DataTables::create(array(
        ...
        "plugins" => [ "FixedHeader" ],
        "options"=>array(
                ...
                "fixedHeader"=>true,

    ));

Let us know if it works for you. Thanks!

ankit raj commented on Feb 2, 2021

Hi david , i tried that but am still unable to get fixed header to work. Any other workaround which u can suggest?

    "plugins" => [ "FixedHeader" ],
            "showFooter"=>true,

            "options"=>array(
                "order" => [],
                "bInfo" => false,
                "dom" => 'Bfrtip',
                "fixedHeader"=>true,
                "buttons" => [
                     array(
                        'extend'=>'excelHtml5',
                        'text'=>'<i class="fa fa-file-excel-o"></i>',
                         'titleAttr'=>'Excel'
                     )
                ],

David Winterburn commented on Feb 3, 2021

I think there's a bug with loading FixedHeader css file when using Bootstraap 4. Please open the file KoolReport/datagrid/DataTables.php and add the following lines to function resourceSettings() just before this:

    protected function resourceSettings()
    {
        ...
        return $resources;
    }

    protected function resourceSettings()
    {
        ...
        if ($themeBase === "bs4") {
            $pluginNameToCsses = array(
                "FixedHeader" => array(
                    "FixedHeader-3.1.7/css/fixedHeader.bootstrap4.min.css",
                ),
            );
            $pluginCsses = [];
            foreach ($this->plugins as $name) {
                $cssFiles = Util::get($pluginNameToCsses, $name, []);
                $pluginCsses = array_merge($pluginCsses, $cssFiles);
            }
            $resources['css'] = array_merge($resources['css'], $pluginCsses);
        }
        return $resources;
    }

We will add this fix to the next version of Datagrid. Thanks!

KoolReport's Forum

Koolreport datatable fixed header #1872

Build Your Excellent Data Report