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