use position:sticky for table header

This commit is contained in:
Jan Prochazka 2022-07-25 20:48:33 +02:00
parent f07c7909ef
commit f504283002

View File

@ -22,9 +22,6 @@
export let loadedCounts; export let loadedCounts;
let dataRows; let dataRows;
let domWrapper; let domWrapper;
let domTableHead;
let domHeaderWrap;
let theadClone;
async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[], counts) { async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[], counts) {
dbg('load level data', counts); dbg('load level data', counts);
@ -104,38 +101,11 @@
// } // }
} }
async function createHeaderClone() {
if (!domTableHead || !domHeaderWrap) return;
await tick();
if (theadClone) {
theadClone.remove();
theadClone = null;
}
theadClone = domTableHead.cloneNode(true);
const sourceCells = domTableHead.querySelectorAll('th');
const targetCells = theadClone.querySelectorAll('th');
domHeaderWrap.appendChild(theadClone);
for (const pair of _.zip(sourceCells, targetCells)) {
const [src, dst]: [any, any] = pair;
dst.style.width = `${src.getBoundingClientRect().width - 1}px`;
dst.style.minWidth = `${src.getBoundingClientRect().width - 1}px`;
dst.style.maxWidth = `${src.getBoundingClientRect().width - 1}px`;
}
}
onMount(() => {}); onMount(() => {});
$: loadData(root, $loadedCounts); $: loadData(root, $loadedCounts);
$: display = root && dataRows ? new PerspectiveDisplay(root, dataRows) : null; $: display = root && dataRows ? new PerspectiveDisplay(root, dataRows) : null;
$: {
display;
domTableHead;
domHeaderWrap;
createHeaderClone();
}
function buildMenu() { function buildMenu() {
return [ return [
{ {
@ -145,20 +115,15 @@
} }
</script> </script>
<div class="headerWrap">
<table bind:this={domHeaderWrap} />
</div>
<div <div
class="wrapper" class="wrapper"
bind:this={domWrapper} bind:this={domWrapper}
use:resizeObserver={true} use:resizeObserver={true}
on:resize={createHeaderClone}
use:contextMenu={buildMenu} use:contextMenu={buildMenu}
> >
{#if display} {#if display}
<table> <table>
<thead bind:this={domTableHead}> <thead >
{#each _.range(display.columnLevelCount) as columnLevel} {#each _.range(display.columnLevelCount) as columnLevel}
<tr> <tr>
{#each display.columns as column} {#each display.columns as column}
@ -219,15 +184,6 @@
flex: 1; flex: 1;
} }
.headerWrap {
position: absolute;
left: 0;
top: 0;
right: 14px;
overflow: hidden;
z-index: 100;
}
table { table {
/* position: absolute; /* position: absolute;
left: 0; left: 0;
@ -235,27 +191,47 @@
bottom: 0; bottom: 0;
right: 0; */ right: 0; */
overflow: scroll; overflow: scroll;
border-collapse: collapse; /* border-collapse: collapse; */
outline: none; outline: none;
border-collapse: separate; /* Don't collapse */
border-spacing: 0;
} }
table thead {
position: sticky;
top: 0;
z-index: 100;
}
th { th {
border: 1px solid var(--theme-border); /* border: 1px solid var(--theme-border); */
text-align: left; text-align: left;
padding: 2px; padding: 2px;
margin: 0; margin: 0;
background-color: var(--theme-bg-1); background-color: var(--theme-bg-1);
overflow: hidden; overflow: hidden;
vertical-align: center; vertical-align: center;
z-index: 100;
border-bottom: 1px solid var(--theme-border);
border-right: 1px solid var(--theme-border);
}
thead tr:first-child th {
border-top: 1px solid var(--theme-border);
} }
td { td {
font-weight: normal; font-weight: normal;
border: 1px solid var(--theme-border); /* border: 1px solid var(--theme-border); */
background-color: var(--theme-bg-0); background-color: var(--theme-bg-0);
padding: 2px; padding: 2px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
vertical-align: top; vertical-align: top;
border-bottom: 1px solid var(--theme-border);
border-right: 1px solid var(--theme-border);
} }
/* /*