New version 4+ is released. Please use official docs

# Column types

RevoGrid provides a way to define your own editors.

Yet it comes with plugins with different column types.
All additional column types based on plugin idea:

  • They have to be imported to project in order to avoid extra data for users not interested in it;
  • You can create your own plugin types and refer to it. Just clone any existing type, it's simple as it is.

Check our demo for live examples.

You can define your own plugins or use default one:

# String

Primitive default data type. Accepts any data entry and read it as string.

# Number

Primitive numeric data type plugin (opens new window) based on numeraljs (opens new window) library. Accept data in numeric format.

Installation

npm i @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'

Advance usage

Check plugin page (opens new window) and numeraljs (opens new window).

# Select

Complex selection data type plugin (opens new window) based on revo-dropdown (opens new window) library.

In order to improve dropdown functionality please contribute with revo-dropdown (opens new window).

Accept data in Array format. Item in array can be represented as a string[] or an object[].

Installation

npm i @revolist/revogrid-column-select

Basic usage

  • Import Select Column type;
  • Specify table data;
  • Per column specify column type;
  • Register your column type.
// 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}/>

# Date

Date column type plugin (opens new window) based on based on duetds-date-picker (opens new window) library.

In order to improve datepicker functionality please contribute with duetds-date-picker (opens new window). Accept data as formated string or date format.

You can access any duetds-date-picker (opens new window) properties in Column Definition:


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

Installation

npm i @revolist/revogrid-column-date

Basic usage

  • Import column type;
  • Specify table data;
  • Per column specify column type;
  • Register your column type.

// do import
import Plugin from "@revolist/revogrid-column-date";

const columns = [{ prop: 'birthdate', columnType: 'date' }];
const rows = [{ name: '2020-08-24' }, { name: '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}/>

← Cell renderer →