Fix scroll state not resetting

This commit is contained in:
Andrew Kingston 2021-04-13 15:10:27 +01:00
parent 6ba2d7a0ef
commit 0f56ed3c95
1 changed files with 117 additions and 106 deletions

View File

@ -50,6 +50,15 @@
rows.length
)
// Reset state when data chanegs
$: data.length, reset()
const reset = () => {
nextScrollTop = 0
scrollTop = 0
clearTimeout(timeout)
timeout = null
}
const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
if (!loaded) {
return rowCount || 0
@ -175,15 +184,15 @@
}
</script>
<div class="wrapper" bind:offsetHeight={height}>
{#if !loaded}
<div class="loading" style={contentStyle} />
{:else}
<div
bind:offsetHeight={height}
on:scroll={onScroll}
class:quiet
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
class="container">
{#if !loaded}
<div class="loading" style={contentStyle} />
{:else}
<div style={contentStyle}>
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
{#if sortedRows?.length}
@ -199,7 +208,7 @@
{#each fields as field}
<th
class="spectrum-Table-headCell"
class:is-sortable={field.sortable !== false}
class:is-sortable={schema[field].sortable !== false}
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(schema[field])}>
@ -286,17 +295,18 @@
</tbody>
</table>
</div>
</div>
{/if}
</div>
<style>
.loading,
.container,
th {
.wrapper {
background-color: var(--spectrum-global-color-gray-100);
overflow: hidden;
}
.container {
height: 100%;
position: relative;
overflow: auto;
border: 1px solid
@ -358,6 +368,7 @@
position: sticky;
top: 0;
z-index: 2;
background-color: var(--spectrum-global-color-gray-100);
}
.spectrum-Table-headCell-content {
white-space: nowrap;