# Virtualized Data Table Component Documentation Note that in the below documentation, "In FxDT" means "In Fixed-Data-Table"

* **[<VirtualizedDataTable>](#VirtualizedDataTable)** * **[<Column>](#Column)** * **[<ColumnGroup>](#ColumnGroup)** * **[<Cell>](#Cell)** * **[<ClipboardHelper>](#ClipboardHelper)** * **[<KeyHandler>](#KeyHandler)** --- ### <VirtualizedDataTable> This is the core table component which supports Fixed Data Table style properties and markup.

Example:

``` javascript ```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description| |:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:| |_rowCount|_number|₄|_no|_{Either rowCount or rowsCount must be defined}|_{The number of rows in the table}| |_rowsCount|_number|₄|_yes|_{Either rowCount or rowsCount must be defined}|_{The number of rows in the table}| |_rowGetter|_func|_{({ rowIndex }) => data[rowIndex];}|_no|_yes|_{returns the data for the given row. This data must take the form of an object with a key for each columnKey. This can be an Immutable.JS or regular JS object}| |_height|_number|₄₅₀|_yes|_yes|_{The height of the table to render. If the rows take up more vertical space, a scrollbar will appear. If they take up less vertical space, empty rows will be drawn}| |_width|_number|₈₀₀|_yes|_yes|_{The width of the table to render. If the rows take up more horizontal space, a scrollbar will appear. If they take up less horizontal space, apply flexGrow={1} to final column for it to take up remaining width}| |_style|_object|_{{ border: '1px solid black' }}|_yes|_no|_{The style to apply to the outer frame of the table}| |_rowHeight|_number|₄₅|_yes|_yes|_{The height of a row in the table. Currently all rows must have the same height}| |_headerHeight|_number|₆₀|_yes|_yes|_{The height of the header row of the table}| |_{groupHeaderHeight}|_number|₅₅|_no|_yes|_{The height of the group header of the table (a header row above the header row which can span headers)}| |_{onColumnResizeEndCallback}|_func|_{(columnWidth, columnKey) => this.setState({ columnKey: columnWidth })}|_no|_no|_{This function is called when the user finishes resizing a column. The column key of the resized column and its new width will be provided}| |_{noHeaderScroll}|_bool|_true|_no|_no|_{If true, the header will not show a scrollbar if their cells are taller than header height}| |_{allowRowSelect}|_bool|_true|_no|_no|_{If true, then entire rows can be selected by clicking a cell}| |_{allowRangeSelect}|_bool|_true|_no|_no|_{If true, then individual cells or rectangular groups of cells can be selected by clicking and then using shift-arrow keys}| |_{allowMultiSelect}|_bool|_true|_no|_no|_{If true, then multiple rows or ranges can be selected by CTRL-clicking}| |_focusStyle|_object|_{{ border: '2px solid red' }}|_no|_no|_{The style to apply to cells which have been focused (clicked)|
|_{selectionStyle}|_object|_{{ background: 'yellow' }}|_no|_no|_{The style to apply to cells which have been selected}|
|_{canSelectColumn}|_func|_{(columnKey) => false}|_no|_no|_{Called when a selection is occurring in a particular column. Returns whether selection should be allowed}|
|_canSelectRow|_func|_{(rowIndex) => false}|_no|_no|_{Called when a selection is occurring in a particular row. Returns whether selection should be allowed}|
|_{onSelectionChange}|_func|_{(ranges) => { ... do something ... }}|_no|_no|_{Called when the selection in the table changes. Ranges will be passed an Immutable.JS list of objects which have a rowStart, rowEnd, columnStart, and columnEnd which are all 0-based numbers}|
|_onCellClick|_func|_{({ evt, rowIndex, columnIndex, columnKey, rowData }) => { ... do something ... }}|_no|_no|_{Called when a cell is clicked}|
|_{onCellDoubleClick}|_func|_{({ evt, rowIndex, columnIndex, columnKey, rowData }) => { ... do something ... }}|_no|_no|_{Called when a cell is double-clicked}|
|_onCellHover|_func|_{({ evt, rowIndex, columnIndex, columnKey, rowData }) => { ... do something ... }}|_no|_no|_{Called when a cell is hovered}|
|_onCellFocus|_func|_{({ evt, rowIndex, columnIndex, columnKey, rowData }) => { ... do something ... }}|_no|_no|_{Called when a cell is focused (clicked or navigated to via arrow keys)}|
|_onCellCopy|_func|_{({ rowIndex, columnIndex, columnKey, rowData }) => { return rowData[columnKey]; }}|_no|_no|_{Called when a cell data needs to be copied to clipboard. The data to be copied should be returned from this function as a string}|
|_onCellCut|_func|_{({ rowIndex, columnIndex, columnKey, rowData }) => { return rowData[columnKey]; }}|_no|_no|_{Called when a cell data needs to be cut to clipboard. The data to be copied should be returned from this function as a string}|
|_onCellPaste|_func|_{({ rowIndex, columnIndex, columnKey, text }) => { ... do something with text ... }}|_no|_no|_{Called when a cell data needs to be pasted from the clipboard.}|
|_{shouldHandleKeyEvent}|_func|_{(evt) => true}|_no|_no|_{Whenever a keyboard event is seen by the data table, this function will be called to check to see if we should handle that key event}|
|_{performingBulkUpdate}|_number|₀|_no|_no|_{If > 0, then all rendering will be suppressed. This is a performance improvement used when many cells are being bulk updated, like during a paste operation}|
|_{evenRowBackgroundColor}|_string|_#e0e0e0|_no|_no|_{The background color to use for even-numbered rows}|
|_{oddRowBackgroundColor}|_string|_#bbb|_no|_no|_{The background color to use for odd-numbered rows}|
|_{highlightRowKey}|_string|_widgetId|_no|_no|_{The key to be inspected in the object returned from rowGetter(). If that key value matches the highlightRowValue prop then the row will be a highlighted row}|
|_{highlightRowValue}|_any|_{id_1}|_no|_no|_{The value to be checked for in the row to see if this row should be a highlighted row}|
|_{highlightRowColor}|_string|_#00ffff|_no|_no|_{The background color to use for highlighted row(s). If not defined, then color #b3e5fc will be used}|

### <Column>

This component is used to define a column in the table.
Example:

``` javascript

```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description|
|:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:|
|_columnKey|_string|_spendColumn|_yes|_yes|_{The key to associate with this column, which will appear in callbacks associated with this column}|
|_width|_number|₁₀₀|_yes|_yes|_{The width of this column}|
|_header|_element|_Spend|_yes|_no|_{The header cell to apply to this column}|
|_cell|_element|_{({ rowData, columnKey, ...props }) => (Spend: { rowData[columnKey] }}|_yes|_yes|_{The cell to apply for regular rows in this column}|

### <ColumnGroup>

This component is used to define a column in the table.
Example:

``` javascript

```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description|
|:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:|
|_header|_element|_Spend|_no|_no|_{The header cell to apply to this column group}|
|_hidden|_bool|_true|_no|_no|_{If true, then hide this column group but render vertical space for it}|

### <Cell>

This is the base cell component for cells in the table.
Example:

``` javascript

```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description|
|:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:|
|_{allowOverflow}|_bool|_true|_no|_no|_{If true, then contents of the cell will not be clipped to the cell boundary}|
|_className|_string|_my-cool-cell|_no|_no|_{A CSS class name to assign to this cell}|
|_onClick|_func|_{(evt, rowData rowIndex, columnKey) => { ... do something ... }}|_no|_no|_{Callback for clicks in this cell}|
|_onMouseEnter|_func|_{(evt, rowData rowIndex, columnKey) => { ... do something ... }}|_no|_no|_{Callback for mouseEnter event in this cell}|
|_onMouseLeave|_func|_{(evt, rowData rowIndex, columnKey) => { ... do something ... }}|_no|_no|_{Callback for mouseLeave event in this cell}|
|_style|_{func OR object}|_{{ fontSize: '14px' }}|_no|_no|_{Style to use for this cell. If style should vary based on rowIndex or columnKey, then implement a function and it will be called with (rowData, rowIndex, columnKey)}|
|_{mountRenderDelay}|_number|₅₀|_no|_no|_{A delay timeout in msec between cell mount and when the cell contents are rendered. Useful if your cell is expensive to render as this can help avoid rendering you cell while the user is scrolling past it}|

### <ClipboardHelper>

This is a non-rendering helper component which can handle copy/paste messages
Example:

``` javascript

```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description|
|:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:|
|_onCopy|_func|_{(evt) => { ... add data to evt clipboard ... }}|_no|_no|_{Called when a clipboard copy operation happens}|
|_onCut|_func|_{(evt) => { ... add data to evt clipboard ... }}|_no|_no|_{Called when a clipboard cut operation happens}|
|_onPaste|_func|_{(evt) => { ... do something with evt clipboard ... }}|_no|_no|_{Called when a clipboard paste operation happens}|
|_getInputRef|_func|_{() => this._gridRef;}|_no|_no|_{If defined, it returns a reference to a React component which needs to contain the clipboard event target in order for the component to issue the onCut/onCopy/onPaste events}|
|_{allowInputCutCopy}|_bool|_true|_no|_no|_{If true, allow cut/copy from input DOM elements}|
|_{allowEditableCutCopy}|_bool|_true|_no|_no|_{If true, allow cut/copy from editable DOM elements}|
|_{allowInputPaste}|_bool|_true|_no|_no|_{If true, allow paste to input DOM elements}|
|_{allowEditablePaste}|_bool|_true|_no|_no|_{If true, allow paste to editable DOM elements}|
|_{pushBulkUpdate}|_func|_{() => this.setState({ bulk: this.state.bulk + 1 })}|_no|_no|_{If defined, this callback will be called when a bulk paste operation begins. You should use this to send performingBulkUpdate to the VirtualizedDataTable for performance reasons on paste}|
|_{popBulkUpdate}|_func|_{() => this.setState({ bulk: this.state.bulk - 1 })}|_no|_no|_{If defined, this callback will be called when a bulk paste operation ends. You should use this to send performingBulkUpdate to the VirtualizedDataTable for performance reasons on paste}|

### <KeyHandler>

This is a non-rendering helper component which can handle keyboard messages
Example:

``` javascript

```

Properties:

|Property Name|Data Type|Example Value|In FxDT?|Required?|Description|
|:-----------:|:-------:|:-----------:|:------:|:-------:|:---------:|
|_keys|_{array of strings}|_{['ArrowUp', 'ArrowDown']}|_no|_no|_{If provided, only handle key events for the given key codes}|
|_onKey|_func|_{(evt) => { ... do something with this key event ... }}|_no|_yes|_{called when a keyboard event occurs|
|_ignoreInput|_bool|_true|_no|_no|_{if true, ignore keyboard events coming from input DOM elements}|
|_getInputRef|_func|_{() => this._keySrcRef;}|_no|_no|_{If defined, then only consider key events coming from within the React component returned from this callback}|}}

Table of contents

Example:

Properties:

Example:

Properties:

Example:

Properties:

Example:

Properties:

Example:

Properties:

Example:

Properties: