Don't set explicit height of tables when total row count is equal or less than the desired rows, to avoid tiny overflow due to horizontal scrollbars

This commit is contained in:
Andrew Kingston 2022-03-02 09:06:31 +00:00
parent 44063d9d9f
commit 3bfea0a472
1 changed files with 17 additions and 6 deletions

View File

@ -56,6 +56,7 @@
$: if (!loading) loaded = true $: if (!loading) loaded = true
$: fields = getFields(schema, showAutoColumns, autoSortColumns) $: fields = getFields(schema, showAutoColumns, autoSortColumns)
$: rows = fields?.length ? data || [] : [] $: rows = fields?.length ? data || [] : []
$: totalRowCount = rows?.length || 0
$: visibleRowCount = getVisibleRowCount( $: visibleRowCount = getVisibleRowCount(
loaded, loaded,
height, height,
@ -63,7 +64,12 @@
rowCount, rowCount,
rowHeight rowHeight
) )
$: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight) $: heightStyle = getHeightStyle(
visibleRowCount,
rowCount,
totalRowCount,
rowHeight
)
$: sortedRows = sortRows(rows, sortColumn, sortOrder) $: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: gridStyle = getGridStyle(fields, schema, showEditColumn) $: gridStyle = getGridStyle(fields, schema, showEditColumn)
$: showEditColumn = allowEditRows || allowSelectRows $: showEditColumn = allowEditRows || allowSelectRows
@ -107,11 +113,16 @@
return Math.min(allRows, Math.ceil(height / rowHeight)) return Math.min(allRows, Math.ceil(height / rowHeight))
} }
const getContentStyle = (visibleRows, rowCount, rowHeight) => { const getHeightStyle = (
if (!rowCount || !visibleRows) { visibleRowCount,
rowCount,
totalRowCount,
rowHeight
) => {
if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
return "" return ""
} }
return `height: ${headerHeight + visibleRows * rowHeight}px;` return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
} }
const getGridStyle = (fields, schema, showEditColumn) => { const getGridStyle = (fields, schema, showEditColumn) => {
@ -264,11 +275,11 @@
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`} style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
> >
{#if !loaded} {#if !loaded}
<div class="loading" style={contentStyle}> <div class="loading" style={heightStyle}>
<ProgressCircle /> <ProgressCircle />
</div> </div>
{:else} {:else}
<div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}> <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
{#if fields.length} {#if fields.length}
<div class="spectrum-Table-head"> <div class="spectrum-Table-head">
{#if showEditColumn} {#if showEditColumn}