Cell Data Types
Tell a column what it holds — or let the grid read it from the data — and sorting, filtering, editing, the cell text, grouping and export all use the same answer.
Types read from the data
Six columns that declare nothing. Sort Issued and the dates order chronologically; Seats sits on the right edge; Active filters and edits as a checkbox.
Six columns, nothing declared
None of the columns above says what it holds. Sort Issued: the rows order by date. Look at Seats: the numbers sit against the right edge. Open the filter under Active: it is a Yes / No dropdown, not a text box.
All of that came from one place — the grid read the first rows once, decided what each column holds, and told sorting, filtering, editing, the cell text and the export.
Dates, both shapes
Issued holds real Date objects and Renews holds ISO
strings such as 2027-03-14. Both read as yyyy-mm-dd, both sort
chronologically, and both open a date picker in the filter row. You do not have to know which
shape your API sends.
Editing gets the same answer
Double-click a cell. Issued opens a date picker, Seats a number
box, Active a checkbox. None of those columns asked for an editor — they only
set editable: true.
An empty filter is not a mistake
filter: {} means filter this column the way its data says it should be
filtered. Write filter: { type: 'text' } only when you want something other
than that.
{ key: 'issued', prop: 'issued', filter: {}, editable: true }Declaring a type, and overriding it
Last Seen is too sparse to read, Ref would be read wrongly, and Seats and Active already say what they want. One word settles each.
When the data cannot say it
Last Seen is empty on most rows. The grid reads up to twenty non-blank values
and types the column from whatever it finds — on a column this sparse that could be a single
row, which is a thin thing to hang a whole column's behaviour on.
dataType: 'dateTime' settles it, and gives the column its date ordering, its date
filter and its date editor whether or not any value was there to read.
{ key: 'lastSeen', prop: 'lastSeen', dataType: 'dateTime' }When the data would say the wrong thing
Ref holds numbers, but they are identifiers. Left to itself the grid would
right-align them and order them by arithmetic. dataType: 'text' says otherwise, and
the column keeps its left edge, a text filter, and text ordering — so
9 comes before 10 and 10 before 100.
Anything the column declares wins
A type only fills what is missing, so adopting it can never change a column that already said what it wanted:
- Seats prints
40 seats— its ownvalueFormatterbeats the built-in number text, and the filter and editor are still the numeric ones. - Active filters through a Live / Lapsed dropdown — its own
filter.typebeats the built-in Yes / No.
The same holds for comparator, editor, excel and
parseImport. Set one and the type stops supplying that one thing.
Turning it off
config.inferDataTypes: false drops the sampling step for the whole grid;
dataType: false drops it for one column. Neither touches a type you declared
yourself.
readonly config: GridConfig<Licence> = { inferDataTypes: false };One word, six behaviours
A column's data type is the one fact the grid needs most. Give it — or let it be read from the data — and six things line up at once:
- Sorting — dates by date, numbers by value.
- Filtering — a date picker, a number box, a Yes / No dropdown.
- Editing — the matching editor, when a column is editable.
- Cell text —
2026-01-05, notMon Jan 05 2026 00:00:00 GMT+0200. - Grouping — a date column groups by day, not by millisecond.
- Export — a date leaves as a real date in Excel, and as
2026-01-05in CSV.
The six types
'text'— the default. Sorts alphabetically, case- and number-aware.'number'— sorts numerically, aligns to the end edge.'boolean'— reads Yes / No, filters and edits as a checkbox.'date'— aDateholding a calendar day.'dateString'— an ISO string such as'2026-01-05'.'dateTime'— aDatewhose time of day matters.
Where the type comes from
The first of these that answers wins:
column.dataType, if you set it.column.filter.type— a column already saying{ type: 'date' }has declared its type.column.editor, in its string form.- The data: the first twenty non-empty values of the column.
'text'.
Reading the data happens once. A column's type does not move when a cell is edited, a page is turned or a live update arrives, so the grid cannot behave differently on Tuesday's data than on Monday's.
Mixed columns stay text
When the sampled values disagree — 5, 7, then 'n/a' — the
column is text. Blanks are skipped and never count as a vote, so a column whose first rows are
empty is typed by its first real values instead of by its emptiness.
Upgrading an existing grid? A Date column that declared nothing used to sort by
the text of its weekday name. It now sorts by date — the same column, a different order.
inferDataTypes: false keeps the old behaviour if you need it.
Data type options
| Property | Type | Default | Description |
|---|---|---|---|
| column.dataType | GcDataType | false | — | The column's type: 'text', 'number', 'boolean', 'date', 'dateString' or 'dateTime'. false skips reading the data for this column and leaves it as text. |
| config.inferDataTypes | boolean | true | Read the type from the data for columns that declare none. false drops that step grid-wide; declared types and the filter.type / editor hints still apply. |
| column.filter | ColumnFilterConfig | — | Adds a filter. type is optional — filter: {} uses the filter the column's data type implies. See Filtering. |
| column.editable | boolean | false | Lets a cell be edited. With no editor set, the data type picks it: a date picker, a number box or a checkbox. See Cell Editing. |
| column.valueFormatter | (value, row, column) => string | — | Your own cell text. Beats the type's built-in text; sorting and filtering keep using the raw value. See Value Getters & Formatters. |
| column.comparator | (a, b) => number | — | Your own sort order. Beats the type's, so a column with a comparator sorts exactly as it did before. |
| filterLabels.booleanTrue / booleanFalse | string | 'Yes' / 'No' | The two words a boolean column reads — in its cells and in its filter dropdown. See Localisation. |
| --gc-cell-numeric-align | CSS value | end | Where a number column's cells sit. Logical, so it flips on its own in right-to-left layouts. See Theming. |