Quote from Pablo Borysenco on July 15, 2025, 11:20

Hello

Unfortunately the plugin does not have such a feature.

You need to customize the code and install an additional JS library

Quote from ed2kidz on July 21, 2025, 12:38

I referred to yours <. woobe-adv-panel-fixed> freezable elements. A piece of JavaScript and CSS code is written to generate the <fixed> (sticky cannot working) state to add the freezing function of the table header:

[spoiler]

function handleScroll() {
const woobePanel = document.getElementById('woobe_tools_panel');
const scrollHead = document.querySelector('.dataTables_scrollHead');

if (!woobePanel || !scrollHead) return;

const woobeRect = woobePanel.getBoundingClientRect();
const scrollHeadRect = scrollHead.getBoundingClientRect();
const freezePosition = woobeRect.bottom;

if (scrollHeadRect.top <= freezePosition) {
scrollHead.classList.add('dataTables_scrollHead-fixed');
} else {
scrollHead.classList.remove('dataTables_scrollHead-fixed');
}
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll);
window.addEventListener('load', handleScroll);
handleScroll();

[/spoiler]

[spoiler]

.dataTables_scrollHead-fixed {

    position: fixed !important;

    top: 88px;

    z-index: 9997;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    border-bottom: 2px solid #e0f90a !important;

    width: calc(100% - 44px) !important; /* Minus left-right padding */

    box-sizing: border-box;

    transition: all 0.3s ease;

}

[/spoiler]

Unfortunately, because the HTML structure of Element <. Datatables_scroll head> contains inline styles code <position: relative>, so that the <position: fixed> must be added <!important> can take effect, leading this scheme to a one-way trip (only frozen and cannot be unfrozen). If both frozen and unfrozen take effect, it needs to add an additional wrapper element to achieve the unfreezing effect, for example:

---

 function initFreezeSystem() {
            // Create a frozen wrapper
            freezeWrapper = document.getElementById('scrollHeadFreezeWrapper');
            
            // Obtain the original header
            originalScrollHead = document.querySelector('.dataTables_scrollHead');
            
            // If the element does not exist, then exit
            if (!freezeWrapper || !originalScrollHead) return;
            
            // Clone original header
            const clonedScrollHead = originalScrollHead.cloneNode(true);
            
            // Add to Freeze Wrapper
            freezeWrapper.appendChild(clonedScrollHead);
            ……

---

This can be frozen and unfrozen, but it is very troublesome, and it will cause the problem that the header title and table column contents cannot be aligned...
I hope you can optimize the original code structure of the plugin so that more users can enjoy this function, which is often more needed by paying users.
Because there are more than 10 items on each page, it is very necessary to freeze the header in order to view and edit the contents of the table columns. Otherwise, it is necessary to scroll up and down continuously to confirm what the title corresponding to the content being edited is.

Quote from Pablo Borysenco on July 21, 2025, 12:54

Hello

We will not use this code.

As I wrote above, there is a special library that does this well and is designed specifically for this table - https://datatables.net/extensions/fixedheader/

Quote from ed2kidz on July 24, 2025, 12:00

I have installed the fixedheade extensions for DataTables using the CDN method, but it seems that the version of DataTables that comes with the BEAR plugin is incompatible with the version of the extension that was added, resulting in an undefined method of this.fnSettings; The DataTables configuration that comes with the BEAR plugin has serverSide: true enabled, but the server is not responding correctly to server-side processing requests for DataTables, resulting in an infinite loading of Processing...configuration enabled serverSide: true, but the server is not responding correctly to server-side processing requests for DataTables, resulting in an infinite loading of Processing... state; and some other styling css errors.Causes the developer tools console to report the following error:

[data-tables.js?ver=2.1.4.7:273 Uncaught TypeError: this.fnSettings is not a function
at ce.fnDrawCallback (data-tables.js?ver=2.1.4.7:273:32)
at datatables.min.js:16:46811
at Array.map (<anonymous>)
at G (datatables.min.js:16:46786)
at x (datatables.min.js:16:27125)
at datatables.min.js:16:26456
at Object.t [as success] (datatables.min.js:16:32107)
at c (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,wp-dom-ready,wp-hooks&ver=6.8.2:2:25304)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,wp-dom-ready,wp-hooks&ver=6.8.2:2:26053)
at l (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,wp-dom-ready,wp-hooks&ver=6.8.2:2:77782)]

What style should I choose in Step 1 - choose styling, and how should I adjust the version to match the added extensions?

Quote from Pablo Borysenco on July 25, 2025, 09:54

Hello

In this case, write to the support of the JS library that you want to customize