Overlaying a certain column with a blur div to hide the data underneath in Tabulator

I’m looking for advice on creating a blur overlay div to cover a specific column in a table. I want the overlay to show the header while hiding the cells in that column. It’s important that the overlay moves along with resizable columns and persists across pagination changes. How can I ensure the overlay remains in place and resizes properly with the columns? Thank you for your help! I managed to put the overlay div on top of the columns and used

table.on("columnResized", positionOverlay);

yet, with this event, the resize is updated after the mouse movement has ended. It does not simultaneously move with the columns.

And here is my positionOverlay function. Thank you for your help.

    function positionOverlay() {
        const overlay = document.getElementById("overlay");
        const tableElement = document.querySelector(".tabulator-tableholder");
        const column = table.getColumn("someColumn");
        const cellElement = column.getCells()[0]?.getElement();
  
            const rect = cellElement.getBoundingClientRect();
            const tableRect = tableElement.getBoundingClientRect();

            overlay.style.width = rect.width + "px";
            overlay.style.height = tableRect.height + "px";
            overlay.style.left = rect.left + "px";
            overlay.style.top = 34 + "px"; 
            overlay.style.display = "flex";
    }

You need to sign in to view this answers