How can i show search bar with fixed header?

How can i show search bar with fixed header?

xaki85xaki85 Posts: 1Questions: 1Answers: 0

Im using Datatable for one of my projects....a great plugin indeed, one thing i want to ask that How can i show search bar with fixed header? when I scroll down, header is fixed but i lose default search bar of datatable and nothing is shown above the header, how can i show default search bar or some of my custom filters within fixed header???


  • 990consulting990consulting Posts: 20Questions: 6Answers: 0

    I'm also interested in keeping the search bar and the editor buttons fixed at the top of the page, even as I scroll the data table. One possibility would be to create separate form elements and associate the same Javascript events with them, but it's a little opaque how to do that, since the logic for the placement of these controls seems to be defined outside the user-defined code.

  • kthorngrenkthorngren Posts: 2,067Questions: 18Answers: 452

    I'm no CSS expert but is this what you are looking for?

    It uses the dom to place the buttons and search input into a div with a class that uses position: sticky. Also fh-fixedHeader is used in the div to offset the FixedHeader.

    Haven't tested this so not sure how compatible or what other configs are needed to make it work properly. Hopefully it gets you started.


  • 990consulting990consulting Posts: 20Questions: 6Answers: 0

    Not quite, but when I discovered that you can put a scroll bar on the side of the data table itself, it solved the problem. The goal is to keep the editor buttons visible at all times. You can do that by making the buttons sticky, or by making the table scrollable. Sticky buttons is hard as hell, but scrollable table is just a setting:

  • allanallan Posts: 44,717Questions: 1Answers: 5,999 Site admin

    Yes, scrollY is basically another way of achieving what is basically a fixed layout.

    If you didn't want the internal scrolling, then Kevin's suggestion of position: sticky is absolutely the way to go in modern browsers.


Sign In or Register to comment.