Missing micro-interactions in table

• Keyboard shortcuts (using <Hotkey>)
  • Copy cmd+c
  • Paste cmd+v (can’t do because table is data agnostic, we don’t know what data you’re putting in there)
  • Move selection up/right/bottom/left
  • Select the cell immediately to the right tab
  • Select the cell immediately below return
  • Select the cell immediately to the left shift+tab
  • Select the cell immediately above shift+return
  • Type any character to edit

• Right-click menu
  • When the right-click menu is open, we should block scrolling
  • Right-click menu should be dismissed when clicking outside of it
  • Right-clicking on a selection shouldn’t change the selection
  • Right-clicking on a cell should select said cell
  • Right-clicking on a column should select said column
  • Right-clicking on a row should select said row

• Editable (header) cells
  • Clicking outside of an cell being edited should disable editing
  • Ability to click on the edited text to place cursor and make a text selection with the mouse
  • Make editable cells and editable header cells consistent

• Selection
  • Clicking on “…” in cell shouldn’t select the cell, similarly to other “…” (header for instance)
  • Column headers and row headers should reflect the current selection
  • Clicking on a selected cell shouldn’t deselect it. Cmd+clicking on a cell should deselect it. (#1073)
  • Range select rows/columns shift+click
  • Add rows/columns/cells to selection cmd+click
  • Add to selection rectangle cmd/shift+up/cmd/shift+right/cmd/shift+bottom/cmd/shift+left
  • Clicking on a cell and dragging out of the table should widen selecting the active selection region

[samdenicola]

@llorca These look great – can’t wait!

Any thoughts on adding onCellDoubleClick/onRowDoubleClick callbacks? I’m trying to build a “library”-esque table component where rows are a single item in one’s inventory with different columns being attributes of the item. Users should be able to double click to “open” up an item. My solution so far feels a bit hacky – and is ugly without one of the above proposed fixes: “Clicking on a selected cell shouldn’t deselect it. Cmd+clicking on a cell should deselect it.”

<Cell>
  <div
    className={'clickable-cell'}
    onDoubleClick={() => {
      console.log("row " + rowIndex + " has been double clicked!");
    }}
  >
    {cellText}
  </div>
</Cell>

It also forces me to write some css so that the clickable div fills the whole cell instead of just the cell text (Ideally I’d be able to hook in at a higher level like the Table component and have an “onRowDoubleClick”.

Thanks for the great component 😃

[cmslewis]

Just checked off a bunch of these