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