This script injects some jQuery code into a NetSuite page before it loads to cause table header (and, in edit mode, the floating buttons’ row) to become sticky. It works on all record types including custom tables that use the relevant NetSuite css classes.
/**
* @NApiVersion 2.0
* @NScriptType UserEventScript
* @NModuleScope Public
*/
define([‘N/ui/serverWidget’],
function(serverWidget) {
function beforeLoad(context) {
log.debug(“kjhjkh”);
// Warning: This approach requires direct DOM manipulation which NetSuite
// may deprecate in a future release, possibly causing this code to break (see Answer Id: 10085).
context.form.addField({
id: ‘custpage_stickyheaders_script’,
label: ‘Hidden’,
type: serverWidget.FieldType.INLINEHTML
}).defaultValue = ‘<script>’ +
‘(function($){‘ +
‘$(function($, undefined){‘ +
‘$(“.uir-machine-table-container”)’ + // All NetSuite tables are wrapped in this CSS class
‘.css(“max-height”, “70vh”)’ +
// Make header row sticky.
‘.bind(“scroll”, (event) => {‘ +
‘$(event.target).find(“.uir-machine-headerrow > td,.uir-list-headerrow > td”)’ +
‘.css({‘ +
‘”transform”: `translate(0, ${event.target.scrollTop}px)`,’ +
‘”z-index”: “9999”,’ + // See Note #1 below
‘”position”: “relative”‘ +
‘});’ +
‘})’ +
// Make floating action bar in edit mode sticky.
‘.bind(“scroll”, (event) => {‘ +
‘$(“.machineButtonRow > table”)’ +
‘.css(“transform”, `translate(${event.target.scrollLeft}px)`);’ +
‘});’ +
‘});’ +
‘})(jQuery);’ +
‘</script>’;
}
return {
beforeLoad: beforeLoad
};
});