{hidden.length} {hidden.length === 1 ? 'column' : 'columns'} hidden by filter

onNewColumn?.() }] : []), // Only offered when the table references another by foreign key. ...(joinTargets?.length ? [{ displayName: 'View joined column', icon: Merge, action: openJoinPicker }] : []) ]} btnId="db-table-add-column" > {#snippet buttonReplacement()}

{/snippet} {#snippet trigger()}{/snippet} {#snippet content()}

View joined column Shows a column of a linked table in this view. The table itself is not changed.

({ label: c.field, subtitle: c.datatype, value: c.field, disabled: pickedTarget !== undefined && aliasTaken({ sourceColumn: joinTargets![pickedTarget].sourceColumn, column: c.field }) }))} bind:value={pickedColumn} placeholder="Column" disabled={pickedTarget === undefined} size="sm" />

{/snippet}

{#if totalRows > 0 && endRow !== 0} {Math.min(firstVisible + 1, totalRows)}–{Math.min(lastVisible, totalRows)} {#if rowCount !== undefined || endRow !== undefined} of {endRow ?? rowCount} rows {/if} {/if} {/snippet} {#snippet content()}

0 && hidden.length < columns.length} onClick={() => { hidden = hidden.length === 0 ? columns.map((c) => c.field) : [] saveLayout() }} /> All columns

{#each columns as col (col.field)}

setHidden(col.field, !hidden.includes(col.field))} /> {col.field} {#if formats[col.field]} {/if} openFormat(col.field) } ]} size="2xs" class="opacity-0 group-hover:opacity-100 focus-within:opacity-100" />

{/each}

{#if onNewColumn}

{/if}

{/snippet}

{#if dbTableOps.onInsert} { if (!$operatingWorkspace) return dbTableOps.onInsert?.({ values }).then(() => { refresh() sendUserToast('Row inserted') }) }} /> {/if}

(scrollTop = e.currentTarget.scrollTop)} onkeydown={onGridKeyDown} onclick={(e) => (selected = cellFromEvent(e))} ondblclick={(e) => { const cell = cellFromEvent(e) if (cell) startEdit(cell.row, cell.column) }} >

{#each displayColumns as col (col.field)} {@const sorted = sort?.column === col.field ? sort : undefined} {@const pin = pinned[col.field]} {#if col.field === firstRightPinned} {@render addColumnHeader()}

{/if}

startResize(e, col.field)} ondblclick={(e) => { e.stopPropagation() autoSize([col.field]) }} >

{/each} {#if !firstRightPinned} {@render addColumnHeader()}

{/if}

{#if endRow === 0}

{hasFilters ? 'No rows match the filters' : 'No rows'}

{/if}

{#each renderedIndices as i (i)} {@const data = rowAt(i)}

{#each displayColumns as col (col.field)} {@const isSelected = selected?.row === i && selected.column === col.field} {@const pin = pinned[col.field]} {@const style = data && data !== 'loading' ? cellStyle(data[col.field], col.datatype, formats[col.field]) : undefined} {#if col.field === firstRightPinned} {@render addColumnCell()}

{/if}

{#if pin}

{/if} {#if data === 'loading'}

{:else if data} {@const value = data[col.field]} {@const format = formats[col.field]} {@const shown = formatValue(value, format) ?? formatCell(value)} {#if value === null || value === undefined} NULL {:else if fkByColumn[col.field] && hasForeignKeyValue(value)} {@const fk = fkByColumn[col.field]} {:else} {shown} {/if} {/if}

{/each} {#if !firstRightPinned} {@render addColumnCell()}

{/if}

{/each}

{#if gridOuterWidth - viewportWidth > 0}

{/if} {#if gridOuterHeight - viewportHeight > 0}

{/if}

e.stopPropagation()}> {#if editing} { if (e.key === 'Enter') { e.preventDefault() commitEdit() } else if (e.key === 'Escape') { e.preventDefault() e.stopPropagation() cancelEdit() } } }} />

Enter to save, Esc to cancel

{/if}