Fix table scrollbars affecting height calculation

This commit is contained in:
Andrew Kingston 2021-03-25 08:15:13 +00:00
parent 48c3b3a58d
commit 27c3be9d7e
1 changed files with 54 additions and 57 deletions

View File

@ -16,24 +16,19 @@
let sortColumn
let sortOrder
$: styles = makeStyles($component.styles, rowCount)
$: rows = dataProvider?.rows ?? []
$: contentStyle = getContentStyle(rowCount, rows.length)
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: loaded = dataProvider?.loaded ?? false
$: schema = dataProvider?.schema ?? {}
$: fields = getFields(schema, columns, showAutoColumns)
const makeStyles = (styles, rowCount) => {
const getContentStyle = (rowCount, dataCount) => {
if (!rowCount) {
return styles
}
return {
...styles,
normal: {
...styles.normal,
height: `${37 + rowCount * 56}px`,
},
return ""
}
const actualCount = Math.min(rowCount, dataCount)
return `height: ${36 + actualCount * 56}px;`
}
const sortRows = (rows, sortColumn, sortOrder) => {
@ -80,8 +75,9 @@
<div
lang="en"
dir="ltr"
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
use:styleable={styles}>
use:styleable={$component.styles}
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
<div style={contentStyle}>
<table class="spectrum-Table">
<thead class="spectrum-Table-head">
<tr>
@ -134,6 +130,7 @@
</tbody>
</table>
</div>
</div>
<style>
.spectrum {