mirror of
https://github.com/dbgate/dbgate
synced 2024-11-08 04:35:58 +00:00
use position:sticky for table header
This commit is contained in:
parent
f07c7909ef
commit
f504283002
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
Loading…
Reference in New Issue
Block a user