Column Types and Formats

Column types let you package column behavior once and reuse it across your grid. A type can define formatting, sizing, read-only rules, custom editors, cell templates, parsers, sorting behavior, and any other reusable column option.

Use column types when several columns should behave the same way, or when a column needs a richer editor such as a number formatter, select dropdown, or date picker.

How column types work

RevoGrid exposes two related APIs:

• columnTypes is a map of reusable type definitions registered on the grid.
• columnType is the name used by a column to apply one of those definitions.

Column settings are merged with the selected type. If the same option exists in both places, the column definition can override the shared type for that column.

Type: ColumnTypesInterface: ColumnTypeInterface: ColumnRegular

const grid = document.querySelector('revo-grid')

grid.columnTypes = {
  money: {
    size: 140,
    readonly: false,
    cellTemplate: (createElement, props) => {
      const value = Number(props.model[props.prop] ?? 0)

      return createElement(
        'span',
        { class: { 'money-cell': true, 'money-negative': value < 0 } },
        new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
        }).format(value)
      )
    },
    cellParser: (model, column) => Number(model[column.prop] ?? 0),
  },
}

grid.columns = [
  { prop: 'revenue', name: 'Revenue', columnType: 'money' },
  { prop: 'cost', name: 'Cost', columnType: 'money', size: 110 },
]

Built-in and plugin column formats

The string format is available by default. Number, select, and date formats are distributed as optional packages so applications only ship the editors and formatters they actually use.

Format	Package	Best for
String	Built in	Plain text, IDs, labels, and default editable cells
Number	@revolist/revogrid-column-numeral	Numeric display, thousands separators, currency-like formatting
Select Dropdown	@revolist/revogrid-column-select	Controlled choices, status values, lookup lists
Date	@revolist/revogrid-column-date	Date input, calendar picking, date strings

When to create a custom column type

Create a custom type when the same column behavior appears in multiple places:

• a currency or percentage format shared by many numeric columns
• a reusable status style with custom classes
• a read-only system field preset
• a custom editor used by multiple columns
• a parser that keeps filtering and sorting aligned with displayed values

For one-off rendering, configure the column directly instead. See Custom Cell Formats, Cell Renderer, and Cell Editor.

Register optional column type packages

Optional column packages follow the same pattern:

1. Install the package.
2. Import the type plugin.
3. Register it in columnTypes.
4. Reference it from a column with columnType.

import NumberColumnType from '@revolist/revogrid-column-numeral'

const columnTypes = {
  numeric: new NumberColumnType('0,0'),
}

const columns = [
  { prop: 'quantity', name: 'Quantity', columnType: 'numeric' },
]

Framework wrappers use the same data shape. Pass columns, source, and columnTypes through your framework binding, or assign them directly to the <revo-grid/> element in plain JavaScript.

Available column formats

String

String is the default RevoGrid column format. Use it for plain text, identifiers, labels, and any editable cell that does not need a specialized editor.

No package or registration is required:

const columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'email', name: 'Email' },
]

Values are read as text for display. If a column needs custom rendering, validation, parsing, or editing behavior, define those options directly on the column or move them into a reusable columnTypes preset.

Number

The number column type adds numeric formatting through the revogrid-column-numeral package, based on numeraljs. Use it for quantities, totals, prices, percentages, and other numeric values that should keep a consistent display format.

The source value should be numeric or safely convertible to a number. The formatter controls how the value appears in the cell.

Installation

npm

npm i @revolist/revogrid-column-numeral

pnpm

pnpm add @revolist/revogrid-column-numeral

yarn

yarn add @revolist/revogrid-column-numeral

bun

bun add @revolist/revogrid-column-numeral

Basic usage

import NumberColumnType from '@revolist/revogrid-column-numeral' // import library
const plugin = { numeric: new NumberColumnType('0,0') } // create plugin entity
const columns = [{ prop: 'num', columnType: 'numeric' }] // define column type
const rows = [{ num: 1000 }]

const grid = document.querySelector('revo-grid')
grid.columnTypes = plugin
grid.source = rows
grid.columns = columns

// '1,000'

Format examples

const columnTypes = {
  integer: new NumberColumnType('0,0'),
  decimal: new NumberColumnType('0,0.00'),
  percent: new NumberColumnType('0.0%'),
}

const columns = [
  { prop: 'orders', name: 'Orders', columnType: 'integer' },
  { prop: 'revenue', name: 'Revenue', columnType: 'decimal' },
  { prop: 'conversion', name: 'Conversion', columnType: 'percent' },
]

For more formatting options, check the plugin page and numeraljs.

Select Dropdown

The select column type adds a dropdown editor through the revogrid-column-select package, based on revo-dropdown.

Use it when users should choose from a controlled list of values, such as statuses, departments, categories, countries, or lookup table entries.

Dropdown options can be represented as strings or objects. When using objects, configure labelKey and valueKey so the editor knows what to display and what to store.

Installation

npm

npm i @revolist/revogrid-column-select

pnpm

pnpm add @revolist/revogrid-column-select

yarn

yarn add @revolist/revogrid-column-select

bun

bun add @revolist/revogrid-column-select

Basic usage

1. Import the select column type.
2. Define the dropdown source.
3. Register the type in columnTypes.
4. Set columnType: 'select' on the column.

// do Select class import
import SelectTypePlugin from '@revolist/revogrid-column-select'

const dropdown = {
    labelKey: 'label',
    valueKey: 'value',
    source: [
        { label: 'According', value: 'a' },
        { label: 'Over', value: 'b' },
        { label: 'Source', value: 's' },
    ],
}
const columns = [
    {
        ...dropdown,
        prop: 'name',
        columnType: 'select', // column type specified as 'select'
    },
]
const rows = [{ name: 'New item' }, { name: 'New item 2' }]

// register column type
const plugin = { select: new SelectTypePlugin() }

// apply data to grid per your framework approach
<revo-grid source={rows} columns={columns} columnTypes={plugin} />

Option shape

const dropdown = {
  labelKey: 'label',
  valueKey: 'value',
  source: [
    { label: 'Draft', value: 'draft' },
    { label: 'Approved', value: 'approved' },
    { label: 'Archived', value: 'archived' },
  ],
}

Use the object form when the visible label and stored value should differ.

Date

The date column type adds a calendar editor through the revogrid-column-date package, based on duetds-date-picker.

Use it for date strings or date values that should be edited with a date picker instead of plain text input.

You can pass duetds-date-picker properties through the column definition:

const columns = [
    {
        prop: 'birthdate',
        columnType: 'date',
        direction: 'left',
        required: 'true',
        valueAsDate: 'true',
    },
]

Installation

npm

npm i @revolist/revogrid-column-date

pnpm

pnpm add @revolist/revogrid-column-date

yarn

yarn add @revolist/revogrid-column-date

bun

bun add @revolist/revogrid-column-date

Basic usage

1. Import the date column type.
2. Register it in columnTypes.
3. Set columnType: 'date' on date columns.
4. Pass picker options on the column when needed.

// do import
import Plugin from '@revolist/revogrid-column-date'

const columns = [{ prop: 'birthdate', columnType: 'date' }]
const rows = [{ birthdate: '2020-08-24' }, { birthdate: '2022-08-24' }]

// register column type
const columnTypes = { date: new Plugin() }

// apply data to grid per your framework approach
<revo-grid source={rows} columns={columns} columnTypes={columnTypes} />

Keep the date value format consistent across the column. If your application stores dates in a different shape than the editor displays, normalize the value before assigning source or handle conversion in your save workflow.

Date Column

RevoGrid Pro formats

Available for richer data-entry, validation, and visualization workflows. Most Pro formats are registered through the same columnTypes pattern shown above, then applied with columnType on the target column.

Checkbox editor

Use a checkbox editor for boolean flags, approvals, task completion, row-level toggles, and other true/false values. It combines the renderer and editor into one compact cell interaction.

Slider editor

Use a slider editor for bounded numeric values such as scores, progress, priority, confidence, utilization, or percentage-like input where users need quick visual adjustment.

Counter editor

Use a counter editor for quantities, capacity, step-based values, and fast increment/decrement editing. It works well when values change in predictable steps.

Timeline editor

Use a timeline editor for date ranges, schedules, delivery windows, and project timelines. It gives users a visual date-range editing experience inside the grid.

Progress line

Use a progress line to show completion, utilization, SLA progress, budget usage, or any proportional value in a compact visual format.

Progress line with value

Use a progress line with value when users need both the visual progress bar and the exact readable number in the same cell.

Sparkline

Use a sparkline to show compact trends for time-series values, historical metrics, activity, or performance movement without opening a separate chart.

Bar chart

Use an inline bar chart for ranking, proportional comparison, and quick scanning of numeric values across many rows.

Timeline

Use a timeline format to display duration, phase, start/end positioning, or schedule context directly in grid cells.

Rating star

Use rating stars for reviews, quality scores, priority levels, satisfaction, or any small fixed-range rating.

Badge

Use badges for statuses, categories, severities, tags, workflow states, and other short labels that benefit from consistent visual treatment.

Change

Use a change format for deltas, gain/loss indicators, period-over-period movement, and positive/negative value changes.

Thumbs

Use thumbs for sentiment, approval, pass/fail, and quick feedback values.

Pie chart

Use an inline pie chart for part-to-whole values, compact distributions, and proportional breakdowns.

Heat and cold map

Use heat and cold maps to highlight value intensity, outliers, risk, performance bands, and low/high ranges with color.

Conditional formatting

Use conditional formatting for rule-based styles such as thresholds, alerts, exceptions, and state-dependent highlighting.

Multi-cell formatting

Use multi-cell formatting when different cells in the same column need different renderers, editors, or styles based on row data or custom conditions.

Reference data

Use reference data when the stored value is an ID, code, or key, but the user should see a readable label from a lookup source.

Connected fields

Use connected fields when values in one column depend on another column, or when edits should update linked cell behavior across the row.

Cell validation

Use cell validation to highlight invalid cells and prevent bad edits from becoming part of the data set.

Input validation

Use input validation to validate editor input before committing it to the grid, especially for constrained values, required fields, and business rules.

See RevoGrid Pro and the Feature Comparison for plan availability and demos.

Practical tips

• Register columnTypes before assigning columns when possible, especially during initial grid setup.
• Keep the data shape stable: prop must match a key in the row object.
• Use cellParser when filtering should operate on a normalized value instead of formatted text.
• Use column-level options to override a shared type for a single column.
• Keep optional plugins out of the bundle until you need their editors or formatters.

Troubleshooting

If a type does not apply, check that the key in columnTypes exactly matches the column columnType value.

If a plugin editor does not open, confirm that the package is installed, imported, and registered as an instance where the plugin expects one, for example new NumberColumnType('0,0').

If displayed values and filtering behave differently, add a cellParser to return the value that filter logic should use.

Check the live demos for working grid examples, or use Column Configuration for the full list of column options.