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

Support non-sortable columns in table and prevent first row rendering flashing

This commit is contained in:
Andrew Kingston 2021-04-13 14:44:30 +01:00
parent 08a1b4c1d7
commit d5827e15b3
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/bbui/src/Table/Table.svelte
View File

@ -82,11 +82,14 @@
}) })
} }
const sortBy = field => { const sortBy = fieldSchema => {
if (field === sortColumn) { if (fieldSchema.sortable === false) {
return
}
if (fieldSchema.name === sortColumn) {
sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending" sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
} else { } else {
sortColumn = field sortColumn = fieldSchema.name
sortOrder = "Descending" sortOrder = "Descending"
} }
} }
@ -145,7 +148,7 @@
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => { const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
if (visibleRowCount === 0) { if (visibleRowCount === 0) {
return firstRow return -1
} }
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount) return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
} }
@ -195,10 +198,11 @@
{/if} {/if}
{#each fields as field} {#each fields as field}
<th <th
class="spectrum-Table-headCell is-sortable" class="spectrum-Table-headCell"
class:is-sortable={field.sortable !== false}
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'} class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'} class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(field)}> on:click={() => sortBy(schema[field])}>
<div class="spectrum-Table-headCell-content"> <div class="spectrum-Table-headCell-content">
<div class="title">{getDisplayName(schema[field])}</div> <div class="title">{getDisplayName(schema[field])}</div>
{#if schema[field]?.autocolumn} {#if schema[field]?.autocolumn}