` and pick up the same CSS variable tokens as the rest
of the grid.
> Live demo: Conditional styling - https://svgrid.com/demos/62-conditional-styling/
## Default look
```css
table[role='grid'] td {
border: 1px solid var(--sg-border);
padding: 0.4rem 0.6rem;
vertical-align: middle;
}
```
Override at `:root` or on the grid host.
## Per-cell styling
`ColumnDef` accepts a `cellClass` field. It can be:
- a **string** (or array of strings) - applied to every `
` in
this column;
- a **function** - called per cell with the standard `CellContext`,
returning a string, array, or `Record`.
```ts
{
field: 'salary',
format: { type: 'currency', currency: 'USD' },
cellClass: (ctx) => {
const v = Number(ctx.getValue())
if (v > 100_000) return 'cell-money-high'
if (v < 20_000) return 'cell-money-low'
return ''
},
}
```
```css
:global(td.cell-money-high) { color: #16a34a; font-weight: 600; }
:global(td.cell-money-low) { color: #b91c1c; }
```
The class is added to the existing `sv-grid-cell` class (other
modifiers like `sv-grid-cell-active`, `sv-grid-cell-editing`,
`data-align`, `data-pinned` still apply). Use `:global(...)` in
scoped Svelte styles since the cell lives outside the component
hash.
For row-level conditional styling, use the wrapper's
`rowClass={({ row }) => ...}` prop - same shape, scoped to the `
`.
See [Styling rows](https://svgrid.com/docs/help/rows/styling-rows/).
## Right-align numbers
A common rule of thumb is "numbers right, everything else left". Target by
`editorType`:
```css
table[role='grid'] td[data-editor-type='number'] {
text-align: right;
font-variant-numeric: tabular-nums;
}
```
(`data-editor-type` is set by the grid - verify by inspecting an element
in your devtools; if the attribute is not present in your build, fall back
to wrapping the value in a ``.)
## Highlighting the active cell
The currently-active cell carries `aria-selected="true"` and matches the
focus-ring custom property:
```css
table[role='grid'] td[aria-selected='true'] {
box-shadow: inset 0 0 0 2px var(--sg-accent);
}
```
## Edit-mode cell
While a cell is being edited, it carries `data-editing="true"` and renders
an `` inside:
```css
table[role='grid'] td[data-editing='true'] {
padding: 0;
}
table[role='grid'] td[data-editing='true'] input {
width: 100%;
height: 100%;
padding: 0.4rem 0.6rem;
border: 0;
outline: none;
background: var(--sg-bg);
}
```
## Styling from the value
`cellClass` takes a function and returns whatever `class:` accepts. Driving
it from the row rather than the index is what keeps the styling attached to the
data after a sort.
```svelte
```
## A static class per column
`cellClass` also takes a plain string, which is the right form when the rule is
about the column rather than the value - right-aligning a code, or a monospace
identifier.
```svelte
```
## See also
- [Highlighting changes](https://svgrid.com/docs/help/cells/highlighting-changes/)
- [Cell components](https://svgrid.com/docs/help/cells/cell-components/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/styling-cells/ . All docs: https://svgrid.com/llms.txt