More powerful table / spreadsheet feature

[joepio]

Tables are the ultimate poweruser tool. They show a lot of information, and are great for editing and organizing stuff. There's a reason why tools like excel, notion and airtable are so popular.

Considerations

• Peformance. The current approach does not scale well to large tables. It creates dom nodes for every single cell. This could be fixed by using react-virtualized or using some other fancy lazy rendering library
• Selecting / copy / paste. Being able to select a bunch of fields, rows or columns, copy the data, and paste it somewhere else. Ideally also make sure it pastes from / into other spreadsheet apps.
• Adjusting the class. Or modelling from the collection view. This fits really well into how most people use excel / sheets / airtable.
• Keyboard support. Navigation with arrow keys, get into edit mode with enter, esc to exit, etc.

Inspiration and options

• Glide Data Grid. Impressive performance.
• https://nadbm.github.io/react-datasheet/. Not great performance.
• https://handsontable.com/docs/8.3.1/demo-scrolling.html
• Zinggrid: https://www.zinggrid.com/demos/website-visitors

User stories

• Airtable reddit 1, 2

ToDo / deliverables

• New table view
  • Virtualized & paginated
  • Resizable (state should probably be stored server-side, is possible)
  • Sort (using Collections)
  • Filter (using Collections)
  • (optional) multiple views possible? Save view server-side
  • Refactor existing tables, try making them re-use the same things (= get rid of existing collection view and folder list view, probably)
  • Manual re-order (probably store a float datatype property on every resource)
  • Context menu per row (open in normal view, history, edit, etc.), could be in dialog
• Keyboard support
  • Move up / down / left / right
  • Use enter to go into edit mode, escape to exit
  • (optional) Search inside table using /
• Improved data model editing
  • Create new property by pressing plus icon in header row atomicdata-dev/atomic-data-browser#276
  • Improved modal / overlay form for properties
  • Improved enum support (colors / shortnames / icons?)
  • Edit property with context menu
• Copy/paste support
  • From HTML (e.g. excel)
  • To HTML (tab + newline delineated, escape markdown / strings)
• Atomic-Server changes Table feature #538
  • Table Model
  • Hierarchical type constraints ?
  • URL constraints ?
• Atomic-Data-Docs changes
  • Update docs, add and describe tables model
• Create reddit post

Current bugs

• Needs refresh after property edit
• No keyboard-only adding of 'select' instances, needs mouse
• Multi select keyboard behavior weird: shift+arrow expands selection, but after going back to regular arrow keys the initial focus is used instead of the expanded focus.
• Drag mouse support for selection (if not too hard)
• Pressing enter in the dialog fields does not submit the form (e.g. when creating new property) #816
• Name field should probably always be enabled in new tables. Description maybe too.
• Can't click on 'select' items (only keyboard). Make sure this is tested.
• Selecting second item with keyboard not working
• Tab navigation with keyboard wrong when hovering over select field, should skip on one tab, currently always enters 'edit' mode