# Formatting: numbers, styles, merged headers and rules How a cell gets its look: a number format that changes what a value shows and nothing else, the styles the Home tab applies, borders, the sizes of rows and columns, cells merged into a header, and rules that format a cell by what it holds. [Getting started](https://svgrid.com/docs/help/sheet/start/) shows where formats live; this page is what they can say. The examples share a small scorecard and the lookup for formatting rectangles. ```svelte ``` ## A format is a property of the cell In Excel two cells in one column can show `$1,234.50` and `123450%` from the same stored number, because the format belongs to the cell. The sheet keeps it that way: `numFmt` is an Excel format string on a cell entry, the value underneath is untouched, and a formula reads the value, never the text. A computed percentage formats exactly like a typed one. `FORMAT_PRESETS` holds the patterns the ribbon's Number Format box offers (`number`, `currency`, `accounting`, `percent`, `date`, `time`, `scientific`, `general`), `accountingPattern(symbol, decimals)` builds the aligned-symbol accounting pattern for any currency, and a string of your own is any pattern Excel takes, sections for negatives included: ```svelte ``` South's September dropped, so its Trend is red and in parentheses; the value behind it is still `-15300`, and the Total row sums it as such. From the keyboard the presets are Excel's: `Ctrl+Shift+1` number, `Ctrl+Shift+2` time, `Ctrl+Shift+3` date, `Ctrl+Shift+4` currency, `Ctrl+Shift+5` percent, `Ctrl+Shift+6` scientific, ``Ctrl+Shift+` `` general. `Ctrl+1` opens Format Cells, with the pattern editable as text. > Live demo: Format Cells - https://svgrid.com/demos/210-format-cells/ ## Styles The rest of a cell entry is what the Home tab's buttons set: `bold`, `italic`, `underline`, `strike`, `color`, `fill`, `fontFamily`, `fontSize`, `align` and `valign`, `wrap`, `indent`, and `border` with a spec per edge (`width`, `style` of `solid`, `dashed`, `dotted` or `double`, and `color`). A `formats.set` call patches a rectangle: what it names changes, what it does not name stays, so a bold header keeps its fill when a border is added later. ```svelte ``` Format Painter (Home > Clipboard) copies a cell's whole entry onto a selection, and the store keys formats on the row's id rather than its index, so a sort carries every cell's look with it. ## Widths, heights, hidden lines `widths` is keyed by column letter, `heights` by 0-based row index; a row with no entry is `rowHeight` (22 by default), a column with none `columnWidth` (96). Home > Cells > Format has AutoFit Row Height and AutoFit Column Width, Hide and Unhide (`Ctrl+Shift+9` and `Ctrl+Shift+0` unhide rows and columns), and Row Height and Column Width as numbers; every one lands in the document. `hidden.rows` and `hidden.cols` are sets of indexes. ```svelte ``` Column H is there and computed, just not shown: select G and I and Unhide brings it back at its width. ## Merged headers A merge is a rectangle in `merges`, and the grid treats it as one cell: click anywhere inside and the Name Box says its top-left address, the arrow keys step over it, and the value is the top-left cell's. Home > Merge & Center, Merge Across, Merge Cells and Unmerge are the same operation from the ribbon, one `Ctrl+Z` each. ```svelte ``` Rectangles are `[minRow, minCol, maxRow, maxCol]`, 0-based, so `[1, 0, 2, 0]` is the Line corner merged down two rows. A merge goes into the `.xlsx` and comes back from one. > Live demo: Budget report: merged headers - https://svgrid.com/demos/463-merged-report-headers/ ## Rules: a format the value decides Conditional formatting is a list of rules on a sheet, each over one or more rectangles, in priority order: the first rule that decides a property (the fill, the text colour, the bar, the icon) wins, and a bar and a bold do not fight. The kinds are Excel's: | `kind` | Says | Fields | | --- | --- | --- | | `cellIs` | the value compares to one or two bounds | `operator` (`greater`, `less`, `between`, `notBetween`, `equal`, `notEqual`, `greaterOrEqual`, `lessOrEqual`), `value1`, `value2`, `style` | | `text` | the text matches | `match` (`contains`, `notContains`, `beginsWith`, `endsWith`), `value`, `style` | | `duplicates` | the value appears more than once (or `unique: true`, only once) | `style` | | `topBottom` | the top or bottom N, or N percent | `top`, `rank`, `percent`, `style` | | `average` | above or below the range's average | `above`, `style` | | `formula` | a formula written for the top-left cell is TRUE, moved to each cell | `formula`, `style` | | `dataBar` | a bar proportional to the value | `color`, `negativeColor` | | `colorScale` | a colour between two or three stops | `colors` (`COLOR_SCALES` has four named ones) | | `iconSet` | an icon by third | `set` (`arrows`, `traffic`, `flags`, `symbols`) | A `style` is the part of a cell entry a rule may set: `fill`, `color`, `bold`, `italic`, `underline`, `strike`, `numFmt`. A bound in `value1` is text as it would be typed, a number or a formula, and `stopIfTrue` ends the list for a cell the rule matched. ```svelte ``` Type `60000` into South's September: its attainment goes green, its name stops being italic, its bar grows and the rank bold may move. Home > Conditional Formatting has every kind as a menu, and Manage Rules reorders, edits and deletes them; the rules ride in `getState()` and go into the `.xlsx` as Excel's own. > Live demo: Regional scorecard: conditional formatting - https://svgrid.com/demos/462-regional-scorecard-cf/ ## See also - [Number formats and cell styles](https://svgrid.com/docs/help/cells/number-formats/) - the format-string compiler and the store, for a plain grid as well. - [Conditional formatting on the grid](https://svgrid.com/docs/help/cells/conditional-formatting/) - the column-level rules a `` has without the sheet. - [Data validation](https://svgrid.com/docs/help/sheet/validation/) - the rule that stops a bad value at the keyboard, rather than colouring it after. - [Files](https://svgrid.com/docs/help/sheet/files/) - what of this travels in an `.xlsx`, an `.ods` and an `.xls`. - [The spreadsheet shell](https://svgrid.com/docs/help/cells/spreadsheet-shell/) - the Format Cells dialog and the Conditional Formatting menu in detail. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/sheet/formatting/ . All docs: https://svgrid.com/llms.txt