search

meetselva / fixed-table-rows-cols

Fixed Table Header and Columns
http://meetselva.github.com/fixed-table-rows-cols/
Other
77 stars 42 forks source link

Dynamic Table Height #17

Open ghost opened 9 years ago

ghost commented 9 years ago

Hey first of I'd like to say thanks for the library, I have found a variety of uses and really simplifies and cleans up my code and tables, especially for sorting. One feature I would really like to see and have been unable to modify the source to fit is to set the table height dynamically. Meaning on a window resize, the table will update its height to reflect the change. I can set the initial height using a calculated function to say for example set the height of the table to the window height minus the header and footer, but cannot get the handler to update this height on an action such as a window resize. If this is an included feature I would appreciate some help with implementation, and if not; some solutions and ideas would be great to talk about!

Thank you, CGN

meetselva commented 9 years ago

Thank for trying out fixed header plugin. I will try and see how we can dynamically update the height on window resize.

meetselva commented 9 years ago

I have fixed a bug which sets the height of the inner table, however I won't be able to add the resizing code in the plugin itself, but you could achieve it by adding the below code in the window.resize handler to resize the inner tables.

 // Replace the below #fixed_hdr2 with your table selector.
 var $container = $('#fixed_hdr2').closest('.ft_container');
 var resizedHeight = $container.height() - 17; //17 is the scrollbar height
 $container.find('.ft_cwrapper').css('height', resizedHeight);

I have created a fiddle containing fixed table inside a resizable div. Resize the div to verify the desired results http://jsfiddle.net/sdsLk17k/

Note: The above code is added in resizable:stop event which is why you would notice the table resized after the resizing is complete.

Steps:

  1. Get the latest plugin from the master (the demo pages doesn't have the latest yet)
  2. Add the above fix in the desired code (window.resize handler function)

PS: The same scare is applicable when resizing the width of the container, but that would require redrawing the whole table which is a big change.

Try out the fix and let me know how it worked for you.

meetselva commented 9 years ago

Let me know if it worked for you.

ghost commented 9 years ago

So I briefly tried just utilizing your code in my solution, and did not have the result I intended, but have not had the time to dig into it really to tell you the truth. The issue that I am seeing is that once the height is set to 100%, the header seems to become unfixed, the text will not scroll underneath it, rather the header scrolls with the content out of view. Will report back;I need a little more time to view and tweak the code to be able to tell you if this is a working solution or not honestly. BTW I had thought I had sent out a reply earlier this week but do not see it under the comments, but thank you for the quick reply.