Setting Options

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

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

Actions: Cell

allowEditCells

booleantrue

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

allowFillCells

booleantrue

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

related → fillCellsDirection

fillCellsDirection

string"xy"

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

booleantrue

Defines if user is allowed to delete columns.

allowFreezeCols

booleantrue

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

allowHideCols

booleantrue

Defines if user is allowed to hide columns.

allowInsertCols

booleantrue

Defines if user is allowed to insert columns.

allowMoveCols

booleantrue

Defines if user is allowed to move (reorder) columns.

allowResizeCols

booleantrue

Defines if user is allowed to resize columns.

Actions: Row

allowDeleteRows

booleantrue

Defines if user is allowed to delete rows.

allowFreezeRows

booleantrue

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

allowHideRows

booleantrue

Defines if user is allowed to hide rows.

allowInsertRows

booleantrue

Defines if user is allowed to insert rows.

allowMoveRows

booleantrue

Defines if user is allowed to move (reorder) rows.

Actions: Sort

allowSort

booleantrue

Defines if user is allowed to sort table records by column.

Activation

instantActivate

booleanfalse

Defines if grid should auto-activate (selecting cell 0,0) when it's created. If false, grid is only activated when user clicks inside component.

Axes: Columns

colAlign

string"left"

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

Values: "left", "center", "right"

colHeaderHeight

int28

Height of column headers in pixels. Applies to all.

colHeaderLabelAlign

string"left"

Default label alignment of column headers.

Values: "left", "center", "right"

colHeaderLabelFunction

function(advanced)

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

example
colHeaderLabelFunction: function(index, coord, colRef, labels){
	// use id as column label
	return "Column <strong>"+colRef.id+"</strong>";
}

colHeaderLabelPrefix

string""

A string to prepend to column header label.

colHeaderLabelSuffix

string""

A string to append to column header label.

colHeaderLabelType

string"letters"

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

Values: "numbers", "letters"

colWidth

int100

Default column width in pixels.

frozenCols

int0

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

Axes: Rows

frozenRows

int0

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

rowHeaderLabelAlign

string"center"

Label alignment of row headers. Applies to all.

Values: "left", "center", "right"

rowHeaderLabelFunction

function(advanced)

Provide a custom function that returns a string label for every row header. Overrides -labelType, -labelPrefix and -labelSuffix options. (No HTML-support.)

example
rowHeaderLabelFunction: function(index, coord, rowRef, labels){
	// use coord as row label
	return String(coord);
}

rowHeaderLabelPrefix

string""

A string to prepend to every row header label.

rowHeaderLabelSuffix

string""

A string to append to every row header label.

rowHeaderLabelType

string"numbers"

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

Values: "numbers", "letters"

rowHeaderWidth

int64

Width of column that displays row headers (pixels).

rowHeight

int28

Row height in pixels. The height applies to every single row in the grid (rows cannot be resized individually).

Clipboard

allowCopy

booleantrue

Defines if user is allowed to copy cell values.

allowCut

booleantrue

Defines if user is allowed to cut cell values.

related → instantCut

allowPaste

booleantrue

Defines if user is allowed to paste cell values.

expandSheetOnPaste

booleantrue

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

instantCut

booleanfalse

If true, cut action will clear cell values immediately. If false, cell values will be cleared when paste action occurs (similar to Excel & Google Sheets).

Columns

columns

array(advanced)

Define initial array of column objects. Properties may include title, field, align, width, source and _hide (boolean).

Context Menu

contextMenuItems

array(advanced)

Takes an array of context menu items. Supports preset context menu item (strings) & custom defined context menu items (objects). For no context menu, pass an empty array or false.

Context Menu (touch)

contextMenuTouchItems

array(advanced)
available in Q2 2022

Takes an array of context menu touch items. Supports preset context menu touch item (strings) & custom defined context menu touch items (objects). For no context menu touch, pass an empty array or false.

Data

data

array

Data to be displayed in data grid. Can be either a 2D Array or an Array of Objects (JSON-style). When no data is given, grid will default to an empty 3×3 grid.

Font

fontFamily

string"sans-serif"

Defines font used in cells and headers.

fontSize

int13

Defines font size used in cells and headers, in pixels.

Localization

locale

object{}

Pass in locale settings to override default locale (International English).

Theme

theme

object{}

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