Fork me on GitHub

angular Cell Cursor DEMO

https://github.com/team-lab/cell-cursor
https://www.npmjs.com/package/angular-cell-cursor

Simple excel like spreadsheet development kit for angualrJs.

  • display table cell cursor like Excel.
    • user can move cursor by mouse or keyboad. ( ARROW )
  • range selection like Excel.(mouse drag or shift+ARROW , ESC to deselect)
  • user can copy range values to Excel. (ctrl+C)
  • user can paste range values from Excel. (ctrl+V)
  • user can edit cell value.(ENTER,F2, or direct input for example a)
  • user can drag to resize column or row.
  • Easy to extend.

Using angular.js power

  • repeat `tr` is `ng-repeat` and filters
  • DELETE button(it remove item from array)
  • header click and sort(`orderBy` and `ng-show` ▲▼)
filter: orderBy:
limitTo: ～ / {{(userList|filter:query).length}} items
dirty slider impl.
  

Using cell-cursor features

  • column width(and row height) resize by drag (`cell-cursor-drag` directive)
  • Sort by drag ＝ (`cell-cursor-row-resize` and `cell-cursor-row-resize` directive)
  • cursor and range controll
  • cell editor


name ▲ ▼
email ▲ ▼
age ▲ ▼
admin
{{i}}
＝ {{user.id}}
{{user.name}}
{{user.email}}
 {{user.name.charAt(i)}}

VALUES from cellCursor object

hasFocus={{cc.hasFocus}}

selected={{cc.selected}}

getSelectedCellValues()={{cc.getSelectedCellValues()}}

users={{exportSelected()}}

THIS DEMO's CODE