Skip to main content

Properties

Once instantiated, canvas-datagrid exposes a number of properties.

const grid = canvasDatagrid({ data });

// Some user interaction occurs

const activeCell = grid.activeCell;

All options​

NameTypeDescription

activeCell object​

Gets the active cell as {rowIndex, columnIndex} (view indexes). The active cell is the one that receives keyboard input and edits and is drawn with the activeCell* styles. It is independent of the selection: keyboard navigation moves it, selectNone() keeps it, and a range selection has exactly one active cell (the one the drag started from). Move it with setActiveCell(columnIndex, rowIndex) and listen to activecellchanged to follow it.

attributes object​

Object that contains the properties listed in the attributes section. These properties can be used at runtime to alter attributes set during instantiation. See the See canvasDatagrid.params section for full documentation.

canvas object​

The canvas element drawn onto for this grid.

changes array​

Array of changes and additions made to the grid since last time data was loaded. The data property will change with changes as well, but this is a convince list of all the changes in one spot. Calling clearChangeLog will clear this list.

childGrids boolean​

Child grids in this grid organized by internal unique row id.

columnOrder array​

Gets or sets the order of the columns. This allows you to modify the appearance of the schema without modifying the data itself. The order of the array dictates the order of the columns, e.g.: [0, 1, 2] is normal order, [2, 1, 0] is reverse. The array length must be equal to or greater than the number of columns.

controlInput object​

Input used for key controls on the grid. Any clicks on the grid will cause this input to be focused. This input is hidden above the top left corner of the browser window.

currentCell canvasDatagrid.cell​

Cell that the mouse moved over last.

data canvasDatagrid.data​

This is how data is set in the grid. Data must be an array of objects that conform to a schema. Data values can be any primitive type. However if a cell value is another data array, an inner grid will be rendered into the cell. This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the cellGridAttributes attribute for properties and styling. See canvasDatagrid.data.

dragMode string​

Represents the currently displayed resize cursor. Can be ns-resize, ew-resize, pointer, or inherit.

filters canvasDatagrid.filter​

Object that contains a list of filters for filtering data. The properties in this object match the schema[].type property. For example, if the schema for a given column was of the type date the grid would look for a filter called filters.date if a filter cannot be found for a given data type a warning will be logged and the string/RegExp filter will be used. See canvasDatagrid.filters.

formatters canvasDatagrid.formatter​

Object that contains formatting functions for displaying text. The properties in this object match the schema[].type property. For example, if the schema for a given column was of the type date the grid would look for a formatter called formatters.date if a formatter cannot be found for a given data type a warning will be logged and the string formatter will be used. Formatters must return a string value to be displayed in the cell. See canvasDatagrid.formatters.

frozenColumn number​

The highest frozen column index. Setting a value higher than the possible visible columns will result in a range error.

frozenRow number​

The highest frozen row index. Setting a value higher than the possible visible rows will result in a range error.

hasActiveFilters boolean​

When true, grid data is being filtered.

hasFocus boolean​

When true, the grid is has focus.

height number​

Height of the grid.

input object​

Reference to the the edit cell when editing. Undefined when not editing. When editing, this DOM element is superimposed over the cell being edited and is fully visible.

isChildGrid boolean​

When true, this grid is a child grid of another grid. Meaning, it appears as a tree grid or a cell grid of another parent grid.

isChildGrid boolean​

When true, this grid is within another grid.

offsetLeft number​

The offset left of the grid.

offsetTop number​

The offset top of the grid.

openChildren boolean​

List of open child grids by internal unique row id.

orderBy string​

The name of the column the grid is currently sorted by. You can set this value to any column name to alter the sort order dependent on data type. Subscribing to beforesortcolumn and calling e.preventDefault allows you to change the property and the graphical appearance of the grid (an order arrow will be drawn over the respective column) without invoking the client side ordering function. This is useful if you want to use server side data ordering.

orderDirection string​

Gets or sets the order by direction. Value can be asc for ascending order or desc for descending order. Subscribing to beforesortcolumn and calling e.preventDefault allows you to change the property and the graphical appearance of the grid (an order arrow will be drawn over the respective column) without invoking the client side ordering function. This is useful if you want to use server side data ordering.

parentGrid canvasDatagrid​

If this grid is a child grid, this is the grids parent.

parentNode HTMLElement​

The parent node of the canvas, usually the shadow DOM's parent element.

rowOrder array​

Gets or sets the order of the rows. This allows you to modify the appearance of the data without modifying the data itself. The order of the array dictates the order of the rows, e.g.: [0, 1, 2] is normal order, [2, 1, 0] is reverse. The array length must be equal to or greater than the number of rows.

schema canvasDatagrid.schema​

Schema is optional. Schema is an array of {canvasDatagrid.header} objects. If no schema is provided one will be generated from the data, in that case all data will be assumed to be string data. See canvasDatagrid.schema.

scrollHeight number​

The total number of pixels that can be scrolled down.

scrollIndexRect object​

Rect describing the view port of the virtual canvas in column and row indexes. If you only want to do things to visible cells, this is a good property to check what the range of visible cells is.

scrollLeft number​

The current position of the horizontal scroll bar in pixels.

scrollPixelRect object​

Rect describing view port of the virtual canvas in pixels.

scrollTop number​

The current position of the vertical scroll bar in pixels.

scrollWidth number​

The total number of pixels that can be scrolled to the left.

selectedCells array​

Jagged array of cells that the user has selected. Beware that because this is a jagged array, some indexes will be null. Besides the nulls this data looks just like the data you passed in, but just the cells the user has selected. So if the user has selected cell 10 in a 10 column row, there will be 9 nulls followed by the data from column 10.

selectedRows array​

Selected rows. Same as the data property but filtered for the rows the user has cells selected in. If any cell in the row is selected, all data for that row will appear in this array.

selectionBounds rect​

Bounds of current selection.

selections array​

Matrix array of selected cells.

shadowRoot HTMLElement​

The shadow root element.

sizes object​

Mutable object that contains sizes.columns and sizes.rows arrays. These arrays control the sizes of the columns and rows. If there is not an entry for the row or column index it will fall back to the style default.

sorters canvasDatagrid.sorter​

Object that contains a list of sorting functions for sorting columns. See sorters.

style canvasDatagrid.style​

Object that contains the properties listed in the style section. Changing a style will automatically call draw.

visibleCells array​

Array of cell drawn.

visibleRowHeights array​

The heights of the visible rows.

visibleRows array​

Array of visible row indexes.

width number​

Width of the grid.