Interface DataEditorProps

Hierarchy

  • Props

    Hierarchy

    • DataEditorProps

Style

Editing

Selection

Data

Advanced

Drawing

Drag and Drop

Events

Search

Deprecated

Style

className?: string

Custom classname for data grid wrapper.

drawFocusRing?: boolean

Controls the drawing of the focus ring.

Default Value

true

fixedShadowX?: boolean

Enables or disables the overlay shadow when scrolling horizontally

fixedShadowY?: boolean

Enables or disables the overlay shadow when scrolling vertical

freezeColumns?: number

The 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.

Default Value

0

getRowThemeOverride?: GetRowThemeCallback

Provides per row theme overrides.

groupHeaderHeight?: number

Controls the header of the group header row

Default Value

headerHeight

headerHeight?: number

Controls the height of the header row

Default Value

36

headerIcons?: SpriteMap

Additional 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.

height?: string | number

Sets the height of the data grid.

maxColumnAutoWidth?: number

The maximum width a column can be automatically sized to.

Default Value

maxColumnWidth

maxColumnWidth?: number

The maximum width a column can be resized to.

Default Value

500

minColumnWidth?: number

The minimum width a column can be resized to.

Default Value

50

rowHeight?: number | ((index: number) => number)

Determins the height of each row.

Default Value

34

rowMarkerStartIndex?: number

Changes the starting index for row markers.

Default Value

1

rowMarkerWidth?: number

Sets the width of row markers in pixels, if unset row markers will automatically size.

rowMarkers?: "number" | "none" | "checkbox" | "both" | "clickable-number"

Determins if row markers should be automatically added to the grid.

Default Value

none

smoothScrollX?: boolean

Controls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell aligned.

Default Value

false

smoothScrollY?: boolean

Controls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell aligned.

Default Value

false

theme?: Partial<Theme>

The theme used by the data grid to get all color and font information

verticalBorder?: boolean | ((col: number) => boolean)

Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.

Default Value

true

width?: string | number

Sets the width of the data grid.

Editing

coercePasteValue?: ((val: string, cell: GridCell) => undefined | GridCell)

Type declaration

    • (val: string, cell: GridCell): undefined | GridCell
    • Allows coercion of pasted values.

      Returns

      undefined to accept default behavior or a GridCell which should be used to represent the pasted value.

      Parameters

      • val: string

        The pasted value

      • cell: GridCell

        The cell being pasted into

      Returns undefined | GridCell

fillHandle?: boolean

Enabled/disables the fill handle.

Default Value

false

keybindings?: Partial<Keybinds>

Determins which keybindings are enabled.

Default Value

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,
}
onCellEdited?: ((cell: Item, newValue: EditableGridCell) => void)

Type declaration

onCellsEdited?: ((newValues: readonly EditListItem[]) => boolean | void)

Type declaration

    • (newValues: readonly EditListItem[]): boolean | void
    • Emitted whenever a cell mutation is completed and provides all edits inbound as a single batch.

      Parameters

      • newValues: readonly EditListItem[]

      Returns boolean | void

onDelete?: ((selection: GridSelection) => boolean | GridSelection)

Type declaration

onFinishedEditing?: ((newValue: undefined | GridCell, movement: Item) => void)

Type declaration

    • (newValue: undefined | GridCell, movement: Item): void
    • Emitted when editing has finished, regardless of data changing or not.

      Parameters

      Returns void

onPaste?: boolean | ((target: Item, values: readonly (readonly string[])[]) => boolean)

Called 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.

onRowAppended?: (() => void | Promise<undefined | number | "bottom" | "top">)

Type declaration

    • (): void | Promise<undefined | number | "bottom" | "top">
    • Emitted whenever a row append operation is requested. Append location can be set in callback.

      Returns void | Promise<undefined | number | "bottom" | "top">

Callback for providing a custom editor for a cell.

rowSelectionMode?: "auto" | "multi"

Determines 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.

Default Value

auto

trailingRowOptions?: { addIcon?: string; hint?: string; sticky?: boolean; targetColumn?: number | GridColumn; tint?: boolean }

Controls the trailing row used to insert new data into the grid.

Type declaration

  • Optional Readonly addIcon?: string

    The icon to use for the cell. Either a GridColumnIcon or a member of the passed headerIcons

  • Optional Readonly hint?: string

    A hint string displayed on hover. Usually something like "New row"

  • Optional Readonly sticky?: boolean

    When set to true, the trailing row is always visible.

  • Optional Readonly targetColumn?: number | GridColumn

    Overrides the column to focus when a new row is created.

  • Optional Readonly tint?: boolean

    If the trailing row should be tinted

validateCell?: ((cell: Item, newValue: EditableGridCell, prevValue: GridCell) => boolean | ValidatedGridCell)

Type declaration

    • (cell: Item, newValue: EditableGridCell, prevValue: GridCell): boolean | ValidatedGridCell
    • Used for validating cell values during editing.

      Returns

      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.

      Parameters

      • cell: Item

        The cell which is being validated.

      • newValue: EditableGridCell

        The new value being proposed.

      • prevValue: GridCell

        The previous value before the edit.

      Returns boolean | ValidatedGridCell

Selection

columnSelect?: "none" | "single" | "multi"

Controls 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.

Default Value

multi

columnSelectionBlending?: SelectionBlending

Controls 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.

gridSelection?: GridSelection

The current selection of the data grid. Contains all selected cells, ranges, rows, and columns.

highlightRegions?: readonly Highlight[]

Highlight regions provide hints to users about relations between cells and selections.

onGridSelectionChange?: ((newSelection: GridSelection) => void)

Type declaration

    • (newSelection: GridSelection): void
    • Emitted whenever the grid selection changes.

      Parameters

      • newSelection: GridSelection

        The new gridSelection as created by user input.

      Returns void

onSelectionCleared?: (() => void)

Type declaration

    • (): void
    • Emitted when the grid selection is cleared.

      Returns void

rangeSelect?: "rect" | "none" | "cell" | "multi-cell" | "multi-rect"

Controls 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.

Default Value

rect

rangeSelectionBlending?: SelectionBlending

Controls 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.

Default Value

exclusive

rowSelect?: "none" | "single" | "multi"

Controls 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.

Default Value

multi

rowSelectionBlending?: SelectionBlending

Controls 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.

spanRangeBehavior?: "default" | "allowPartial"

If set to default, gridSelection will be coerced to always include full spans.

Default Value

default

Data

columns: readonly GridColumn[]

The columns to display in the data grid.

getCellContent: ((cell: Item) => GridCell)

Type declaration

    • (cell: Item): GridCell
    • The primary callback for getting cell data into the data grid.

      Returns

      A valid GridCell to be rendered by the Grid.

      Parameters

      • cell: Item

        The location of the cell being requested.

      Returns GridCell

getCellsForSelection?: true | ((selection: Rectangle, abortSignal: AbortSignal) => GetCellsThunk | CellArray)

Used 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.

Param

The range of requested cells

Param

A signal indicating the requested cells are no longer needed

Returns

A row-major collection of cells or an async thunk which returns a row-major collection.

getGroupDetails?: GroupDetailsCallback

Provides additional details about groups to extend group functionality.

rows: number

The number of rows in the grid.

Advanced

customRenderers?: readonly CustomRenderer<CustomCell<{}>>[]

An array of custom renderers which can be used to extend the data grid.

experimental?: { enableFirefoxRescaling?: boolean; hyperWrapping?: boolean; isSubGrid?: boolean; paddingBottom?: number; paddingRight?: number; scrollbarWidthOverride?: number; strict?: boolean }

Experimental features

Type declaration

  • Optional Readonly enableFirefoxRescaling?: boolean
  • Optional Readonly hyperWrapping?: boolean
  • Optional Readonly isSubGrid?: boolean
  • Optional Readonly paddingBottom?: number
  • Optional Readonly paddingRight?: number
  • Optional Readonly scrollbarWidthOverride?: number
  • Optional Readonly strict?: boolean
imageEditorOverride?: ImageEditorType

Used to provide an override to the default image editor for the data grid. provideEditor may be a better choice for most people.

imageWindowLoader?: ImageWindowLoader

Allows passing a custom image window loader.

initialSize?: readonly [number, number]

Provides an initial size for the grid which can prevent a flicker on load if the initial size is known prior to layout.

markdownDivCreateNode?: ((content: string) => DocumentFragment)

Type declaration

    • (content: string): DocumentFragment
    • If 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.

      Parameters

      • content: string

      Returns DocumentFragment

overscrollX?: number

The 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.

overscrollY?: number

The 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.

preventDiagonalScrolling?: boolean

Set to true to prevent any diagonal scrolling.

rightElement?: ReactNode

The 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.

rightElementProps?: { fill?: boolean; sticky?: boolean }

If 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.

Type declaration

  • Optional Readonly fill?: boolean
  • Optional Readonly sticky?: boolean
scrollOffsetX?: number

Sets the initial scroll X offset

See

scrollOffsetY

scrollOffsetY?: number

Sets the initial scroll Y offset.

See

scrollOffsetX

showMinimap?: boolean

Enables/disables the interactive minimap.

Default Value

false

Drawing

Callback used to override the rendering of any cell.

drawHeader?: DrawHeaderCallback

Overrides 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.

Returns

false if default header rendering should still happen, true to cancel rendering.

Drag and Drop

isDraggable?: boolean | "header" | "cell"

Determines what can be dragged using HTML drag and drop

onColumnMoved?: ((startIndex: number, endIndex: number) => void)

Type declaration

    • (startIndex: number, endIndex: number): void
    • Called 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.

      Parameters

      • startIndex: number
      • endIndex: number

      Returns void

onColumnResize?: ((column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number) => void)

Type declaration

    • (column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number): void
    • Called 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.

      Parameters

      • column: GridColumn

        The GridColumn being resized

      • newSize: number

        The new size of the grid column

      • colIndex: number

        The index of the column

      • newSizeWithGrow: number

        The new size of the column including any addition pixels added by the grow parameter

      Returns void

onColumnResizeEnd?: ((column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number) => void)

Type declaration

    • (column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number): void
    • Called when the user finishes resizing a column. newSize is the new size of the column.

      Parameters

      • column: GridColumn

        The GridColumn being resized

      • newSize: number

        The new size of the grid column

      • colIndex: number

        The index of the column

      • newSizeWithGrow: number

        The new size of the column including any addition pixels added by the grow parameter

      Returns void

onColumnResizeStart?: ((column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number) => void)

Type declaration

    • (column: GridColumn, newSize: number, colIndex: number, newSizeWithGrow: number): void
    • Called when the user starts resizing a column. newSize is the new size of the column.

      Parameters

      • column: GridColumn

        The GridColumn being resized

      • newSize: number

        The new size of the grid column

      • colIndex: number

        The index of the column

      • newSizeWithGrow: number

        The new size of the column including any addition pixels added by the grow parameter

      Returns void

onDragLeave?: (() => void)

Type declaration

    • (): void
    • Returns void

onDragOverCell?: ((cell: Item, dataTransfer: null | DataTransfer) => void)

Type declaration

    • (cell: Item, dataTransfer: null | DataTransfer): void
    • Parameters

      • cell: Item
      • dataTransfer: null | DataTransfer

      Returns void

onDragStart?: ((args: GridDragEventArgs) => void)

Type declaration

    • (args: GridDragEventArgs): void
    • If 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.

      Parameters

      Returns void

onDrop?: ((cell: Item, dataTransfer: null | DataTransfer) => void)

Type declaration

    • (cell: Item, dataTransfer: null | DataTransfer): void
    • Called when a HTML Drag and Drop event is ended on the data grid.

      Parameters

      • cell: Item
      • dataTransfer: null | DataTransfer

      Returns void

onRowMoved?: ((startIndex: number, endIndex: number) => void)

Type declaration

    • (startIndex: number, endIndex: number): void
    • Called whenever a row re-order operation is completed. Setting the callback enables re-ordering by dragging the first column of a row.

      Parameters

      • startIndex: number
      • endIndex: number

      Returns void

Events

onCellActivated?: ((cell: Item) => void)

Type declaration

    • (cell: Item): void
    • Emitted when a cell is activated, by pressing Enter, Space or double clicking it.

      Parameters

      Returns void

onCellClicked?: ((cell: Item, event: CellClickedEventArgs) => void)

Type declaration

onCellContextMenu?: ((cell: Item, event: CellClickedEventArgs) => void)

Type declaration

onGroupHeaderClicked?: ((colIndex: number, event: GroupHeaderClickedEventArgs) => void)

Type declaration

onGroupHeaderContextMenu?: ((colIndex: number, event: GroupHeaderClickedEventArgs) => void)

Type declaration

onGroupHeaderRenamed?: ((groupName: string, newVal: string) => void)

Type declaration

    • (groupName: string, newVal: string): void
    • Emitted whe the user wishes to rename a group.

      Parameters

      • groupName: string
      • newVal: string

      Returns void

onHeaderClicked?: ((colIndex: number, event: HeaderClickedEventArgs) => void)

Type declaration

onHeaderContextMenu?: ((colIndex: number, event: HeaderClickedEventArgs) => void)

Type declaration

onHeaderMenuClick?: ((col: number, screenPosition: Rectangle) => void)

Type declaration

    • (col: number, screenPosition: Rectangle): void
    • Emitted when a header menu disclosure indicator is clicked.

      Parameters

      Returns void

onItemHovered?: ((args: GridMouseEventArgs) => void)

Type declaration

onKeyDown?: ((event: GridKeyEventArgs) => void)

Type declaration

onKeyUp?: ((event: GridKeyEventArgs) => void)

Type declaration

onMouseMove?: ((args: GridMouseEventArgs) => void)

Type declaration

onVisibleRegionChanged?: ((range: Rectangle, tx?: number, ty?: number, extras?: { freezeRegion?: Rectangle; selected?: Item }) => void)

Type declaration

    • (range: Rectangle, tx?: number, ty?: number, extras?: { freezeRegion?: Rectangle; selected?: Item }): void
    • Emitted whenever the visible cells change, usually due to scrolling.

      Parameters

      • range: Rectangle

        An inclusive range of all visible cells. May include cells obscured by UI elements such as headers.

      • Optional tx: number

        The x transform of the cell region.

      • Optional ty: number

        The y transform of the cell region.

      • Optional extras: { freezeRegion?: Rectangle; selected?: Item }

        Contains information about the selected cell and any visible freeze columns.

        • Optional freezeRegion?: Rectangle

          A selection of visible freeze columns

        • Optional selected?: Item

          The selected item if visible

      Returns void

Search

onSearchClose?: (() => void)

Type declaration

    • (): void
    • Emitted when the search window close event is triggered.

      Returns void

showSearch?: boolean

Controls the visibility of the search overlay.

Deprecated

scrollToEnd?: boolean

Causes the grid to scroll to the end when flipped to true

Deprecated

Use scrollTo instead

Generated using TypeDoc