Format {column}
Only changes how values show in this view.
{
customUnit = false
onChange({})
}}
>
Reset
Unit
({
label: p.symbol.trim(),
value: p.symbol
})),
{ label: 'Custom', value: CUSTOM }
]}
bind:value={
() => unitChoice,
(v) => {
customUnit = v === CUSTOM
if (v === CUSTOM) update({ unit: { symbol: '', position: 'after' } })
else update({ unit: UNIT_PRESETS.find((p) => p.symbol === v) })
}
}
/>
{#if unitChoice === CUSTOM}
unit?.symbol ?? '',
(v) => update({ unit: { symbol: v, position: unit?.position ?? 'after' } })
}
/>
unit?.position ?? 'after',
(v) => update({ unit: { symbol: unit?.symbol ?? '', position: v } })
}
>
{#snippet children({ item })}
{/if}
Decimals
({ label: String(i), value: i }))
]}
bind:value={
() => format?.decimals ?? AUTO_DECIMALS,
(v) => update({ decimals: v === AUTO_DECIMALS ? undefined : v })
}
/>
format?.notation ?? 'plain',
(v) => update({ notation: v === 'plain' ? undefined : (v as 'thousands' | 'compact') })
}
>
{#snippet children({ item })}
1234567.891 shows as {formatValue(1234567.891, format) ?? '1234567.891'}
Alignment
format?.align ?? 'auto',
(v) => update({ align: v === 'auto' ? undefined : (v as 'left' | 'right') })
}
>
{#snippet children({ item })}
Color rules
{#each rules as rule, i (i)}
{
if (dragFrom === undefined) return
e.preventDefault()
const r = e.currentTarget.getBoundingClientRect()
dropAt = { index: i, side: e.clientY < r.top + r.height / 2 ? 'above' : 'below' }
}}
ondrop={(e) => {
e.preventDefault()
dropRule()
}}
>
{#if dropAt?.index === i && dragFrom !== undefined}
{/if}
{
dragFrom = i
const row = e.currentTarget.parentElement
if (row) e.dataTransfer?.setDragImage(row, 8, row.offsetHeight / 2)
}}
ondragend={() => {
dragFrom = undefined
dropAt = undefined
}}
>
= 4, =paid' }}
bind:value={() => rule.condition, (v) => setRule(i, { condition: v })}
/>
setRule(i, { bg: e.currentTarget.value })}
/>
setRule(i, { text: e.currentTarget.value })}
/>
setRule(i, { bold: !rule.bold || undefined })}
/>
setRule(i, { italic: !rule.italic || undefined })}
/>
restyling === i, (open) => (restyling = open ? i : undefined)}
>
{#snippet trigger()}
{@render sample(rule)}
{/snippet}
{#snippet content()}
{@render presets((preset) => {
setRule(i, { bg: preset.bg, text: preset.text })
restyling = undefined
})}
{/snippet}
update({ rules: rules.filter((_, j) => j !== i) })}
/>
{/each}
{#snippet trigger()}
Add rule
{/snippet}
{#snippet content()}
{@render presets((preset) => {
update({ rules: [...rules, { condition: '', ...preset }] })
addRuleOpen = false
})}
{/snippet}
Conditions use the search bar's syntax: text contains, =value is exact, numbers take >,
>=, <, <= and !=. An empty condition matches every cell. Every matching rule applies,
a later one overriding an earlier one.