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 (default);
• Number;
• Select;
• Date.

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

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.

// 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:

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.

// 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} />