in src/draft-components/grid/grid.tsx [457:479]
private renderCell(rowIndex: number, cellIndex: number, content: string) {
const activeCellId = this.activeCell.join('-');
const currentCellKey = `${cellIndex}-${rowIndex}`;
const cellColumn = this.rowSelection === RowSelectionPattern.Checkbox ? this.columns[cellIndex - 1] : this.columns[cellIndex];
const isActiveCell = activeCellId === currentCellKey && !cellColumn.actionsColumn;
const isGrid = this.gridType === 'grid';
return <td
role={isGrid ? 'gridcell' : 'cell'}
id={`cell-${rowIndex}-${cellIndex}`}
class={{'cell': true, 'editing': this.isEditing && isActiveCell }}
aria-label={this.useApplicationRole ? `${cellColumn.name} ${content}` : null}
aria-readonly={!this.editable || cellColumn.actionsColumn ? 'true' : null}
tabIndex={isGrid && this.rowSelection !== RowSelectionPattern.Aria ? isActiveCell ? 0 : -1 : null}
ref={isActiveCell && !this.isEditing && this.rowSelection !== RowSelectionPattern.Aria ? (el) => { this.focusRef = el; } : null}
onFocus={() => { this.onCellFocus(rowIndex, cellIndex)}}
onClick={this.editable ? () => { this.onCellClick(rowIndex, cellIndex); } : null}
onDblClick={this.editable ? this.onCellDoubleClick.bind(this) : null}
onMouseDown={() => { this.mouseDown = true; }}
>
{this.isEditing && isActiveCell
? <input value={content} class="cell-edit" onKeyDown={this.onInputKeyDown.bind(this)} onBlur={this.onInputBlur.bind(this)} ref={(el) => this.focusRef = el} />
: <span class="cell-content">{this.renderCellContent(content, cellIndex, rowIndex)}</span>
}