MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
packages/standard-components/src/table/Table.svelte
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,59 +75,61 @@
<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'}`}>
<table class="spectrum-Table"> <div style={contentStyle}>
<thead class="spectrum-Table-head"> <table class="spectrum-Table">
<tr> <thead class="spectrum-Table-head">
{#if $component.children} <tr>
<th class="spectrum-Table-headCell">
<div class="spectrum-Table-headCell-content" />
</th>
{/if}
{#each fields as field}
<th
class="spectrum-Table-headCell is-sortable"
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(field)}>
<div class="spectrum-Table-headCell-content">
{schema[field]?.name}
<svg
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
class:visible={sortColumn === field}
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Arrow100" />
</svg>
</div>
</th>
{/each}
</tr>
</thead>
<tbody class="spectrum-Table-body">
{#each sortedRows as row}
<tr class="spectrum-Table-row">
{#if $component.children} {#if $component.children}
<td class="spectrum-Table-cell"> <th class="spectrum-Table-headCell">
<div class="spectrum-Table-cell-content"> <div class="spectrum-Table-headCell-content" />
<Provider data={row}> </th>
<slot />
</Provider>
</div>
</td>
{/if} {/if}
{#each fields as field} {#each fields as field}
<td class="spectrum-Table-cell"> <th
<div class="spectrum-Table-cell-content"> class="spectrum-Table-headCell is-sortable"
<CellRenderer schema={schema[field]} value={row[field]} /> class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(field)}>
<div class="spectrum-Table-headCell-content">
{schema[field]?.name}
<svg
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
class:visible={sortColumn === field}
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Arrow100" />
</svg>
</div> </div>
</td> </th>
{/each} {/each}
</tr> </tr>
{/each} </thead>
</tbody> <tbody class="spectrum-Table-body">
</table> {#each sortedRows as row}
<tr class="spectrum-Table-row">
{#if $component.children}
<td class="spectrum-Table-cell">
<div class="spectrum-Table-cell-content">
<Provider data={row}>
<slot />
</Provider>
</div>
</td>
{/if}
{#each fields as field}
<td class="spectrum-Table-cell">
<div class="spectrum-Table-cell-content">
<CellRenderer schema={schema[field]} value={row[field]} />
</div>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
</div> </div>
<style> <style>