Freezing Table Headers

API & Customization Ask Developers
21

I'm pretty good with CSS, but not to savy with JavaScript.  I had tried your suggestion and could not get it to work.  If I am able to figure it out, I will post script in this thread.  Please let me know if anyone else is able to get it to work!

22

Okay, I think you'd replace $('table.scroll') with $('#view_123 > table').

Worth checking out the online documentation for JQuery : A quick Google search brings this up http://www.w3schools.com/jquery/jquery_ref_selectors.asp

I am no JavaScript or JQuery expert and I suspect the code above might need further mods to work in Knack, and at the least needs checking for grouping to work when a column is grouped.

23

Gotcha!  Thanks Brad.  In the Javascript cod you posted via jsfiddle, where does the new selector go (or what does it replace)?

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes

$(window).resize(function() {

// Get the tbody columns width array

colWidth = $bodyCells.map(function() {

return $(this).width();

}).get();


// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    



}).resize(); // Trigger resize handler

 

24

Hey Josh, in chrome open the inspector and find the table inside the view you're after:

Right click on it and choose Copy > Selector, this copies the text you can use in CSS, JavaScript and JQuery as the selector on that page.  For the example above it gives '#view_885 > table'.

I'm sure there'd a be a fuller explainer out there than my ridiculously simple view here!

25

Brad, could you give an example of how what that JQuery selector would look like?  Where can you find this in the chrome inspector?

26

Found this via stackoverflow that uses Javascript to set the header column widths automatically: http://jsfiddle.net/hashem/crspu/554/

Haven't implemented but I think you'd only need the Javascript code with a modification to the JQuery selector to make it work.

27

Just noticed this has not been added.

It would also be useful when editing records in the database object builder page.

28

Thanks Sam works great!

Not too bad working out column widths, Once I have each column set add them up and add set table width

Thanks for the info will be implementing throughout my database

29

I was able to freeze header on a table with CSS. It was mostly trial and error as I am not experienced with CSS. If there's a better way please enlighten me.

 

#view_41 table {width: 1542px;} /*Had to fine tune width - lots of trial and error. Must be atleast larger than sum of all column widths*/

#view_41 thead {display:block; padding:2px;}


#view_41 tbody {display:block; overflow:auto; width 100%; height:200px; padding:2px;}


#view_41 *.field_124 {min-width: 50px; padding:2px;}

#view_41 *.field_27 {min-width: 100px; padding:2px;}

#view_41 *.field_181 {min-width: 100px; padding:2px;}

#view_41 *.field_209 {min-width: 25px; padding:2px;}

#view_41 *.field_178 {min-width: 300px; padding:2px;}

#view_41 *.field_207 {min-width: 75px; padding:2px;}

#view_41 *.field_186 {min-width: 60px; padding:2px;}

#view_41 *.field_182 {min-width: 75px; padding:2px;}

#view_41 *.field_51 {min-width: 60px; padding:2px;}

#view_41 *.field_53 {min-width: 60px; padding:2px;}

#view_41 *.field_30 {min-width: 60px; padding:2px;}

#view_41 *.field_69 {min-width: 100px; padding:2px;}

#view_41 *.field_71 {min-width: 100px; padding:2px;}

#view_41 *.field_70 {min-width: 100px; padding:2px;}

#view_41 *.field_135 {min-width: 100px; padding:2px;}

#view_41 *.field_92 {min-width: 75px; padding:2px;}

 

30

Ken S,

You can hide table header with CSS like this:

NOTE: You will need to update #view_XX to fit your environment.

 

#view_212 thead {
  display:none;
}

 

31

Don't need this so much in my apps, but it would certainly be a useful addition in the records section of the builder. If you're in-line editing records in the builder it's almost impossible when you've scrolled down.

32

agreed - it would be nice to freeze the top headers on a couple of our pages (like excel can do).

33

I would like to be able to do freeze headers too! 

 

34

Would also be nice to hide table header altogether.

35

I would like to see this feature as well.

36

@Stephanie, which plugins did you use? I would like to try too.  Ideally a freeze panes option a bit like excel is what I'm trying to achieve, freezing top row and column.

37

I am curious for this as well. None of my plugins worked thusfar.