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.