nadbm / react-datasheet

Excel-like data grid (table) component for React
https://nadbm.github.io/react-datasheet/
MIT License
5.4k stars 455 forks source link

[issue] cellRenderer using default Cell component not working #267

Open davidsx opened 3 years ago

davidsx commented 3 years ago

Hi. I am trying to add some extra class to the td which I use the Cell component and expend the className prop.

However, I cannot resolve the original behaviour on the following simple code:

cellRenderer={(props) => <Cell {...props} />}

A significant mis-behaviour is that the arrow key navigation failure.

After reading along the code, I figure out a possible reason: In DataCell there is a onKeyUp prop passed to cellRenderer but there are not used in Cell

DataCell.js

    return (
      <CellRenderer
        row={row}
        col={col}
        cell={cell}
        selected={selected}
        editing={editing}
        updated={updated}
        attributesRenderer={attributesRenderer}
        className={className}
        style={widthStyle(cell)}
        onMouseDown={this.handleMouseDown}
        onMouseOver={this.handleMouseOver}
        onDoubleClick={this.handleDoubleClick}
        onContextMenu={this.handleContextMenu}
        onKeyUp={onKeyUp}
      >
        {content}
      </CellRenderer>
    );

Cell.js (missing onKeyUp)

    return (
      <td
        className={className}
        onMouseDown={onMouseDown}
        onMouseOver={onMouseOver}
        onDoubleClick={onDoubleClick}
        onTouchEnd={onDoubleClick}
        onContextMenu={onContextMenu}
        colSpan={colSpan}
        rowSpan={rowSpan}
        style={style}
        {...attributes}
      >
        {this.props.children}
      </td>
    );