How to add sticky header to bootstrap-table that has a dropdown filter as the title?

0
votes

I am trying to use bootstrap-table and give it an "Excel feeling". With the option to quickly filter a column based on the values inside. But I can't seem to make it work with sticky headers, there is a bootstrap-table addon for the sticky header (data-sticky-header="true").

I tried to create something using bootstrap 5 dropdown and attach it to the title, and it works great, but when the sticky header is activated (scroll the head out of view so it kicks in), the filter and the dropdown stop working.

Here is the example, you can see that it works fine until you try to scroll down.

Maybe someone has a solution or option to use a custom sticky header that would work?

Edit:

Followed by T J answer to change the overflow, it fixed the problem where the dropdown wouldn't show on the sticky header. There was a problem where the filter wouldn't apply, and I fixed it by changing:

  const checkboxList = document
    .querySelector("#departmentDropdownMenu")
    .querySelectorAll("input");

to:

const dropdownUL = cb.parentElement.parentElement.parentElement;
  const checkboxList = dropdownUL.querySelectorAll("input");

But now a problem that I am having is that when I scroll, this filter apply once but then if I click on the dropdown again it "reset" to how it was when it started (when I scrolled past it's entry point). It changes the filter but on view it appear to "reset" to that position every time. If something is checked there when I started scrolling it will appear checked everytime the dropdown opens again. I made the updates to this example

1
javascripthtmlcsstwitter-bootstrapbootstrap-table
Is your problem the checkboxes remaining checked when reopened? Do you want to reset the selections? I don't really understand how it is expected to work... – T J
@TJ The behavior I am aiming for is that the checkboxes will remain the same, and won't reset when I re-open the dropdown. Because right now they don't reflect the real status of the filter. If I check one of the checkboxes before the stickiness activate, then scroll down and un-check it, the filter will be applied, but if I close the dropdown and open it again, it will show this box as checked – eliezra236
filterAlgorithm: clearFilter ? () => true : (row, filters) => filters[row._department_data.department], does this affect the checkbox state? Where did you find documentation of these callbacks, I can't find it – T J
@TJ it's from bootstrap-table docs. It doesn't affect the state of the of the checkboxes. I should have include a little comment there, what this part does is that I specify to bootstrap-table the function to filter based on, this filter need to return true or false. So if clearFilter is true than it means all table rows should return true. If clearFilter is false then it mean it actually need to filter, then the function is to check what the status of the object / dict on that department. – eliezra236
Something is resetting the state of checkboxes after some scrolling and I'm wondering what it is – T J

1 Answers

1
votes

Remove overflow: hidden; from .fix-sticky class

.fix-sticky {
  position: fixed!important;
  /* overflow: hidden; */
  z-index: 100;
}