# Cell data types A column has a data type and an editor, set separately. `cellDataType` says what the values are; `editorType` says what edits them. > Live demo: Quick start - https://svgrid.com/demos/01-quick-start/ | Effect | Driven by | | ------ | --------- | | Which sort comparator is used | `cellDataType`: `number` and `date` / `dateString` pick non-default `sortFns` | | Which filter operators the column menu offers | `cellDataType`: text / number / date / boolean sets differ | | Default alignment | `cellDataType`: numbers and dates right, booleans centered | | Which inline editor opens on `F2` / double-click | `editorType` | So a number column can be edited in a plain text box, a number input, or any editor registered with `registerCellEditor`, and still sort, filter and align as numbers: ```ts const columns: GridColumns = [ { field: 'firstName', header: 'First', cellDataType: 'text' }, { field: 'age', header: 'Age', cellDataType: 'number' }, // number input { field: 'salary', header: 'Salary', cellDataType: 'number', editorType: 'text' }, // typed as text { field: 'rating', header: 'Rating', cellDataType: 'number', editorType: 'stars' }, // a registered editor { field: 'joined', header: 'Joined', cellDataType: 'date' }, { field: 'due', header: 'Due', cellDataType: 'dateString' }, // ISO date strings { field: 'active', header: 'Active', cellDataType: 'boolean' }, ] ``` A column with no `editorType` gets the usual editor for its data type: | `cellDataType` | default `editorType` | + format | | --- | --- | --- | | `text` | `text` | - | | `number` | `number` | - | | `boolean` | `checkbox` | - | | `date` | `date` | `{ type: 'date' }` | | `dateString` | `date` | - | Anything you set explicitly (`editorType`, `align`, `format`) always wins. A column that sets only a built-in `editorType` (`number`, `date`, `datetime`, `checkbox`) and no `cellDataType` takes its data type from it, as it always has: `{ editorType: 'number' }` still sorts and filters as numbers. Set a data type even if you do not enable inline editing. Without one, sorting falls back to the `auto` comparator: a column whose values are all numbers still sorts numerically, but numbers stored as strings (`'10'`, `'9'`) sort as text, and a column mixing numbers and text puts the numbers first. Every built-in comparator sorts blanks (`null`, `undefined`, `''`) first in ascending order and last in descending. The `number` and `date` comparators treat values they cannot parse (`'n/a'`, an invalid date) the same way. ## Inferring types from the data Set `inferColumnTypes` on the grid and any column without a data type (no `cellDataType`, and no `number` / `date` / `checkbox` editor) has it inferred from the first data row (number / boolean / `Date` / ISO date-string / text), whatever edits it: ```svelte ``` ## Built-in types | `editorType` | accepted value space | | ------------ | -------------------- | | `'text'` | strings | | `'number'` | numbers (or numeric strings) | | `'date'` | ISO date strings (`YYYY-MM-DD`) or `Date` | | `'datetime'` | ISO datetime strings or `Date` | | `'checkbox'` | booleans | ## Custom types There is no plug-in "register a new cell data type" API. To use a custom type: - Render with a custom `cell` (see [Cell components](https://svgrid.com/docs/help/cells/cell-components/)) - Sort with a custom value through `fieldFn` that normalises to a comparable primitive - Filter with a custom operator UI in your own header component ## Editor value parsing The editor receives a string from the DOM and converts to the canonical value before commit. The implementation lives in [`parseEditorValue`](https://github.com/sv-grid/sv-grid/blob/main/packages/grid/src/editors/cell-editors.ts). ```ts import { parseEditorValue } from '@svgrid/grid' parseEditorValue('number', '42') // 42 parseEditorValue('number', 'abc') // NaN - caller should reject parseEditorValue('checkbox', 'true') // true parseEditorValue('date', '2026-05-27') // '2026-05-27' ``` ## Telling the grid what a string holds A date that arrives as a string sorts alphabetically unless you say otherwise. `cellDataType: 'dateString'` is that declaration, and it changes sorting and the filter operators together. ```svelte ``` ## Booleans `cellDataType: 'boolean'` gives the column the true/false filter rather than a text box, and pairs with the checkbox editor so reading and writing agree. ```svelte ``` ## See also - [Provided cell editors](https://svgrid.com/docs/help/editing/provided-editors/) - [Filter conditions](https://svgrid.com/docs/help/filtering/filter-conditions/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/cell-data-types/ . All docs: https://svgrid.com/llms.txt