(table: HTMLTableElement)
| 12 | } |
| 13 | |
| 14 | function cloneHeader(table: HTMLTableElement) { |
| 15 | if (document.getElementById("fixed-header")) { |
| 16 | return [ |
| 17 | document.getElementById("fixed-header-wrapper") as HTMLDivElement, |
| 18 | document.getElementById("fixed-header") as HTMLDivElement, |
| 19 | ] |
| 20 | } |
| 21 | const rect = table.getBoundingClientRect() |
| 22 | const header = table.querySelector("thead") |
| 23 | if (!header) return [] |
| 24 | const wrapper = document.createElement("div") |
| 25 | const fixedHeader = document.createElement("div") |
| 26 | wrapper.id = "fixed-header-wrapper" |
| 27 | fixedHeader.id = "fixed-header" |
| 28 | wrapper.style.backgroundColor = "var(--background)" |
| 29 | wrapper.style.position = "fixed" |
| 30 | wrapper.style.top = "0" |
| 31 | wrapper.style.left = "0" |
| 32 | wrapper.style.right = "0" |
| 33 | wrapper.style.zIndex = "100" |
| 34 | wrapper.style.width = "100vw" |
| 35 | wrapper.style.display = "none" |
| 36 | fixedHeader.style.margin = "0 auto" |
| 37 | fixedHeader.style.width = `${rect.width}px` |
| 38 | fixedHeader.style.overflow = "hidden" |
| 39 | |
| 40 | const clonedTable = table.cloneNode(false) |
| 41 | const clonedHeader = header?.cloneNode(true) |
| 42 | clonedTable.appendChild(clonedHeader) |
| 43 | fixedHeader.appendChild(clonedTable) |
| 44 | wrapper.appendChild(fixedHeader) |
| 45 | document.body.appendChild(wrapper) |
| 46 | syncColumnWidths(table, fixedHeader) |
| 47 | return [wrapper, fixedHeader] |
| 48 | } |
| 49 | |
| 50 | function syncColumnWidths( |
| 51 | table: HTMLTableElement, |
no test coverage detected