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

Add table placeholder

This commit is contained in:
Andrew Kingston 2021-04-09 14:48:26 +01:00
parent e76f40548b
commit b8c9cf0898
1 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
export let allowEditColumns = true export let allowEditColumns = true
export let selectedRows = [] export let selectedRows = []
export let customColumnRenderer = SelectEditRenderer export let customColumnRenderer = SelectEditRenderer
export let customColumnTitle export let customColumnTitle = null
export let customRenderers = [] export let customRenderers = []
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -87,7 +87,8 @@
const getFields = (schema, showAutoColumns) => { const getFields = (schema, showAutoColumns) => {
let columns = [] let columns = []
let autoColumns = [] let autoColumns = []
Object.entries(schema).forEach(([field, fieldSchema]) => { Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
schema[field].name = field
if (!fieldSchema?.autocolumn) { if (!fieldSchema?.autocolumn) {
columns.push(field) columns.push(field)
} else if (showAutoColumns) { } else if (showAutoColumns) {
@ -200,39 +201,51 @@
</tr> </tr>
</thead> </thead>
<tbody class="spectrum-Table-body"> <tbody class="spectrum-Table-body">
{#each sortedRows as row, idx} {#if sortedRows?.length}
<tr {#each sortedRows as row, idx}
on:click={() => toggleSelectRow(row)} <tr
class="spectrum-Table-row" on:click={() => toggleSelectRow(row)}
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> class="spectrum-Table-row"
{#if idx >= firstVisibleRow && idx <= lastVisibleRow} class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
{#if customColumnRenderer} {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
<td class="spectrum-Table-cell spectrum-Table-cell--divider"> {#if customColumnRenderer}
<div class="spectrum-Table-cell-content"> <td
<svelte:component class="spectrum-Table-cell spectrum-Table-cell--divider">
this={customColumnRenderer} <div class="spectrum-Table-cell-content">
data={row} <svelte:component
selected={selectedRows.includes(row)} this={customColumnRenderer}
onToggleSelection={() => toggleSelectRow(row)} data={row}
onEdit={e => editRow(e, row)} selected={selectedRows.includes(row)}
{allowSelectRows} onToggleSelection={() => toggleSelectRow(row)}
{allowEditRows} /> onEdit={e => editRow(e, row)}
</div> {allowSelectRows}
</td> {allowEditRows} />
</div>
</td>
{/if}
{#each fields as field}
<td class="spectrum-Table-cell">
<div class="spectrum-Table-cell-content">
<CellRenderer
{customRenderers}
schema={schema[field]}
value={row[field]} />
</div>
</td>
{/each}
{/if} {/if}
{#each fields as field} </tr>
<td class="spectrum-Table-cell"> {/each}
<div class="spectrum-Table-cell-content"> {:else}
<CellRenderer <div class="placeholder">
{customRenderers} <svg
schema={schema[field]} class="spectrum-Icon spectrum-Icon--sizeXXL"
value={row[field]} /> focusable="false">
</div> <use xlink:href="#spectrum-icon-18-Table" />
</td> </svg>
{/each} <div>No rows found.</div>
{/if} </div>
</tr> {/if}
{/each}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -322,6 +335,25 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.placeholder {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(
--spectrum-table-cell-text-color,
var(--spectrum-alias-text-color)
);
}
.placeholder div {
margin-top: 10px;
font-size: var(
--spectrum-table-cell-text-size,
var(--spectrum-alias-font-size-default)
);
}
tbody { tbody {
z-index: 1; z-index: 1;
} }