Optional
Readonly
classOptional
Readonly
drawControls the drawing of the focus ring.
true
Optional
Readonly
fixedEnables or disables the overlay shadow when scrolling horizontally
Optional
Readonly
fixedEnables or disables the overlay shadow when scrolling vertical
Optional
Readonly
freezeThe number of columns which should remain in place when scrolling horizontally. The row marker column, if enabled is always frozen and is not included in this count.
0
Optional
Readonly
getProvides per row theme overrides.
Optional
Readonly
groupControls the header of the group header row
headerHeight
Optional
Readonly
headerControls the height of the header row
36
Optional
Readonly
headerAdditional header icons for use by GridColumn
.
Providing custom header icons to the data grid must be done with a somewhat non-standard mechanism to allow
theming and scaling. The headerIcons
property takes a dictionary which maps icon names to functions which can
take a foreground and background color and returns back a string representation of an svg. The svg should contain
a header similar to this <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
and
interpolate the fg/bg colors into the string.
We recognize this process is not fantastic from a graphics workflow standpoint, improvements are very welcome here.
Optional
Readonly
heightSets the height of the data grid.
Optional
Readonly
maxThe maximum width a column can be automatically sized to.
maxColumnWidth
Optional
Readonly
maxThe maximum width a column can be resized to.
500
Optional
Readonly
minThe minimum width a column can be resized to.
50
Optional
Readonly
rowDetermins the height of each row.
34
Optional
Readonly
rowChanges the starting index for row markers.
1
Optional
Readonly
rowSets the width of row markers in pixels, if unset row markers will automatically size.
Optional
Readonly
rowDetermins if row markers should be automatically added to the grid.
none
Optional
Readonly
smoothControls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell aligned.
false
Optional
Readonly
smoothControls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell aligned.
false
Optional
Readonly
themeThe theme used by the data grid to get all color and font information
Optional
Readonly
verticalControls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.
true
Optional
Readonly
widthSets the width of the data grid.
Optional
Readonly
coerceAllows coercion of pasted values.
undefined
to accept default behavior or a GridCell
which should be used to represent the pasted value.
The pasted value
The cell being pasted into
Optional
Readonly
fillEnabled/disables the fill handle.
false
Optional
Readonly
keybindingsDetermins which keybindings are enabled.
is
{
selectAll: true,
selectRow: true,
selectColumn: true,
downFill: false,
rightFill: false,
pageUp: false,
pageDown: false,
clear: true,
copy: true,
paste: true,
search: false,
first: true,
last: true,
}
Optional
Readonly
onEmitted whenever a cell edit is completed.
Optional
Readonly
onEmitted whenever a cell mutation is completed and provides all edits inbound as a single batch.
Optional
Readonly
onEmitted whenever the user has requested the deletion of the selection.
Optional
Readonly
onOptional
Readonly
onCalled when data is pasted into the grid. If left undefined, the DataEditor
will operate in a
fallback mode and attempt to paste the text buffer into the current cell assuming the current cell is not
readonly and can accept the data type. If onPaste
is set to false or the function returns false, the grid will
simply ignore paste. If onPaste
evaluates to true the grid will attempt to split the data by tabs and newlines
and paste into available cells.
The grid will not attempt to add additional rows if more data is pasted then can fit. In that case it is advisable to simply return false from onPaste and handle the paste manually.
Optional
Readonly
onEmitted whenever a row append operation is requested. Append location can be set in callback.
Optional
Readonly
provideCallback for providing a custom editor for a cell.
Optional
Readonly
rowDetermines if row selection requires a modifier key to enable multi-selection or not. In auto mode it adapts to touch or mouse environments automatically, in multi-mode it always acts as if the multi key (Ctrl) is pressed.
auto
Optional
Readonly
trailingControls the trailing row used to insert new data into the grid.
Optional
Readonly
addThe icon to use for the cell. Either a GridColumnIcon or a member of the passed headerIcons
Optional
Readonly
hint?: stringA hint string displayed on hover. Usually something like "New row"
Optional
Readonly
sticky?: booleanWhen set to true, the trailing row is always visible.
Optional
Readonly
targetOverrides the column to focus when a new row is created.
Optional
Readonly
tint?: booleanIf the trailing row should be tinted
Optional
Readonly
validateUsed for validating cell values during editing.
A return of false indicates the value will not be accepted. A value of true indicates the value will be accepted. Returning a new GridCell will immediately coerce the value to match.
The cell which is being validated.
The new value being proposed.
The previous value before the edit.
Optional
Readonly
columnControls if multi-selection is allowed. If disabled, shift/ctrl/command clicking will work as if no modifiers are pressed.
When range select is set to cell, only one cell may be selected at a time. When set to rect one one rect at a time. The multi variants allow for multiples of the rect or cell to be selected.
multi
Optional
Readonly
columnControls which types of selections can exist at the same time in the grid. If selection blending is set to exclusive, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive.
Optional
Readonly
gridThe current selection of the data grid. Contains all selected cells, ranges, rows, and columns.
Optional
Readonly
highlightHighlight regions provide hints to users about relations between cells and selections.
Optional
Readonly
onEmitted whenever the grid selection changes.
The new gridSelection as created by user input.
Optional
Readonly
onEmitted when the grid selection is cleared.
Optional
Readonly
rangeControls if multi-selection is allowed. If disabled, shift/ctrl/command clicking will work as if no modifiers are pressed.
When range select is set to cell, only one cell may be selected at a time. When set to rect one one rect at a time. The multi variants allow for multiples of the rect or cell to be selected.
rect
Optional
Readonly
rangeControls which types of selections can exist at the same time in the grid. If selection blending is set to exclusive, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive.
exclusive
Optional
Readonly
rowControls if multi-selection is allowed. If disabled, shift/ctrl/command clicking will work as if no modifiers are pressed.
When range select is set to cell, only one cell may be selected at a time. When set to rect one one rect at a time. The multi variants allow for multiples of the rect or cell to be selected.
multi
Optional
Readonly
rowControls which types of selections can exist at the same time in the grid. If selection blending is set to exclusive, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive.
Optional
Readonly
spanIf set to default
, gridSelection
will be coerced to always include full spans.
default
Readonly
columnsThe columns to display in the data grid.
Readonly
getOptional
Readonly
getUsed to fetch large amounts of cells at once. Used for copy/paste, if unset copy will not work.
getCellsForSelection
is called when the user copies a selection to the clipboard or the data editor needs to
inspect data which may be outside the curently visible range. It must return a two-dimensional array (an array of
rows, where each row is an array of cells) of the cells in the selection's rectangle. Note that the rectangle can
include cells that are not currently visible.
If true
is passed instead of a callback, the data grid will internally use the getCellContent
callback to
provide a basic implementation of getCellsForSelection
. This can make it easier to light up more data grid
functionality, but may have negative side effects if your data source is not able to handle being queried for
data outside the normal window.
If getCellsForSelection
returns a thunk, the data may be loaded asynchronously, however the data grid may be
unable to properly react to column spans when performing range selections. Copying large amounts of data out of
the grid will depend on the performance of the thunk as well.
The range of requested cells
A signal indicating the requested cells are no longer needed
A row-major collection of cells or an async thunk which returns a row-major collection.
Optional
Readonly
getProvides additional details about groups to extend group functionality.
Readonly
rowsThe number of rows in the grid.
Optional
Readonly
customAn array of custom renderers which can be used to extend the data grid.
Optional
Readonly
Experimental
experimentalExperimental features
Optional
Readonly
enableOptional
Readonly
hyperOptional
Readonly
isOptional
Readonly
paddingOptional
Readonly
paddingOptional
Readonly
scrollbarOptional
Readonly
strict?: booleanOptional
Readonly
imageUsed to provide an override to the default image editor for the data grid. provideEditor
may be a better
choice for most people.
Optional
Readonly
imageAllows passing a custom image window loader.
Optional
Readonly
initialProvides an initial size for the grid which can prevent a flicker on load if the initial size is known prior to layout.
Optional
Readonly
markdownIf specified, it will be used to render Markdown, instead of the default Markdown renderer used by the Grid. You'll want to use this if you need to process your Markdown for security purposes, or if you want to use a renderer with different Markdown features.
Optional
Readonly
overscrollXThe overscroll properties are used to allow the grid to scroll past the logical end of the content by a fixed number of pixels. This is useful particularly on the X axis if you allow for resizing columns as it can make resizing the final column significantly easier.
Optional
Readonly
overscrollYThe overscroll properties are used to allow the grid to scroll past the logical end of the content by a fixed number of pixels. This is useful particularly on the X axis if you allow for resizing columns as it can make resizing the final column significantly easier.
Optional
Readonly
preventSet to true to prevent any diagonal scrolling.
Optional
Readonly
rightThe right element is a DOM node which can be inserted at the end of the horizontal scroll region. This can be used to create a right handle panel, make a big add button, or display messages.
Optional
Readonly
rightIf rightElementProps.sticky
is set to true the right element will be visible at all times, otherwise the user
will need to scroll to the end to reveal it.
If rightElementProps.fill
is set, the right elements container will fill to consume all remaining space (if
any) at the end of the grid. This does not play nice with growing columns.
Optional
Readonly
fill?: booleanOptional
Readonly
sticky?: booleanOptional
Readonly
scrollOptional
Readonly
scrollOptional
Readonly
showEnables/disables the interactive minimap.
false
Optional
Readonly
drawCallback used to override the rendering of any cell.
Optional
Readonly
drawOverrides the rendering of a header. The grid will call this for every header it needs to render. Header rendering is not as well optimized because they do not redraw as often, but very heavy drawing methods can negatively impact horizontal scrolling performance.
It is possible to return false
after rendering just a background and the regular foreground rendering
will happen.
false
if default header rendering should still happen, true
to cancel rendering.
Optional
Readonly
isDetermines what can be dragged using HTML drag and drop
Optional
Readonly
onCalled when the user finishes moving a column. startIndex
is the index of the column that was moved, and
endIndex
is the index at which it should end up. Note that you have to effect the move of the column, and pass
the reordered columns back in the columns
property.
Optional
Readonly
onCalled when the user is resizing a column. newSize
is the new size of the column. Note that you have change
the size of the column in the GridColumn
and pass it back to the grid in the columns
property.
The GridColumn
being resized
The new size of the grid column
The index of the column
The new size of the column including any addition pixels added by the grow parameter
Optional
Readonly
onCalled when the user finishes resizing a column. newSize
is the new size of the column.
The GridColumn
being resized
The new size of the grid column
The index of the column
The new size of the column including any addition pixels added by the grow parameter
Optional
Readonly
onCalled when the user starts resizing a column. newSize
is the new size of the column.
The GridColumn
being resized
The new size of the grid column
The index of the column
The new size of the column including any addition pixels added by the grow parameter
Optional
Readonly
onOptional
Readonly
onOptional
Readonly
onIf isDraggable
is set, the grid becomes HTML draggable, and onDragStart
will be called when dragging starts.
You can use this to build a UI where the user can drag the Grid around.
Optional
Readonly
onOptional
Readonly
onCalled whenever a row re-order operation is completed. Setting the callback enables re-ordering by dragging the first column of a row.
Optional
Readonly
onOptional
Readonly
onEmitted when a cell is clicked.
Optional
Readonly
onEmitted when a cell should show a context menu. Usually right click.
Optional
Readonly
onEmitted when a group header is clicked.
Optional
Readonly
onEmitted when a group header should show a context menu. Usually right click.
Optional
Readonly
onEmitted whe the user wishes to rename a group.
Optional
Readonly
onEmitted when a column header should show a context menu. Usually right click.
Optional
Readonly
onEmitted when a column header should show a context menu. Usually right click.
Optional
Readonly
onOptional
Readonly
onEmitted when an item is hovered.
Optional
Readonly
onEmitted when the canvas receives a key down event.
Optional
Readonly
onEmitted when the canvas receives a key up event.
Optional
Readonly
onFires whenever the mouse moves
Optional
Readonly
onEmitted whenever the visible cells change, usually due to scrolling.
An inclusive range of all visible cells. May include cells obscured by UI elements such as headers.
Optional
tx: numberThe x transform of the cell region.
Optional
ty: numberThe y transform of the cell region.
Optional
extras: { freezeRegion?: Rectangle; selected?: Item }Contains information about the selected cell and any visible freeze columns.
Optional
Readonly
onEmitted when the search window close event is triggered.
Optional
Readonly
showControls the visibility of the search overlay.
Optional
Readonly
scrollGenerated using TypeDoc
Custom classname for data grid wrapper.