CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-02 02:25:17 +12:00
Code Issues Projects Releases Wiki Activity

Add setting for table row count and improve height calculation

Browse source
This commit is contained in:
Andrew Kingston 2021-03-24 19:06:02 +00:00
parent bc562ffd6b
commit 124ff6b089
2 changed files with 61 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/standard-components/manifest.json
View file

@ -1533,6 +1533,12 @@
"key": "showAutoColumns",
"defaultValue": false
},
{
"type": "number",
"label": "Row Count",
"key": "rowCount",
"defaultValue": 8
},
{
"type": "select",
"label": "Theme",

97
packages/standard-components/src/table/Table.svelte
View file

@ -8,7 +8,7 @@
export let dataProvider
export let columns
export let showAutoColumns
export let rowCount = 8
export let rowCount
const component = getContext("component")
const { styleable } = getContext("sdk")
@ -16,12 +16,26 @@
let sortColumn
let sortOrder
$: styles = makeStyles($component.styles, rowCount)
$: rows = dataProvider?.rows ?? []
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: loaded = dataProvider?.loaded ?? false
$: schema = dataProvider?.schema ?? {}
$: fields = getFields(schema, columns, showAutoColumns)
const makeStyles = (styles, rowCount) => {
if (!rowCount) {
return styles
}
return {
...styles,
normal: {
...styles.normal,
height: `${37 + rowCount * 56}px`,
},
}
}
const sortRows = (rows, sortColumn, sortOrder) => {
if (!sortColumn || !sortOrder) {
return rows
@ -52,7 +66,6 @@
}
let columns = []
Object.entries(schema).forEach(([field, fieldSchema]) => {
console.log(fieldSchema)
if (showAutoColumns || !fieldSchema?.autocolumn) {
columns.push(field)
}
@ -61,50 +74,48 @@
}
</script>
<div use:styleable={$component.styles}>
<div
lang="en"
dir="ltr"
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
style={`height: ${rowCount * 55}px;`}>
<table class="spectrum-Table">
<thead class="spectrum-Table-head">
<tr>
<div
lang="en"
dir="ltr"
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
use:styleable={styles}>
<table class="spectrum-Table">
<thead class="spectrum-Table-head">
<tr>
{#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">
{#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>
<td class="spectrum-Table-cell" tabindex="0">
<div class="spectrum-Table-cell-content">
<CellRenderer schema={schema[field]} value={row[field]} />
</div>
</th>
</td>
{/each}
</tr>
</thead>
<tbody class="spectrum-Table-body">
{#each sortedRows as row}
<tr class="spectrum-Table-row">
{#each fields as field}
<td class="spectrum-Table-cell" tabindex="0">
<div class="spectrum-Table-cell-content">
<CellRenderer schema={schema[field]} value={row[field]} />
</div>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</div>
{/each}
</tbody>
</table>
</div>
<style>
@ -119,6 +130,8 @@
z-index: 1;
}
th {
vertical-align: bottom;
height: 36px;
position: sticky;
top: 0;
background-color: var(--spectrum-global-color-gray-100);