DataGridXL — API

Components

DataGridXL

Component

Overview

This is an overview of the component.

const options = {
  allowDeleteCols: false,
  rowHeight: 40
};

const grid = new DataGridXL("grid", options);

const grid = new DataGridXL("grid", ...);

grid.setCellValues({x:0,y:0}, "New Value");
grid.selector.selectAll();

function handleMoveRows(gridEvent){ ... } grid.events.on('moverows', handleMoveRows); grid.events.off('moverows', handleMoveRows);

Options

javascript

const options = {
  allowDeleteCols: false,
  rowHeight: 40
};

const grid = new DataGridXL("grid", options);

actions: cell

allowEditCells

boolean

true

Defines if user is allowed to directly edit cells. (This setting does not prevent cut, paste & fillCells actions from modifying any cell values.)

allowFillCells

boolean

true

Defines if user is allowed to fill cells by dragging fill handle.

fillCellsDirection

'y'

Defines direction(s) in which user can drag to fill cells. (Setting is ignored if allowFillCells is set to false.)

Values: 'x', 'y', 'xy'

actions: column

allowDeleteCols

boolean

true

Defines if user is allowed to delete columns.

allowFreezeCols

boolean

true

Defines if user is allowed to freeze (and unfreeze) columns.

allowHideCols

boolean

true

Defines if user is allowed to hide columns.

allowInsertCols

boolean

true

Defines if user is allowed to insert columns.

allowMoveCols

boolean

true

Defines if user is allowed to move columns.

allowResizeCols

boolean

true

Defines if user is allowed to resize columns.

actions: row

allowDeleteRows

boolean

true

Defines if user is allowed to delete rows.

allowFreezeRows

boolean

true

Defines if user is allowed to freeze (and unfreeze) rows.

allowHideRows

boolean

true

Defines if user is allowed to hide rows.

allowInsertRows

boolean

true

Defines if user is allowed to insert rows.

allowMoveRows

boolean

true

Defines if user is allowed to move rows.

axes: column

colAlign

'left'

Default column content alignment. For column header label alignment, use colHeaderLabelAlign instead.

Values: 'left', 'center', 'right'

colHeaderHeight

number

Height of column headers in pixels.

colHeaderLabelAlign

'left'

Default label alignment of column headers.

Values: 'left', 'center', 'right'

colHeaderLabelFunction

function

...

Provide a custom function that returns a string label for every column header. Overrides labelType, labelPrefix and labelSuffix options. HTML supported.

colHeaderLabelPrefix

string

A string to prepend to column header label.

colHeaderLabelSuffix

string

A string to append to column header label.

colHeaderLabelType

'letters'

Defines label series type for untitled columns. numbers for 1,2,3; letters for A,B,C.

Values: 'letters', 'numbers'

colWidth

number

100

Default column width in pixels

frozenCols

number

Defines amount of frozen cols (this includes any hidden columns).

axes: row

frozenRows

number

Defines amount of frozen rows (this includes any hidden rows).

rowHeaderLabelAlign

'left'

Label alignment of row headers. Applies to all.

Values: 'left', 'center', 'right'

rowHeaderLabelFunction

function

...

Provide a custom function that returns a string label for every row header. Overrides labelType, labelPrefix and labelSuffix options.

rowHeaderLabelPrefix

string

A string to prepend to row header label.

rowHeaderLabelSuffix

string

A string to append to row header label.

rowHeaderLabelType

'numbers'

Defines label series type for untitled columns. numbers for 1,2,3; letters for A,B,C.

Values: 'letters', 'numbers'

rowHeaderWidth

number

Width of row headers in pixels.

rowHeight

number

Row height in pixels. The row height applies to every single row in the grid.

clipboard

allowCopy

boolean

true

Defines if user is allowed to copy cell values.

allowCut

boolean

true

Defines if user is allowed to cut cell values.

allowPaste

boolean

true

Defines if user is allowed to paste cell values.

expandSheetOnPaste

boolean

false

Defines if document should expand when pasting a selection that exceeds document bounds.

contextmenu

contextMenuItems

array

...

Takes an array of context menu items.

developer

useInspector

boolean

false

Enables inspector for development purposes

instance

bottomBar

array

...

Pass in theme settings to override default theme. Theme affects colors and opacities of elements inside grid view.

labelColumnSettings

array

...

Pass in theme settings to override default theme. Theme affects colors and opacities of elements inside grid view.

licenseKey

string

undefined

Your DataGridXL License Key

topBar

array

...

Pass in theme settings to override default theme. Theme affects colors and opacities of elements inside grid view.

locale

object

...

Pass in locale settings to override default locale.

renderer

fontSize

number

Font size in pixels

renderer

'snap'

Defines renderer

Values: 'snap', 'smooth'

sort

sortReach

'all'

Sort all or only visible rows

Values: all, visible

theme

Theme

...

Pass in theme settings to override default theme. Theme affects colors and opacities of elements inside grid view.

Methods

javascript

const grid = new DataGridXL("grid", ...);

grid.setCellValues({x:0,y:0}, "New Value");
grid.selector.selectAll();

actions: cell

clearCellValues

(cells)

Clear given cell (range) values (set all values to null).

fillCells

(cellRange,fillDirection,fillAmount)

Fill Cells

setCellValues

(cells,values,[mayExceedCellRange],[cellRangeToCut])

Set given cell (range) values. If values is a single cell value, it will apply to all cells.

toggleCellValues

(cells)

Toggle all boolean cell values within given cell range

actions: column

deleteCols

(cols)

Delete Columns. Requires cols to be set.

deleteColsById

(colIds)

Delete Columns By Their IDs

freezeCols

(amount)

Freeze Columns. Amount spans any hidden columns. Default amount is 1.

freezeColsUntilId

(colId)

Freezes columns until given column ID

hideCols

(cols)

Hide columns

hideColsById

(colIds)

Hide columns by their IDs

insertEmptyCols

(amount,colCoord)

Inserts Empty Columns

moveCols

(cols,colCoord)

Moves Columns

resizeCols

(cols,width)

Resize columns

resizeColsToFit

(cols)

Resize columns to auto-fit their content

setColAlign

(colCoord)

Set Column Alignment

showColsById

(colIds)

Make columns visible

actions: row

deleteRows

(rows)

Delete Rows

deleteRowsById

(rowIds)

Delete Rows By Their IDs

freezeRows

(amount)

Freezes rows

freezeRowsUntilId

(rowId)

Freezes rows until given row ID

hideRows

(rows)

Hide rows

hideRowsById

(rowIds)

Hide rows by their IDs

insertEmptyRows

(amount,rowCoord)

Inserts Empty Rows

moveRows

(rows,rowCoord)

Move Rows

showRowsById

(rowIds)

Make rows visible

actions: sort

performSort

(colCoord,sortDirection)

Sort by column

clipboard

performCopy

()

Copy cell selection

performCut

()

Cut cell selection

performPaste

()

Paste clipboard contents

dimensions

getWindowOffset

()

getWindowOffset

→ returns window scroll offset {x,y} object

download

downloadCSV

()

Download grid data as CSV file

downloadJSON

()

Download grid data as JSON file

fullscreen

activateFullscreen

()

Activate fullscreen

deactivateFullscreen

()

Deactivate fullscreen

toggleFullscreen

()

toggle fullscreen

helpers

getSpreadsheetCoords

(cellCoords)

Get spreadsheet-style label for given cell coordinates

→ returns spreadsheet-style label (E.g. "A2", "C23", ...) string

instance

activate

()

Activate grid. Other DataGridXL instances on the same page will be deactivated. Sets cell cursor position at cell 0,0 unless grid is already active.

deactivate

()

Deactivate grid.

destroy

()

Destroy the instance. Removes all event listeners. Frees up memory.

getInteractionMode

()

Get active interaction mode

→ returns active interaction mode ('ready','enter','edit','contextmenu')

setInteractionMode

(interactionMode)

setInteractionMode

localization

getLocalizedValue

(value)

Retrieves localized value

→ returns localized string string

Items

applyFilterState

()

applyFilterState

search

clearSearch

()

Clear Search

(searchStr)

searchNext

()

Jump to next cell in search result set

searchPrev

()

Jump to previous cell in search result set

theme

setTheme

(theme)

Set Theme

undo-redo

redo

()

Redo

undo

()

Undo

Events

javascript

function handleMoveRows(gridEvent){ ... }

grid.events.on('moverows', handleMoveRows);
grid.events.off('moverows', handleMoveRows);

actions: cell

setcellvaluesbatch

Cell Values have been affected

actions: column

beforedeletecols

BEFORE Column(s) have been deleted

deletecols

Column(s) have been deleted.

beforefreezecols

Before column(s) have been frozen

freezecols

Column(s) have been frozen

beforehidecols

Before column(s) have been hidden

hidecols

Column(s) have been hidden

beforeinsertemptycols

BEFORE Empty Column(s) have been inserted.

insertemptycols

Empty Column(s) have been inserted.

beforemovecols

BEFORE Column(s) have been moved

movecols

Column(s) have been moved

beforeresizecols

BEFORE Column(s) have been moved

resizecols

Column(s) have been resized

beforeshowcols

Before column(s) have been made visible

showcols

Column(s) have been made visible

actions: row

beforedeleterows

BEFORE Row(s) have been deleted

deleterows

Row(s) have been deleted.

beforefreezerows

Before row(s) have been frozen

freezerows

Row(s) have been frozen

beforehiderows

Before row(s) have been hidden

hiderows

Row(s) have been hidden

beforeinsertemptyrows

BEFORE Empty Row(s) have been inserted.

insertemptyrows

Empty Row(s) have been inserted.

beforemoverows

BEFORE Row(s) have been moved

moverows

Rows(s) have been moved

beforeshowrows

Before row(s) have been made visible

showrows

Row(s) have been made visible

actions: sort

beforesort

Before sort action

sort

Sort action

context-menu

tscontextmenuclose

Context Menu has been closed.

contextmenuopen

Context Menu has been opened.

data

datastreamcomplete

Stream data complete

datastreamstart

Stream data start

fullscreen

fullscreenenter

Leaving fullscreen

fullscreenleave

Leaving fullscreen

instance

interactionmodechange

Items

datainsertcomplete

Data insert is complete

datainsertstart

Data insert starts