TableSort - fixed header row and fixed leftmost column?

[mjhdavies]

Hello,

I use the TableSort plug-in with a large table (many columns and rows) that cannot appear all at once on smaller screens. In connection with creating a responsive site, I would like to 'fix' the header row and the leftmost column so that they remain on screen when scrolling down or right.

I have been researching the various possibilities for fixing the header row and left column but have not, so far, been able to locate a solution that I am sure will work together with TableSort and retain the functionalities of the latter.

Does anyone have experience with this and can recommend a solution?

Regards,

mjhdavies

[lck]

Hello mjhdavies,

for this purpose the best solution is a jQuery-Plugin, such as: TableHeadFixer
Demo: Fix table head and left column

[mjhdavies]

Hello Ludwig,

Vielen Dank!

I will try to hit it out (although I have no previous experience of jQuery). I hope it is compatible with the TableSort plug-in.

Regards,

mjhdavies

[lck]

I hope it is compatible with the TableSort plug-in.

it should be possible.

- Download from GitHub tableHeadFixer.js and README.md
- store this files in ./templates/YOURTEMPLATE/js/
- open template.htm e.g. in Notepad++
- add at the end, before </body> -Tag

Code: Select all

<!-- tableHeadFixer.js - script by lai32290 https://github.com/lai32290/TableHeadFixer -->
<script type="text/javascript" src="<?php echo $pth['folder']['template']?>js/tableHeadFixer.js"></script>
<script>
    $(document).ready(function() {
        $(".sortable").tableHeadFixer({"left" : 1}); 
    });
</script>

- Login and check if jQuery is on Autoload
CMSimple: under Settings > CMS
CMSimple_XH: Plugins > jQuery > Config

- Edit your sortable table and add a <div> around table e.g.:

Code: Select all

<div class="fixedheadertable">
<table class="sortable zebra design1">
<thead>

...

</table>
</div>

- style .fixedheadertable in your stylesheet.css e.g.:

Code: Select all

.fixedheadertable {
    max-height: 800px; 
    max-width: 500px;
    /* overflow: auto; */ /* EDIT: Not necessary, generated by the plugin! */
}

*EDIT: We're talking here about CMSimple and Gerts Plugin TableSort, right? Or are you using a customized version under CMSimple_XH.

[mjhdavies]

Hi again Ludwig,

Thank you for your very detailed instructions re. Fixed Table Header.

Yes, it is Gert's Table Sort plug-in which I am using (without any modifications) in a site made with CMSimple_XH where it works fine.