Skip to content

Column Formats

<revo-grid/> 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 based on numeraljs library. Accept data in numeric format.

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

js
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 and numeraljs.



Select/Dropdown

Complex selection data type plugin based on revo-dropdown library.

In order to improve dropdown functionality please contribute with revo-dropdown.

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

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

  • Import Select Column type;
  • Specify table data;
  • Per column specify column type;
  • Register your column type.
js
// 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 based on based on duetds-date-picker library.

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

You can access any duetds-date-picker properties in Column Definition:

js
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

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

Edit RG - Date (Standalone)

Revogrid is a MIT-licensed open source library made by Revolist OU.