:construction: Start migrating table view as a custom element

--- spec/table-view-spec.coffee
+++ spec/table-view-spec.coffee
@@ -3,7 +3,7 @@
 path = require 'path'

 Table = require '../lib/table'
-TableView = require '../lib/table-view'
+tableElement = require '../lib/table-view'
 Column = require '../lib/column'
 Row = require '../lib/row'
 Cell = require '../lib/cell'
@@ -24,8 +24,8 @@
 mockConfirm = (response) -> spyOn(atom, 'confirm').andCallFake -> response

-describe 'TableView', ->
-  [tableView, table, nextAnimationFrame, noAnimationFrame, requestAnimationFrameSafe, styleNode, row, cells, jasmineContent] = []
+describe 'tableElement', ->
+  [tableElement, table, nextAnimationFrame, noAnimationFrame, requestAnimationFrameSafe, styleNode, row, cells, jasmineContent] = []

   beforeEach ->
     jasmineContent = document.body.querySelector('#jasmine-content')
@@ -60,9 +60,10 @@
     atom.config.set 'table-edit.rowOverdraw', 10
     atom.config.set 'table-edit.minimumRowHeight', 10

-    tableView = new TableView(table)
-
-    styleNode = $("<style>
+    tableElement = atom.views.getView(table)
+
+    styleNode = document.createElement('style')
+    styleNode.textContent = "
       #{stylesheet}

       .table-edit {
@@ -82,18 +83,17 @@
         border: none;
         padding: 0;
       }
-    </style>")
+    "

     firstChild = jasmineContent.firstChild

-    jasmineContent.insertBefore(styleNode[0], firstChild)
-    jasmineContent.insertBefore(tableView[0], firstChild)
-
-    tableView.onAttach()
+    jasmineContent.insertBefore(styleNode, firstChild)
+    jasmineContent.insertBefore(tableElement, firstChild)
+
     nextAnimationFrame()

   it 'holds a table', ->
-    expect(tableView.table).toEqual(table)
+    expect(tableElement.table).toEqual(table)

   #     ######   #######  ##    ## ######## ######## ##    ## ########
   #    ##    ## ##     ## ###   ##    ##    ##       ###   ##    ##
@@ -104,26 +104,26 @@
   #     ######   #######  ##    ##    ##    ######## ##    ##    ##

   it 'has a scroll-view', ->
-    expect(tableView.find('.scroll-view').length).toEqual(1)
+    expect(tableElement.find('.scroll-view').length).toEqual(1)

   describe 'when not scrolled yet', ->
     it 'renders the lines at the top of the table', ->
-      rows = tableView.find('.table-edit-row')
+      rows = tableElement.find('.table-edit-row')
       expect(rows.length).toEqual(18)
       expect(rows.first().data('row-id')).toEqual(1)
       expect(rows.last().data('row-id')).toEqual(18)

     describe '::getFirstVisibleRow', ->
       it 'returns 0', ->
-        expect(tableView.getFirstVisibleRow()).toEqual(0)
+        expect(tableElement.getFirstVisibleRow()).toEqual(0)

     describe '::getLastVisibleRow', ->
       it 'returns 8', ->
-        expect(tableView.getLastVisibleRow()).toEqual(8)
+        expect(tableElement.getLastVisibleRow()).toEqual(8)

   describe 'once rendered', ->
     beforeEach ->
-      row = tableView.find('.table-edit-row').first()
+      row = tableElement.find('.table-edit-row').first()
       cells = row.find('.table-edit-cell')

     it 'has as many columns as the model row', ->
@@ -132,35 +132,35 @@
     it 'renders undefined cells based on a config', ->
       atom.config.set('table-edit.undefinedDisplay', 'foo')

-      tableView.getActiveCell().setValue(undefined)
+      tableElement.getActiveCell().setValue(undefined)
       nextAnimationFrame()
       expect(cells.first().text()).toEqual('foo')

     it 'renders undefined cells based on the view property', ->
-      tableView.undefinedDisplay = 'bar'
+      tableElement.undefinedDisplay = 'bar'
       atom.config.set('table-edit.undefinedDisplay', 'foo')

-      tableView.getActiveCell().setValue(undefined)
+      tableElement.getActiveCell().setValue(undefined)
       nextAnimationFrame()
       expect(cells.first().text()).toEqual('bar')

     it 'sets the proper height on the table body content', ->
-      bodyContent = tableView.find('.table-edit-content')
+      bodyContent = tableElement.find('.table-edit-content')

       expect(bodyContent.outerHeight()).toBeCloseTo(2000)

     it 'sets the proper width and height on the table rows container', ->
-      bodyContent = tableView.find('.table-edit-rows')
+      bodyContent = tableElement.find('.table-edit-rows')

       expect(bodyContent.outerHeight()).toBeCloseTo(2000)
-      expect(bodyContent.outerWidth()).toBeCloseTo(tableView.width(), -1)
+      expect(bodyContent.outerWidth()).toBeCloseTo(tableElement.width(), -1)

     describe 'with the absolute widths setting enabled', ->
       beforeEach ->
-        tableView.setAbsoluteColumnsWidths(true)
+        tableElement.setAbsoluteColumnsWidths(true)
         nextAnimationFrame()

-        row = tableView.find('.table-edit-row').first()
+        row = tableElement.find('.table-edit-row').first()
         cells = row.find('.table-edit-cell')

       describe 'without any columns layout data', ->
@@ -170,7 +170,7 @@

       describe 'with a columns layout defined', ->
         beforeEach ->
-          tableView.setColumnsWidths([100, 200, 300])
+          tableElement.setColumnsWidths([100, 200, 300])
           nextAnimationFrame()

         it 'modifies the columns width', ->
@@ -179,7 +179,7 @@
           expect(cells.eq(2).width()).toEqual(300)

         it 'sets the proper width and height on the table rows container', ->
-          bodyContent = tableView.find('.table-edit-rows-wrapper')
+          bodyContent = tableElement.find('.table-edit-rows-wrapper')

           expect(bodyContent.outerHeight()).toBeCloseTo(2000)
           expect(bodyContent.outerWidth()).toBeCloseTo(600, -1)
@@ -190,75 +190,75 @@
             expect(@clientWidth).toBeCloseTo(widths[i], -1)

         it 'sets the proper widths on the header cells', ->
-          cells = tableView.find('.table-edit-header-cell')
+          cells = tableElement.find('.table-edit-header-cell')
           widths = [100,200,300]
           cells.each (i) ->
             expect(@clientWidth).toBeCloseTo(widths[i], -1)

         describe 'when the content is scroll horizontally', ->
           beforeEach ->
-            tableView.getRowsContainer().scrollLeft(100)
-            mousewheel(tableView.getRowsContainer())
+            tableElement.getRowsContainer().scrollLeft(100)
+            mousewheel(tableElement.getRowsContainer())
             nextAnimationFrame()

           it 'scrolls the header by the same amount', ->
-            expect(tableView.getColumnsContainer().scrollLeft()).toEqual(100)
+            expect(tableElement.getColumnsContainer().scrollLeft()).toEqual(100)

     describe 'with the absolute widths setting disabled', ->
       beforeEach ->
-        tableView.setAbsoluteColumnsWidths(false)
+        tableElement.setAbsoluteColumnsWidths(false)
         nextAnimationFrame()

       describe 'without any columns layout data', ->
         it 'has cells that all have the same width', ->
           cells.each ->
-            expect(@clientWidth).toBeCloseTo(tableView.width() / 3, -2)
+            expect(@clientWidth).toBeCloseTo(tableElement.width() / 3, -2)

       describe 'with a columns layout defined', ->
         describe 'with an array with enough values', ->
           it 'modifies the columns widths', ->
-            tableView.setColumnsWidths([0.2, 0.3, 0.5])
+            tableElement.setColumnsWidths([0.2, 0.3, 0.5])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.2, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.3, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.5, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.2, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.3, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.5, -2)

         describe 'with an array with sparse values', ->
           it 'computes the other columns width', ->
-            tableView.setColumnsWidths([0.2, null, 0.5])
+            tableElement.setColumnsWidths([0.2, null, 0.5])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.2, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.3, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.5, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.2, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.3, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.5, -2)

         describe 'with an array with more than one missing value', ->
           it 'divides the rest width between the missing columns', ->
-            tableView.setColumnsWidths([0.2])
+            tableElement.setColumnsWidths([0.2])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.2, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.4, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.4, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.2, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.4, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.4, -2)

         describe 'with an array whose sum is greater than 1', ->
           it 'divides the rest width between the missing columns', ->
-            tableView.setColumnsWidths([0.5, 0.5, 1])
+            tableElement.setColumnsWidths([0.5, 0.5, 1])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.25, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.25, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.5, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.25, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.25, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.5, -2)

         describe 'with a sparse array whose sum is greater or equal than 1', ->
           it 'divides the rest width between the missing columns', ->
-            tableView.setColumnsWidths([0.5, 0.5])
+            tableElement.setColumnsWidths([0.5, 0.5])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.25, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.25, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.5, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.25, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.25, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.5, -2)

         describe "by setting the width on model's columns", ->
           it 'uses the columns data', ->
@@ -267,21 +267,21 @@

             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.2, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.3, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.5, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.2, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.3, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.5, -2)

         describe "from both the model's columns and in the view", ->
           it 'uses the view data and fallback to the columns data if available', ->
             table.getColumn(0).width = 0.2
             table.getColumn(1).width = 0.3

-            tableView.setColumnsWidths([0.8])
+            tableElement.setColumnsWidths([0.8])
             nextAnimationFrame()

-            expect(cells.first().width()).toBeCloseTo(tableView.width() * 0.8, -2)
-            expect(cells.eq(1).width()).toBeCloseTo(tableView.width() * 0.1, -2)
-            expect(cells.last().width()).toBeCloseTo(tableView.width() * 0.1, -2)
+            expect(cells.first().width()).toBeCloseTo(tableElement.width() * 0.8, -2)
+            expect(cells.eq(1).width()).toBeCloseTo(tableElement.width() * 0.1, -2)
+            expect(cells.last().width()).toBeCloseTo(tableElement.width() * 0.1, -2)

       describe 'with alignements defined in the columns models', ->
         it 'sets the cells text-alignement using the model data', ->
@@ -296,7 +296,7 @@

       describe 'with alignements defined in the view', ->
         it 'sets the cells text-alignement with the view data', ->
-          tableView.setColumnsAligns(['right', 'center'])
+          tableElement.setColumnsAligns(['right', 'center'])
           nextAnimationFrame()

           expect(cells.first().css('text-align')).toEqual('right')
@@ -309,7 +309,7 @@
           table.getColumn(1).align = 'right'
           table.getColumn(2).align = 'center'

-          tableView.setColumnsAligns(['right', 'center'])
+          tableElement.setColumnsAligns(['right', 'center'])
           nextAnimationFrame()

           expect(cells.first().css('text-align')).toEqual('right')
@@ -322,45 +322,45 @@

         nextAnimationFrame()

-        expect(tableView.find('.table-edit-row:first-child .table-edit-cell:last-child').text()).toEqual('foo: yes')
+        expect(tableElement.find('.table-edit-row:first-child .table-edit-cell:last-child').text()).toEqual('foo: yes')

   describe 'when scrolled by 100px', ->
     beforeEach ->
-      tableView.scrollTop(100)
+      tableElement.scrollTop(100)
       nextAnimationFrame()

     describe '::getFirstVisibleRow', ->
       it 'returns 5', ->
-        expect(tableView.getFirstVisibleRow()).toEqual(5)
+        expect(tableElement.getFirstVisibleRow()).toEqual(5)

     describe '::getLastVisibleRow', ->
       it 'returns 13', ->
-        expect(tableView.getLastVisibleRow()).toEqual(13)
+        expect(tableElement.getLastVisibleRow()).toEqual(13)

     it 'translates the content by the amount of scroll', ->
-      expect(tableView.find('.scroll-view').scrollTop()).toEqual(100)
+      expect(tableElement.find('.scroll-view').scrollTop()).toEqual(100)

     it 'does not render new rows', ->
-      rows = tableView.find('.table-edit-row')
+      rows = tableElement.find('.table-edit-row')
       expect(rows.length).toEqual(18)
       expect(rows.first().data('row-id')).toEqual(1)
       expect(rows.last().data('row-id')).toEqual(18)

   describe 'when scrolled by 300px', ->
     beforeEach ->
-      tableView.scrollTop(300)
+      tableElement.scrollTop(300)
       nextAnimationFrame()

     describe '::getFirstVisibleRow', ->
       it 'returns 15', ->
-        expect(tableView.getFirstVisibleRow()).toEqual(15)
+        expect(tableElement.getFirstVisibleRow()).toEqual(15)

     describe '::getLastVisibleRow', ->
       it 'returns 23', ->
-        expect(tableView.getLastVisibleRow()).toEqual(23)
+        expect(tableElement.getLastVisibleRow()).toEqual(23)

     it 'renders new rows', ->
-      rows = tableView.find('.table-edit-row')
+      rows = tableElement.find('.table-edit-row')
       expect(rows.length).toEqual(28)
       expect(rows.first().data('row-id')).toEqual(6)
       expect(rows.last().data('row-id')).toEqual(33)
@@ -370,27 +370,27 @@
       it 'adjusts the columns widths', ->
         table.addColumn('bar')

-        compareCloseArrays(tableView.getColumnsWidths(), [0.25, 0.25, 0.25, 0.25])
+        compareCloseArrays(tableElement.getColumnsWidths(), [0.25, 0.25, 0.25, 0.25])

       describe 'when columns have already a width', ->
         it 'adjusts the columns widths and keeps the proportions of initial columns', ->
-          tableView.setColumnsWidths([0.1, 0.1, 0.8])
+          tableElement.setColumnsWidths([0.1, 0.1, 0.8])
           table.addColumn('bar')

-          compareCloseArrays(tableView.getColumnsWidths(), [0.08, 0.08, 0.64, 0.2])
+          compareCloseArrays(tableElement.getColumnsWidths(), [0.08, 0.08, 0.64, 0.2])

     describe 'by removing a column', ->
       it 'adjusts the columns widths', ->
         table.removeColumnAt(2)

-        compareCloseArrays(tableView.getColumnsWidths(), [0.5, 0.5])
+        compareCloseArrays(tableElement.getColumnsWidths(), [0.5, 0.5])

     describe 'when columns have already a width', ->
       it 'adjusts the columns widths and keeps the proportions of initial columns', ->
-        tableView.setColumnsWidths([0.1, 0.1, 0.8])
+        tableElement.setColumnsWidths([0.1, 0.1, 0.8])
         table.removeColumnAt(2)

-        compareCloseArrays(tableView.getColumnsWidths(), [0.5, 0.5])
+        compareCloseArrays(tableElement.getColumnsWidths(), [0.5, 0.5])

   describe 'when the table rows are modified', ->
     describe 'by adding one at the end', ->
@@ -399,21 +399,21 @@

         nextAnimationFrame()

-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.length).toEqual(18)
         expect(rows.first().data('row-id')).toEqual(1)
         expect(rows.last().data('row-id')).toEqual(18)

     describe 'by adding one at the begining', ->
       it 'updates the rows', ->
-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.first().find('.table-edit-cell').first().text()).toEqual('row0')

         table.addRowAt 0, ['foo', 'bar', 'baz']

         nextAnimationFrame()

-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.length).toEqual(18)
         expect(rows.first().data('row-id')).toEqual(1)
         expect(rows.first().find('.table-edit-cell').first().text()).toEqual('foo')
@@ -421,14 +421,14 @@

     describe 'by adding one in the middle', ->
       it 'updates the rows', ->
-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.eq(6).find('.table-edit-cell').first().text()).toEqual('row6')

         table.addRowAt 6, ['foo', 'bar', 'baz']

         nextAnimationFrame()

-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.length).toEqual(18)
         expect(rows.first().data('row-id')).toEqual(1)
         expect(rows.eq(6).find('.table-edit-cell').first().text()).toEqual('foo')
@@ -436,56 +436,56 @@

     describe 'by updating the content of a row', ->
       it 'update the rows', ->
-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.eq(6).find('.table-edit-cell').first().text()).toEqual('row6')

         table.getRow(6).key = 'foo'

         nextAnimationFrame()

-        rows = tableView.find('.table-edit-row')
+        rows = tableElement.find('.table-edit-row')
         expect(rows.eq(6).find('.table-edit-cell').first().text()).toEqual('foo')

   describe 'setting a custom height for a row', ->
     beforeEach ->
-      tableView.setRowHeightAt(2, 100)
+      tableElement.setRowHeightAt(2, 100)
       nextAnimationFrame()

     it 'sets the proper height on the table body content', ->
-      bodyContent = tableView.find('.table-edit-content')
+      bodyContent = tableElement.find('.table-edit-content')

       expect(bodyContent.outerHeight()).toBeCloseTo(2080)

     it "renders the row's cells with the provided height", ->
-      cells = tableView.find('.table-edit-row:nth-child(3) .table-edit-cell')
+      cells = tableElement.find('.table-edit-row:nth-child(3) .table-edit-cell')

       expect(cells.first().outerHeight()).toEqual(100)

     it 'offsets the cells after the modified one', ->
-      row = tableView.find('.table-edit-row:nth-child(4)')
+      row = tableElement.find('.table-edit-row:nth-child(4)')

       expect(row.css('top')).toEqual('140px')

     it 'activates the cell under the mouse when pressed', ->
-      cell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(2)')
+      cell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(2)')
       mousedown(cell)

-      expect(tableView.getActiveCell().getValue()).toEqual(300)
+      expect(tableElement.getActiveCell().getValue()).toEqual(300)

     it 'gives the size of the cell to the editor when starting an edit', ->
-      tableView.activateCellAtPosition(row: 2, column: 0)
+      tableElement.activateCellAtPosition(row: 2, column: 0)
       nextAnimationFrame()
-      tableView.startCellEdit()
-
-      expect(tableView.find('atom-text-editor').outerHeight()).toEqual(100)
+      tableElement.startCellEdit()
+
+      expect(tableElement.find('atom-text-editor').outerHeight()).toEqual(100)

     it 'uses the offset to position the editor', ->
-      tableView.activateCellAtPosition(row: 3, column: 0)
+      tableElement.activateCellAtPosition(row: 3, column: 0)
       nextAnimationFrame()
-      tableView.startCellEdit()
-
-      expect(tableView.find('atom-text-editor').offset().top)
-      .toBeCloseTo(tableView.find('.table-edit-cell.active').offset().top, -2)
+      tableElement.startCellEdit()
+
+      expect(tableElement.find('atom-text-editor').offset().top)
+      .toBeCloseTo(tableElement.find('.table-edit-cell.active').offset().top, -2)

     describe 'by changing the option on the row itself', ->
       beforeEach ->
@@ -493,41 +493,41 @@
         nextAnimationFrame()

       it 'sets the proper height on the table body content', ->
-        bodyContent = tableView.find('.table-edit-content')
+        bodyContent = tableElement.find('.table-edit-content')

         expect(bodyContent.outerHeight()).toBeCloseTo(2030)

       it "renders the row's cells with the provided height", ->
-        cells = tableView.find('.table-edit-row:nth-child(3) .table-edit-cell')
+        cells = tableElement.find('.table-edit-row:nth-child(3) .table-edit-cell')

         expect(cells.first().outerHeight()).toEqual(50)

       it 'offsets the cells after the modified one', ->
-        row = tableView.find('.table-edit-row:nth-child(4)')
+        row = tableElement.find('.table-edit-row:nth-child(4)')

         expect(row.css('top')).toEqual('90px')

     describe 'when scrolled by 300px', ->
       beforeEach ->
-        tableView.scrollTop(300)
+        tableElement.scrollTop(300)
         nextAnimationFrame()

       it 'activates the cell under the mouse when pressed', ->
-        cell = tableView.find('.table-edit-row[data-row-id=15] .table-edit-cell:nth-child(2)')
+        cell = tableElement.find('.table-edit-row[data-row-id=15] .table-edit-cell:nth-child(2)')
         mousedown(cell)

-        expect(tableView.getActiveCell().getValue()).toEqual(1400)
+        expect(tableElement.getActiveCell().getValue()).toEqual(1400)

     describe 'when scrolled all way down to the bottom edge', ->
       beforeEach ->
-        tableView.scrollTop(2000)
+        tableElement.scrollTop(2000)
         nextAnimationFrame()

       it 'activates the cell under the mouse when pressed', ->
-        cell = tableView.find('.table-edit-row:last-child .table-edit-cell:nth-child(2)')
+        cell = tableElement.find('.table-edit-row:last-child .table-edit-cell:nth-child(2)')
         mousedown(cell)

-        expect(tableView.getActiveCell().getValue()).toEqual(9900)
+        expect(tableElement.getActiveCell().getValue()).toEqual(9900)

   #    ##     ## ########    ###    ########  ######## ########
   #    ##     ## ##         ## ##   ##     ## ##       ##     ##
@@ -538,33 +538,33 @@
   #    ##     ## ######## ##     ## ########  ######## ##     ##

   it 'has a header', ->
-    expect(tableView.find('.table-edit-header').length).toEqual(1)
+    expect(tableElement.find('.table-edit-header').length).toEqual(1)

   describe 'header', ->
     header = null

     beforeEach ->
-      header = tableView.head
+      header = tableElement.head

     it 'has as many cells as there is columns in the table', ->
-      cells = tableView.find('.table-edit-header-cell')
+      cells = tableElement.find('.table-edit-header-cell')
       expect(cells.length).toEqual(3)
       expect(cells.first().text()).toEqual('key')
       expect(cells.eq(1).text()).toEqual('value')
       expect(cells.last().text()).toEqual('foo')

     it 'has cells that contains a resize handle', ->
-      expect(tableView.find('.column-resize-handle').length).toEqual(tableView.find('.table-edit-header-cell').length)
+      expect(tableElement.find('.column-resize-handle').length).toEqual(tableElement.find('.table-edit-header-cell').length)

     it 'has cells that contains an edit button', ->
-      expect(tableView.find('.column-edit-action').length).toEqual(tableView.find('.table-edit-header-cell').length)
+      expect(tableElement.find('.column-edit-action').length).toEqual(tableElement.find('.table-edit-header-cell').length)

     it 'has cells that have the same width as the body cells', ->
-      tableView.setColumnsWidths([0.2, 0.3, 0.5])
+      tableElement.setColumnsWidths([0.2, 0.3, 0.5])
       nextAnimationFrame()

-      cells = tableView.find('.table-edit-header-cell')
-      rowCells = tableView.find('.table-edit-row:first-child .table-edit-cell')
+      cells = tableElement.find('.table-edit-header-cell')
+      rowCells = tableElement.find('.table-edit-row:first-child .table-edit-cell')

       expect(cells.first().width()).toBeCloseTo(rowCells.first().width(), -2)
       expect(cells.eq(1).width()).toBeCloseTo(rowCells.eq(1).width(), -2)
@@ -572,7 +572,7 @@

     describe 'when the gutter is enabled', ->
       beforeEach ->
-        tableView.showGutter()
+        tableElement.showGutter()
         nextAnimationFrame()

       it 'contains a filler div to figurate the gutter width', ->
@@ -582,20 +582,20 @@
       [column] = []

       beforeEach ->
-        column = tableView.find('.table-edit-header-cell:last-child')
+        column = tableElement.find('.table-edit-header-cell:last-child')
         mousedown(column)

       it 'changes the sort order to use the clicked column', ->
-        expect(tableView.order).toEqual('foo')
-        expect(tableView.direction).toEqual(1)
+        expect(tableElement.order).toEqual('foo')
+        expect(tableElement.direction).toEqual(1)

       describe 'a second time', ->
         beforeEach ->
           mousedown(column)

         it 'toggles the sort direction', ->
-          expect(tableView.order).toEqual('foo')
-          expect(tableView.direction).toEqual(-1)
+          expect(tableElement.order).toEqual('foo')
+          expect(tableElement.direction).toEqual(-1)

       describe 'a third time', ->
         beforeEach ->
@@ -603,35 +603,35 @@
           mousedown(column)

         it 'removes the sorting order', ->
-          expect(tableView.order).toBeNull()
+          expect(tableElement.order).toBeNull()

       describe 'when the absoluteColumnsWidths setting is enabled', ->
         beforeEach ->
-          tableView.setAbsoluteColumnsWidths(true)
-          tableView.setColumnsWidths([100, 200, 300])
+          tableElement.setAbsoluteColumnsWidths(true)
+          tableElement.setColumnsWidths([100, 200, 300])
           nextAnimationFrame()

-          column = tableView.find('.table-edit-header-cell:nth-child(2)')
+          column = tableElement.find('.table-edit-header-cell:nth-child(2)')
           mousedown(column)

         it 'changes the sort order to use the clicked column', ->
-          expect(tableView.order).toEqual('value')
-          expect(tableView.direction).toEqual(1)
+          expect(tableElement.order).toEqual('value')
+          expect(tableElement.direction).toEqual(1)

       describe 'when the columns size have been changed', ->
         beforeEach ->
-          tableView.setColumnsWidths([0.1, 0.1, 0.8])
+          tableElement.setColumnsWidths([0.1, 0.1, 0.8])
           nextAnimationFrame()
-          column = tableView.find('.table-edit-header-cell:first-child')
+          column = tableElement.find('.table-edit-header-cell:first-child')
           mousedown(column)

         it 'changes the sort order to use the clicked column', ->
-          expect(tableView.order).toEqual('key')
-          expect(tableView.direction).toEqual(1)
+          expect(tableElement.order).toEqual('key')
+          expect(tableElement.direction).toEqual(1)

     describe 'dragging a resize handle', ->
       it 'resizes the columns', ->
-        initialColumnWidths = tableView.getColumnsScreenWidths()
+        initialColumnWidths = tableElement.getColumnsScreenWidths()

         handle = header.find('.column-resize-handle').eq(1)
         {x, y} = objectCenterCoordinates(handle)
@@ -639,14 +639,14 @@
         mousedown(handle)
         mouseup(handle, x + 50, y)

-        newColumnWidths = tableView.getColumnsScreenWidths()
+        newColumnWidths = tableElement.getColumnsScreenWidths()

         expect(newColumnWidths[0]).toBeCloseTo(initialColumnWidths[0])
         expect(newColumnWidths[1]).toBeCloseTo(initialColumnWidths[1] + 50)
         expect(newColumnWidths[2]).toBeCloseTo(initialColumnWidths[2] - 50)

       it 'displays a ruler when starting the drag', ->
-        ruler = tableView.find('.column-resize-ruler')
+        ruler = tableElement.find('.column-resize-ruler')

         expect(ruler.length).toEqual(1)
         expect(ruler.is(':visible')).toBeFalsy()
@@ -658,10 +658,10 @@

         expect(ruler.is(':visible')).toBeTruthy()
         expect(ruler.css('left')).toEqual(x + 'px')
-        expect(ruler.height()).toEqual(tableView.height())
+        expect(ruler.height()).toEqual(tableElement.height())

       it 'moves the ruler during drag', ->
-        ruler = tableView.find('.column-resize-ruler')
+        ruler = tableElement.find('.column-resize-ruler')
         handle = header.find('.column-resize-handle').eq(1)
         {x,y} = objectCenterCoordinates(handle)

@@ -671,7 +671,7 @@
         expect(ruler.css('left')).toEqual((x + 50) + 'px')

       it 'moves the ruler during drag', ->
-        ruler = tableView.find('.column-resize-ruler')
+        ruler = tableElement.find('.column-resize-ruler')
         handle = header.find('.column-resize-handle').eq(1)

         mousedown(handle)
@@ -681,11 +681,11 @@

       describe 'with absolute columns widths layout', ->
         beforeEach ->
-          tableView.absoluteColumnsWidths = true
-          tableView.setColumnsWidths([100,100,100])
+          tableElement.absoluteColumnsWidths = true
+          tableElement.setColumnsWidths([100,100,100])

         it 'resizes the columns', ->
-          initialColumnWidths = tableView.getColumnsScreenWidths()
+          initialColumnWidths = tableElement.getColumnsScreenWidths()

           handle = header.find('.column-resize-handle').eq(1)
           {x, y} = objectCenterCoordinates(handle)
@@ -693,7 +693,7 @@
           mousedown(handle)
           mouseup(handle, x + 50, y)

-          newColumnWidths = tableView.getColumnsScreenWidths()
+          newColumnWidths = tableElement.getColumnsScreenWidths()

           expect(newColumnWidths[0]).toBeCloseTo(initialColumnWidths[0])
           expect(newColumnWidths[1]).toBeCloseTo(initialColumnWidths[1] + 50)
@@ -709,7 +709,7 @@

         action.trigger('click')

-        editor = tableView.find('atom-text-editor').view()
+        editor = tableElement.find('atom-text-editor').view()

       it 'starts the edition of the column name', ->
         editorOffset = editor.offset()
@@ -732,7 +732,7 @@
       describe 'core:cancel', ->
         it 'closes the editor', ->
           atom.commands.dispatch(editor.element, 'core:cancel')
-          expect(tableView.isEditing()).toBeFalsy()
+          expect(tableElement.isEditing()).toBeFalsy()

       describe 'core:confirm', ->
         beforeEach ->
@@ -740,35 +740,35 @@
           atom.commands.dispatch(editor.element, 'core:confirm')

         it 'closes the editor', ->
-          expect(tableView.find('atom-text-editor:visible').length).toEqual(0)
+          expect(tableElement.find('atom-text-editor:visible').length).toEqual(0)

         it 'gives the focus back to the table view', ->
-          expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+          expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

         it 'changes the cell value', ->
-          expect(tableView.table.getColumn(0).name).toEqual('foobar')
+          expect(tableElement.table.getColumn(0).name).toEqual('foobar')

       describe 'table-edit:move-right', ->
         it 'confirms the current edit and moves the active cursor to the right', ->
-          previousActiveCell = tableView.getActiveCell()
-          spyOn(tableView, 'moveRight')
+          previousActiveCell = tableElement.getActiveCell()
+          spyOn(tableElement, 'moveRight')
           editor.setText('Foo Bar')
           atom.commands.dispatch(editor.element, 'table-edit:move-right')

-          expect(tableView.isEditing()).toBeFalsy()
-          expect(tableView.table.getColumn(0).name).toEqual('Foo Bar')
-          expect(tableView.moveRight).toHaveBeenCalled()
+          expect(tableElement.isEditing()).toBeFalsy()
+          expect(tableElement.table.getColumn(0).name).toEqual('Foo Bar')
+          expect(tableElement.moveRight).toHaveBeenCalled()

       describe 'table-edit:move-left', ->
         it 'confirms the current edit and moves the active cursor to the left', ->
-          previousActiveCell = tableView.getActiveCell()
-          spyOn(tableView, 'moveLeft')
+          previousActiveCell = tableElement.getActiveCell()
+          spyOn(tableElement, 'moveLeft')
           editor.setText('Foo Bar')
           atom.commands.dispatch(editor.element, 'table-edit:move-left')

-          expect(tableView.isEditing()).toBeFalsy()
-          expect(tableView.table.getColumn(0).name).toEqual('Foo Bar')
-          expect(tableView.moveLeft).toHaveBeenCalled()
+          expect(tableElement.isEditing()).toBeFalsy()
+          expect(tableElement.table.getColumn(0).name).toEqual('Foo Bar')
+          expect(tableElement.moveLeft).toHaveBeenCalled()

   #     ######   ##     ## ######## ######## ######## ########
   #    ##    ##  ##     ##    ##       ##    ##       ##     ##
@@ -780,21 +780,21 @@

   describe 'gutter', ->
     it 'is rendered only when the flag is enabled', ->
-      expect(tableView.find('.table-edit-gutter').length).toEqual(0)
-
-      tableView.showGutter()
+      expect(tableElement.find('.table-edit-gutter').length).toEqual(0)
+
+      tableElement.showGutter()
       nextAnimationFrame()

-      expect(tableView.find('.table-edit-gutter').length).toEqual(1)
+      expect(tableElement.find('.table-edit-gutter').length).toEqual(1)

     describe 'rows numbers', ->
       [content, gutter] = []

       beforeEach ->
-        tableView.showGutter()
+        tableElement.showGutter()
         nextAnimationFrame()
-        content = tableView.find('.table-edit-content')
-        gutter = tableView.find('.table-edit-gutter')
+        content = tableElement.find('.table-edit-content')
+        gutter = tableElement.find('.table-edit-gutter')

       it 'contains a filler div to set the gutter width', ->
         expect(gutter.find('.table-edit-gutter-filler').length).toEqual(1)
@@ -814,8 +814,8 @@
           nextAnimationFrame()

         it 'selects the whole line', ->
-          expect(tableView.activeCellPosition).toEqual([2,0])
-          expect(tableView.getSelection()).toEqual([[2,0],[2,2]])
+          expect(tableElement.activeCellPosition).toEqual([2,0])
+          expect(tableElement.getSelection()).toEqual([[2,0],[2,2]])

         describe 'then dragging the mouse down', ->
           beforeEach ->
@@ -824,8 +824,8 @@
             nextAnimationFrame()

           it 'expands the selection with the covered rows', ->
-            expect(tableView.activeCellPosition).toEqual([2,0])
-            expect(tableView.getSelection()).toEqual([[2,0],[4,2]])
+            expect(tableElement.activeCellPosition).toEqual([2,0])
+            expect(tableElement.getSelection()).toEqual([[2,0],[4,2]])

           describe 'until reaching the bottom of the view', ->
             beforeEach ->
@@ -834,7 +834,7 @@
               nextAnimationFrame()

             it 'scrolls the view', ->
-              expect(tableView.body.scrollTop()).toBeGreaterThan(0)
+              expect(tableElement.body.scrollTop()).toBeGreaterThan(0)

           describe 'then dragging the mouse up', ->
             beforeEach ->
@@ -843,46 +843,46 @@
               nextAnimationFrame()

             it 'changes the selection using the active cell as pivot', ->
-              expect(tableView.activeCellPosition).toEqual([2,0])
-              expect(tableView.getSelection()).toEqual([[0,0],[2,2]])
+              expect(tableElement.activeCellPosition).toEqual([2,0])
+              expect(tableElement.getSelection()).toEqual([[0,0],[2,2]])

       describe 'dragging the mouse over gutter cells and reaching the top of the view', ->
         it 'scrolls the view', ->
-          tableView.scrollTop(300)
+          tableElement.scrollTop(300)
           nextAnimationFrame()

-          startCell = tableView.find('.table-edit-row-number:nth-child(12)')
-          endCell = tableView.find('.table-edit-row-number:nth-child(9)')
+          startCell = tableElement.find('.table-edit-row-number:nth-child(12)')
+          endCell = tableElement.find('.table-edit-row-number:nth-child(9)')

           mousedown(startCell)
           mousemove(endCell)

-          expect(tableView.body.scrollTop()).toBeLessThan(300)
+          expect(tableElement.body.scrollTop()).toBeLessThan(300)

       describe 'dragging the resize handler of a row number', ->
         it 'resize the row on mouse up', ->
-          handle = tableView.find('.table-edit-row-number .row-resize-handle').eq(2)
+          handle = tableElement.find('.table-edit-row-number .row-resize-handle').eq(2)
           {x, y} = objectCenterCoordinates(handle)

           mousedown(handle)
           mouseup(handle, x, y + 50)

-          expect(tableView.getRowHeightAt(2)).toEqual(70)
+          expect(tableElement.getRowHeightAt(2)).toEqual(70)

         it 'displays a ruler when the drag have begun', ->
-          ruler = tableView.find('.row-resize-ruler')
+          ruler = tableElement.find('.row-resize-ruler')

           expect(ruler.is(':visible')).toBeFalsy()

-          handle = tableView.find('.table-edit-row-number .row-resize-handle').eq(2)
+          handle = tableElement.find('.table-edit-row-number .row-resize-handle').eq(2)
           mousedown(handle)

           expect(ruler.is(':visible')).toBeTruthy()
           expect(ruler.offset().top).toEqual(handle.offset().top + handle.height())

         it 'moves the handle during the drag', ->
-          ruler = tableView.find('.row-resize-ruler')
-          handle = tableView.find('.table-edit-row-number .row-resize-handle').eq(2)
+          ruler = tableElement.find('.row-resize-ruler')
+          handle = tableElement.find('.table-edit-row-number .row-resize-handle').eq(2)
           {x, y} = objectCenterCoordinates(handle)

           mousedown(handle)
@@ -891,16 +891,16 @@
           expect(ruler.offset().top).toEqual(handle.offset().top + handle.height() + 50)

         it 'hides the ruler on drag end', ->
-          ruler = tableView.find('.row-resize-ruler')
-          handle = tableView.find('.table-edit-row-number .row-resize-handle').eq(2)
+          ruler = tableElement.find('.row-resize-ruler')
+          handle = tableElement.find('.table-edit-row-number .row-resize-handle').eq(2)
           mousedown(handle)
           mouseup(handle)

           expect(ruler.is(':visible')).toBeFalsy()

         it 'stops the resize when the height is lower than the minimum row height', ->
-          ruler = tableView.find('.row-resize-ruler')
-          handle = tableView.find('.table-edit-row-number .row-resize-handle').eq(2)
+          ruler = tableElement.find('.row-resize-ruler')
+          handle = tableElement.find('.table-edit-row-number .row-resize-handle').eq(2)
           {x, y} = objectCenterCoordinates(handle)

           mousedown(handle)
@@ -910,17 +910,17 @@

           mouseup(handle, x, y + -20)

-          expect(tableView.getRowHeightAt(2)).toEqual(10)
+          expect(tableElement.getRowHeightAt(2)).toEqual(10)

       describe 'when an editor is opened', ->
         [editor] = []

         beforeEach ->
-          tableView.startCellEdit()
-          editor = tableView.find('atom-text-editor').view()
+          tableElement.startCellEdit()
+          editor = tableElement.find('atom-text-editor').view()

         it 'opens a text editor above the active cell', ->
-          cell = tableView.find('.table-edit-row:first-child .table-edit-cell:first-child')
+          cell = tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child')
           cellOffset = cell.offset()

           editorOffset = editor.offset()
@@ -940,198 +940,198 @@
   #     ######   #######  ##    ##    ##    ##     ##  #######  ########

   it 'gains focus when mouse is pressed on the table view', ->
-    tableView.mousedown()
-
-    expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+    tableElement.mousedown()
+
+    expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

   it 'activates the cell under the mouse when pressed', ->
-    cell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
+    cell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
     mousedown(cell)

-    expect(tableView.getActiveCell().getValue()).toEqual('no')
+    expect(tableElement.getActiveCell().getValue()).toEqual('no')

   it 'does not focus the hidden input twice when multiple press occurs', ->
-    spyOn(tableView.hiddenInput, 'focus').andCallThrough()
-
-    tableView.mousedown()
-    tableView.mousedown()
-
-    expect(tableView.hiddenInput.focus).toHaveBeenCalled()
-    expect(tableView.hiddenInput.focus.calls.length).toEqual(1)
-    expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+    spyOn(tableElement.hiddenInput, 'focus').andCallThrough()
+
+    tableElement.mousedown()
+    tableElement.mousedown()
+
+    expect(tableElement.hiddenInput.focus).toHaveBeenCalled()
+    expect(tableElement.hiddenInput.focus.calls.length).toEqual(1)
+    expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

   it 'has an active cell', ->
-    activeCell = tableView.getActiveCell()
+    activeCell = tableElement.getActiveCell()
     expect(activeCell).toBeDefined()
     expect(activeCell.getValue()).toEqual('row0')

   it 'renders the active cell using a class', ->
-    expect(tableView.find('.table-edit-header-cell.active-column').length).toEqual(1)
-    expect(tableView.find('.table-edit-row.active-row').length).toEqual(1)
-    expect(tableView.find('.table-edit-cell.active').length).toEqual(1)
-    expect(tableView.find('.table-edit-cell.active-column').length)
+    expect(tableElement.find('.table-edit-header-cell.active-column').length).toEqual(1)
+    expect(tableElement.find('.table-edit-row.active-row').length).toEqual(1)
+    expect(tableElement.find('.table-edit-cell.active').length).toEqual(1)
+    expect(tableElement.find('.table-edit-cell.active-column').length)
     .toBeGreaterThan(1)

   describe 'when the absoluteColumnsWidths setting is enabled', ->
     beforeEach ->
-      tableView.setAbsoluteColumnsWidths(true)
+      tableElement.setAbsoluteColumnsWidths(true)
       nextAnimationFrame()

     it 'activates the cell under the mouse when pressed', ->
-      cell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
+      cell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
       mousedown(cell)

-      expect(tableView.getActiveCell().getValue()).toEqual('no')
+      expect(tableElement.getActiveCell().getValue()).toEqual('no')

   describe '::moveRight', ->
     it 'requests an update', ->
-      spyOn(tableView, 'requestUpdate')
-      tableView.moveRight()
-
-      expect(tableView.requestUpdate).toHaveBeenCalled()
+      spyOn(tableElement, 'requestUpdate')
+      tableElement.moveRight()
+
+      expect(tableElement.requestUpdate).toHaveBeenCalled()

     it 'attempts to make the active row visible', ->
-      spyOn(tableView, 'makeRowVisible')
-      tableView.moveRight()
-
-      expect(tableView.makeRowVisible).toHaveBeenCalled()
+      spyOn(tableElement, 'makeRowVisible')
+      tableElement.moveRight()
+
+      expect(tableElement.makeRowVisible).toHaveBeenCalled()

     it 'is triggered on core:move-right', ->
-      spyOn(tableView, 'moveRight')
-
-      atom.commands.dispatch(tableView.element, 'core:move-right')
-
-      expect(tableView.moveRight).toHaveBeenCalled()
+      spyOn(tableElement, 'moveRight')
+
+      atom.commands.dispatch(tableElement.element, 'core:move-right')
+
+      expect(tableElement.moveRight).toHaveBeenCalled()

     it 'moves the active cell cursor to the right', ->
-      tableView.moveRight()
-
-      expect(tableView.getActiveCell().getValue()).toEqual(0)
-
-      tableView.moveRight()
-
-      expect(tableView.getActiveCell().getValue()).toEqual('yes')
+      tableElement.moveRight()
+
+      expect(tableElement.getActiveCell().getValue()).toEqual(0)
+
+      tableElement.moveRight()
+
+      expect(tableElement.getActiveCell().getValue()).toEqual('yes')

     it 'moves the active cell to the next row when on last cell of a row', ->
-      tableView.moveRight()
-      tableView.moveRight()
-      tableView.moveRight()
-      expect(tableView.getActiveCell().getValue()).toEqual('row1')
+      tableElement.moveRight()
+      tableElement.moveRight()
+      tableElement.moveRight()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row1')

     it 'moves the active cell to the first row when on last cell of last row', ->
-      tableView.activeCellPosition.row = 99
-      tableView.activeCellPosition.column = 2
-
-      tableView.moveRight()
-      expect(tableView.getActiveCell().getValue()).toEqual('row0')
+      tableElement.activeCellPosition.row = 99
+      tableElement.activeCellPosition.column = 2
+
+      tableElement.moveRight()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row0')

   describe '::moveLeft', ->
     it 'requests an update', ->
-      spyOn(tableView, 'requestUpdate')
-      tableView.moveLeft()
-
-      expect(tableView.requestUpdate).toHaveBeenCalled()
+      spyOn(tableElement, 'requestUpdate')
+      tableElement.moveLeft()
+
+      expect(tableElement.requestUpdate).toHaveBeenCalled()

     it 'attempts to make the active row visible', ->
-      spyOn(tableView, 'makeRowVisible')
-      tableView.moveLeft()
-
-      expect(tableView.makeRowVisible).toHaveBeenCalled()
+      spyOn(tableElement, 'makeRowVisible')
+      tableElement.moveLeft()
+
+      expect(tableElement.makeRowVisible).toHaveBeenCalled()

     it 'is triggered on core:move-left', ->
-      spyOn(tableView, 'moveLeft')
-
-      atom.commands.dispatch(tableView.element, 'core:move-left')
-
-      expect(tableView.moveLeft).toHaveBeenCalled()
+      spyOn(tableElement, 'moveLeft')
+
+      atom.commands.dispatch(tableElement.element, 'core:move-left')
+
+      expect(tableElement.moveLeft).toHaveBeenCalled()

     it 'moves the active cell to the last cell when on the first cell', ->
-      tableView.moveLeft()
-      expect(tableView.getActiveCell().getValue()).toEqual('no')
+      tableElement.moveLeft()
+      expect(tableElement.getActiveCell().getValue()).toEqual('no')

     it 'moves the active cell cursor to the left', ->
-      tableView.moveRight()
-      tableView.moveLeft()
-      expect(tableView.getActiveCell().getValue()).toEqual('row0')
+      tableElement.moveRight()
+      tableElement.moveLeft()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row0')

     it 'moves the active cell cursor to the upper row', ->
-      tableView.moveRight()
-      tableView.moveRight()
-      tableView.moveRight()
-      tableView.moveLeft()
-      expect(tableView.getActiveCell().getValue()).toEqual('yes')
+      tableElement.moveRight()
+      tableElement.moveRight()
+      tableElement.moveRight()
+      tableElement.moveLeft()
+      expect(tableElement.getActiveCell().getValue()).toEqual('yes')

   describe '::moveUp', ->
     it 'requests an update', ->
-      spyOn(tableView, 'requestUpdate')
-      tableView.moveUp()
-
-      expect(tableView.requestUpdate).toHaveBeenCalled()
+      spyOn(tableElement, 'requestUpdate')
+      tableElement.moveUp()
+
+      expect(tableElement.requestUpdate).toHaveBeenCalled()

     it 'attempts to make the active row visible', ->
-      spyOn(tableView, 'makeRowVisible')
-      tableView.moveUp()
-
-      expect(tableView.makeRowVisible).toHaveBeenCalled()
+      spyOn(tableElement, 'makeRowVisible')
+      tableElement.moveUp()
+
+      expect(tableElement.makeRowVisible).toHaveBeenCalled()

     it 'is triggered on core:move-up', ->
-      spyOn(tableView, 'moveUp')
-
-      atom.commands.dispatch(tableView.element, 'core:move-up')
-
-      expect(tableView.moveUp).toHaveBeenCalled()
+      spyOn(tableElement, 'moveUp')
+
+      atom.commands.dispatch(tableElement.element, 'core:move-up')
+
+      expect(tableElement.moveUp).toHaveBeenCalled()

     it 'moves the active cell to the last row when on the first row', ->
-      tableView.moveUp()
-      expect(tableView.getActiveCell().getValue()).toEqual('row99')
+      tableElement.moveUp()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row99')

     it 'moves the active cell on the upper row', ->
-      tableView.activeCellPosition.row = 10
-
-      tableView.moveUp()
-      expect(tableView.getActiveCell().getValue()).toEqual('row9')
+      tableElement.activeCellPosition.row = 10
+
+      tableElement.moveUp()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row9')

   describe '::moveDown', ->
     it 'requests an update', ->
-      spyOn(tableView, 'requestUpdate')
-      tableView.moveDown()
-
-      expect(tableView.requestUpdate).toHaveBeenCalled()
+      spyOn(tableElement, 'requestUpdate')
+      tableElement.moveDown()
+
+      expect(tableElement.requestUpdate).toHaveBeenCalled()

     it 'attempts to make the active row visible', ->
-      spyOn(tableView, 'makeRowVisible')
-      tableView.moveDown()
-
-      expect(tableView.makeRowVisible).toHaveBeenCalled()
+      spyOn(tableElement, 'makeRowVisible')
+      tableElement.moveDown()
+
+      expect(tableElement.makeRowVisible).toHaveBeenCalled()

     it 'is triggered on core:move-down', ->
-      spyOn(tableView, 'moveDown')
-
-      atom.commands.dispatch(tableView.element, 'core:move-down')
-
-      expect(tableView.moveDown).toHaveBeenCalled()
+      spyOn(tableElement, 'moveDown')
+
+      atom.commands.dispatch(tableElement.element, 'core:move-down')
+
+      expect(tableElement.moveDown).toHaveBeenCalled()

     it 'moves the active cell to the row below', ->
-      tableView.moveDown()
-      expect(tableView.getActiveCell().getValue()).toEqual('row1')
+      tableElement.moveDown()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row1')

     it 'moves the active cell to the first row when on the last row', ->
-      tableView.activeCellPosition.row = 99
-
-      tableView.moveDown()
-      expect(tableView.getActiveCell().getValue()).toEqual('row0')
+      tableElement.activeCellPosition.row = 99
+
+      tableElement.moveDown()
+      expect(tableElement.getActiveCell().getValue()).toEqual('row0')

   describe '::makeRowVisible', ->
     it 'scrolls the view until the passed-on row become visible', ->
-      tableView.makeRowVisible(50)
-
-      expect(tableView.body.scrollTop()).toEqual(849)
+      tableElement.makeRowVisible(50)
+
+      expect(tableElement.body.scrollTop()).toEqual(849)

   describe 'core:undo', ->
     it 'triggers an undo on the table', ->
       spyOn(table, 'undo')

-      atom.commands.dispatch(tableView.element, 'core:undo')
+      atom.commands.dispatch(tableElement.element, 'core:undo')

       expect(table.undo).toHaveBeenCalled()

@@ -1139,7 +1139,7 @@
     it 'triggers an redo on the table', ->
       spyOn(table, 'redo')

-      atom.commands.dispatch(tableView.element, 'core:redo')
+      atom.commands.dispatch(tableElement.element, 'core:redo')

       expect(table.redo).toHaveBeenCalled()

@@ -1148,154 +1148,154 @@
       atom.config.set 'table-edit.pageMovesAmount', 20

     it 'moves the active cell 20 rows below', ->
-      atom.commands.dispatch(tableView.element, 'core:page-down')
-
-      expect(tableView.activeCellPosition.row).toEqual(20)
+      atom.commands.dispatch(tableElement.element, 'core:page-down')
+
+      expect(tableElement.activeCellPosition.row).toEqual(20)

     it 'stops to the last row without looping', ->
-      tableView.activeCellPosition.row = 90
-
-      atom.commands.dispatch(tableView.element, 'core:page-down')
-
-      expect(tableView.activeCellPosition.row).toEqual(99)
+      tableElement.activeCellPosition.row = 90
+
+      atom.commands.dispatch(tableElement.element, 'core:page-down')
+
+      expect(tableElement.activeCellPosition.row).toEqual(99)

     describe 'with a custom amount on the instance', ->
       it 'moves the active cell 30 rows below', ->
-        tableView.pageMovesAmount = 30
-
-        atom.commands.dispatch(tableView.element, 'core:page-down')
-
-        expect(tableView.activeCellPosition.row).toEqual(30)
+        tableElement.pageMovesAmount = 30
+
+        atom.commands.dispatch(tableElement.element, 'core:page-down')
+
+        expect(tableElement.activeCellPosition.row).toEqual(30)

       it 'keeps using its own amount even when the config change', ->
-        tableView.pageMovesAmount = 30
+        tableElement.pageMovesAmount = 30
         atom.config.set 'table-edit.pageMovesAmount', 50

-        atom.commands.dispatch(tableView.element, 'core:page-down')
-
-        expect(tableView.activeCellPosition.row).toEqual(30)
+        atom.commands.dispatch(tableElement.element, 'core:page-down')
+
+        expect(tableElement.activeCellPosition.row).toEqual(30)

   describe 'core:page-up', ->
     beforeEach ->
       atom.config.set 'table-edit.pageMovesAmount', 20

     it 'moves the active cell 20 rows up', ->
-      tableView.activeCellPosition.row = 20
-
-      atom.commands.dispatch(tableView.element, 'core:page-up')
-
-      expect(tableView.activeCellPosition.row).toEqual(0)
+      tableElement.activeCellPosition.row = 20
+
+      atom.commands.dispatch(tableElement.element, 'core:page-up')
+
+      expect(tableElement.activeCellPosition.row).toEqual(0)

     it 'stops to the first cell without looping', ->
-      tableView.activeCellPosition.row = 10
-
-      atom.commands.dispatch(tableView.element, 'core:page-up')
-
-      expect(tableView.activeCellPosition.row).toEqual(0)
+      tableElement.activeCellPosition.row = 10
+
+      atom.commands.dispatch(tableElement.element, 'core:page-up')
+
+      expect(tableElement.activeCellPosition.row).toEqual(0)

   describe 'core:move-to-top', ->
     beforeEach ->
       atom.config.set 'table-edit.pageMovesAmount', 20

     it 'moves the active cell to the first row', ->
-      tableView.activeCellPosition.row = 50
-
-      atom.commands.dispatch(tableView.element, 'core:move-to-top')
-
-      expect(tableView.activeCellPosition.row).toEqual(0)
+      tableElement.activeCellPosition.row = 50
+
+      atom.commands.dispatch(tableElement.element, 'core:move-to-top')
+
+      expect(tableElement.activeCellPosition.row).toEqual(0)

   describe 'core:move-to-bottom', ->
     beforeEach ->
       atom.config.set 'table-edit.pageMovesAmount', 20

     it 'moves the active cell to the first row', ->
-      tableView.activeCellPosition.row = 50
-
-      atom.commands.dispatch(tableView.element, 'core:move-to-bottom')
-
-      expect(tableView.activeCellPosition.row).toEqual(99)
+      tableElement.activeCellPosition.row = 50
+
+      atom.commands.dispatch(tableElement.element, 'core:move-to-bottom')
+
+      expect(tableElement.activeCellPosition.row).toEqual(99)

   describe 'table-edit:insert-row-before', ->
     it 'inserts a new row before the active row', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-row-before')
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-row-before')

       expect(table.getRow(0).getValues()).toEqual([null, null, null])

   describe 'table-edit:insert-row-after', ->
     it 'inserts a new row after the active row', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-row-after')
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-row-after')

       expect(table.getRow(1).getValues()).toEqual([null, null, null])

   describe 'table-edit:delete-row', ->
     it 'deletes the current active row', ->
       mockConfirm(0)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-row')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-row')

       expect(table.getRow(0).getValues()).toEqual(['row1', 100, 'no'])

     it 'asks for a confirmation', ->
       mockConfirm(0)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-row')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-row')

       expect(atom.confirm).toHaveBeenCalled()

     it 'does not remove the row when cancelled', ->
       mockConfirm(1)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-row')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-row')

       expect(table.getRow(0).getValues()).toEqual(['row0', 0, 'yes'])

     describe 'when the deleted row has a custom height', ->
       beforeEach ->
-        spyOn(tableView, 'computeRowOffsets')
-        tableView.setRowHeightAt(0, 100)
+        spyOn(tableElement, 'computeRowOffsets')
+        tableElement.setRowHeightAt(0, 100)
         mockConfirm(0)

       it 'removes the height entry', ->
-        atom.commands.dispatch(tableView.element, 'table-edit:delete-row')
-
-        expect(tableView.getRowHeightAt(0)).toEqual(20)
+        atom.commands.dispatch(tableElement.element, 'table-edit:delete-row')
+
+        expect(tableElement.getRowHeightAt(0)).toEqual(20)

       it 'updates the rows offsets', ->
-        expect(tableView.computeRowOffsets).toHaveBeenCalled()
+        expect(tableElement.computeRowOffsets).toHaveBeenCalled()

   describe 'table-edit:insert-column-before', ->
     it 'inserts a new column before the active column', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-column-before')
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-before')

       expect(table.getRow(0).getValues()).toEqual([null, 'row0', 0, 'yes'])

     it 'adjusts the columns width and keeps proportions of the initial columns', ->
-      tableView.setColumnsWidths([0.1, 0.1, 0.8])
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-column-before')
-
-      compareCloseArrays(tableView.getColumnsWidths(), [0.2, 0.08, 0.08, 0.64])
+      tableElement.setColumnsWidths([0.1, 0.1, 0.8])
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-before')
+
+      compareCloseArrays(tableElement.getColumnsWidths(), [0.2, 0.08, 0.08, 0.64])

     describe 'called several times', ->
       it 'creates incremental names for columns', ->
-        atom.commands.dispatch(tableView.element, 'table-edit:insert-column-before')
-        atom.commands.dispatch(tableView.element, 'table-edit:insert-column-before')
+        atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-before')
+        atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-before')

         expect(table.getColumn(0).name).toEqual('untitled_1')
         expect(table.getColumn(1).name).toEqual('untitled_0')

   describe 'table-edit:insert-column-after', ->
     it 'inserts a new column after the active column', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-column-after')
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-after')

       expect(table.getRow(0).getValues()).toEqual(['row0', null, 0, 'yes'])

     it 'adjusts the columns width and keeps proportions of the initial columns', ->
-      tableView.setColumnsWidths([0.1, 0.1, 0.8])
-      atom.commands.dispatch(tableView.element, 'table-edit:insert-column-after')
-
-      compareCloseArrays(tableView.getColumnsWidths(), [0.08, 0.2, 0.08, 0.64])
+      tableElement.setColumnsWidths([0.1, 0.1, 0.8])
+      atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-after')
+
+      compareCloseArrays(tableElement.getColumnsWidths(), [0.08, 0.2, 0.08, 0.64])

     describe 'called several times', ->
       it 'creates incremental names for columns', ->
-        atom.commands.dispatch(tableView.element, 'table-edit:insert-column-after')
-        atom.commands.dispatch(tableView.element, 'table-edit:insert-column-after')
+        atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-after')
+        atom.commands.dispatch(tableElement.element, 'table-edit:insert-column-after')

         expect(table.getColumn(1).name).toEqual('untitled_1')
         expect(table.getColumn(2).name).toEqual('untitled_0')
@@ -1303,19 +1303,19 @@
   describe 'table-edit:delete-column', ->
     it 'deletes the current active column', ->
       mockConfirm(0)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-column')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-column')

       expect(table.getRow(0).getValues()).toEqual([0, 'yes'])

     it 'asks for a confirmation', ->
       mockConfirm(0)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-column')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-column')

       expect(atom.confirm).toHaveBeenCalled()

     it 'does not remove the column when cancelled', ->
       mockConfirm(1)
-      atom.commands.dispatch(tableView.element, 'table-edit:delete-column')
+      atom.commands.dispatch(tableElement.element, 'table-edit:delete-column')

       expect(table.getRow(0).getValues()).toEqual(['row0', 0, 'yes'])

@@ -1329,32 +1329,32 @@

   describe 'pressing a key when the table view has focus', ->
     beforeEach ->
-      textInput(tableView.hiddenInput, 'x')
+      textInput(tableElement.hiddenInput, 'x')

     it 'starts the edition of the active cell', ->
-      expect(tableView.isEditing()).toBeTruthy()
+      expect(tableElement.isEditing()).toBeTruthy()

     it 'fills the editor with the input data', ->
-      editor = tableView.find('atom-text-editor').view()
+      editor = tableElement.find('atom-text-editor').view()
       expect(editor.getText()).toEqual('x')

   describe 'double clicking on a cell', ->
     beforeEach ->
-      cell = tableView.find('.table-edit-row:last-child .table-edit-cell:last-child')
+      cell = tableElement.find('.table-edit-row:last-child .table-edit-cell:last-child')
       cell.trigger('dblclick')

     it 'starts the edition of the cell', ->
-      expect(tableView.isEditing()).toBeTruthy()
+      expect(tableElement.isEditing()).toBeTruthy()

   describe '::startCellEdit', ->
     [editor] = []

     beforeEach ->
-      tableView.startCellEdit()
-      editor = tableView.find('atom-text-editor').view()
+      tableElement.startCellEdit()
+      editor = tableElement.find('atom-text-editor').view()

     it 'opens a text editor above the active cell', ->
-      cell = tableView.find('.table-edit-row:first-child .table-edit-cell:first-child')
+      cell = tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child')
       cellOffset = cell.offset()

       editorOffset = editor.offset()
@@ -1377,52 +1377,52 @@

   describe '::stopEdit', ->
     beforeEach ->
-      tableView.startCellEdit()
-      tableView.stopEdit()
+      tableElement.startCellEdit()
+      tableElement.stopEdit()

     it 'closes the editor', ->
-      expect(tableView.isEditing()).toBeFalsy()
-      expect(tableView.find('atom-text-editor:visible').length).toEqual(0)
+      expect(tableElement.isEditing()).toBeFalsy()
+      expect(tableElement.find('atom-text-editor:visible').length).toEqual(0)

     it 'gives the focus back to the table view', ->
-      expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+      expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

     it 'leaves the cell value as is', ->
-      expect(tableView.getActiveCell().getValue()).toEqual('row0')
+      expect(tableElement.getActiveCell().getValue()).toEqual('row0')

   describe 'with an editor opened', ->
     [editor] = []

     beforeEach ->
-      tableView.startCellEdit()
-      editor = tableView.find('atom-text-editor').view()
+      tableElement.startCellEdit()
+      editor = tableElement.find('atom-text-editor').view()

     describe 'core:cancel', ->
       it 'closes the editor', ->
         atom.commands.dispatch(editor.element, 'core:cancel')
-        expect(tableView.isEditing()).toBeFalsy()
+        expect(tableElement.isEditing()).toBeFalsy()

     describe 'table-edit:move-right', ->
       it 'confirms the current edit and moves the active cursor to the right', ->
-        previousActiveCell = tableView.getActiveCell()
-        spyOn(tableView, 'moveRight')
+        previousActiveCell = tableElement.getActiveCell()
+        spyOn(tableElement, 'moveRight')
         editor.setText('Foo Bar')
         atom.commands.dispatch(editor.element, 'table-edit:move-right')

-        expect(tableView.isEditing()).toBeFalsy()
+        expect(tableElement.isEditing()).toBeFalsy()
         expect(previousActiveCell.getValue()).toEqual('Foo Bar')
-        expect(tableView.moveRight).toHaveBeenCalled()
+        expect(tableElement.moveRight).toHaveBeenCalled()

     describe 'table-edit:move-left', ->
       it 'confirms the current edit and moves the active cursor to the left', ->
-        previousActiveCell = tableView.getActiveCell()
-        spyOn(tableView, 'moveLeft')
+        previousActiveCell = tableElement.getActiveCell()
+        spyOn(tableElement, 'moveLeft')
         editor.setText('Foo Bar')
         atom.commands.dispatch(editor.element, 'table-edit:move-left')

-        expect(tableView.isEditing()).toBeFalsy()
+        expect(tableElement.isEditing()).toBeFalsy()
         expect(previousActiveCell.getValue()).toEqual('Foo Bar')
-        expect(tableView.moveLeft).toHaveBeenCalled()
+        expect(tableElement.moveLeft).toHaveBeenCalled()

     describe 'core:confirm', ->
       describe 'when the content of the editor has changed', ->
@@ -1431,36 +1431,36 @@
           atom.commands.dispatch(editor.element, 'core:confirm')

         it 'closes the editor', ->
-          expect(tableView.find('atom-text-editor:visible').length).toEqual(0)
+          expect(tableElement.find('atom-text-editor:visible').length).toEqual(0)

         it 'gives the focus back to the table view', ->
-          expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+          expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

         it 'changes the cell value', ->
-          expect(tableView.getActiveCell().getValue()).toEqual('foobar')
+          expect(tableElement.getActiveCell().getValue()).toEqual('foobar')

       describe 'when the content of the editor did not changed', ->
         beforeEach ->
-          spyOn(tableView.getActiveCell(), 'setValue').andCallThrough()
+          spyOn(tableElement.getActiveCell(), 'setValue').andCallThrough()
           atom.commands.dispatch(editor.element, 'core:confirm')

         it 'closes the editor', ->
-          expect(tableView.find('atom-text-editor:visible').length).toEqual(0)
+          expect(tableElement.find('atom-text-editor:visible').length).toEqual(0)

         it 'gives the focus back to the table view', ->
-          expect(tableView.hiddenInput.is(':focus')).toBeTruthy()
+          expect(tableElement.hiddenInput.is(':focus')).toBeTruthy()

         it 'leaves the cell value as is', ->
-          expect(tableView.getActiveCell().getValue()).toEqual('row0')
-          expect(tableView.getActiveCell().setValue).not.toHaveBeenCalled()
+          expect(tableElement.getActiveCell().getValue()).toEqual('row0')
+          expect(tableElement.getActiveCell().setValue).not.toHaveBeenCalled()

     describe 'clicking on another cell', ->
       beforeEach ->
-        cell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
+        cell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:last-child')
         mousedown(cell)

       it 'closes the editor', ->
-        expect(tableView.isEditing()).toBeFalsy()
+        expect(tableElement.isEditing()).toBeFalsy()

   #     ######  ######## ##       ########  ######  ########
   #    ##    ## ##       ##       ##       ##    ##    ##
@@ -1471,63 +1471,63 @@
   #     ######  ######## ######## ########  ######     ##

   it 'has a selection', ->
-    expect(tableView.getSelection()).toEqual([[0,0], [0,0]])
+    expect(tableElement.getSelection()).toEqual([[0,0], [0,0]])

   describe 'selection', ->
     it 'follows the active cell when it moves', ->
-      tableView.pageMovesAmount = 10
-      tableView.pageDown()
-      tableView.moveRight()
-
-      expect(tableView.getSelection()).toEqual([[10,1], [10,1]])
+      tableElement.pageMovesAmount = 10
+      tableElement.pageDown()
+      tableElement.moveRight()
+
+      expect(tableElement.getSelection()).toEqual([[10,1], [10,1]])

     it 'can spans on several rows and columns', ->
-      tableView.setSelection([[2,0],[3,2]])
-
-      expect(tableView.getSelection()).toEqual([[2,0],[3,2]])
+      tableElement.setSelection([[2,0],[3,2]])
+
+      expect(tableElement.getSelection()).toEqual([[2,0],[3,2]])

     it 'marks the cells covered by the selection with a selected class', ->
-      tableView.setSelection([[2,0],[3,2]])
+      tableElement.setSelection([[2,0],[3,2]])

       nextAnimationFrame()

-      expect(tableView.find('.selected').length).toEqual(6)
+      expect(tableElement.find('.selected').length).toEqual(6)

     it 'marks the row number with a selected class', ->
-      tableView.showGutter()
-      tableView.setSelection([[2,0],[3,2]])
+      tableElement.showGutter()
+      tableElement.setSelection([[2,0],[3,2]])

       nextAnimationFrame()

-      expect(tableView.find('.table-edit-row-number.selected').length).toEqual(2)
+      expect(tableElement.find('.table-edit-row-number.selected').length).toEqual(2)
   describe 'when the selection spans only one cell', ->
     it 'does not render the selection box', ->
-      expect(tableView.find('.selection-box').length).toEqual(0)
-      expect(tableView.find('.selection-box-handle').length).toEqual(0)
+      expect(tableElement.find('.selection-box').length).toEqual(0)
+      expect(tableElement.find('.selection-box-handle').length).toEqual(0)

   describe 'when the selection spans many cells', ->
     [selectionBox, selectionBoxHandle] = []

     beforeEach ->
-      tableView.setSelection([[2,0],[3,2]])
+      tableElement.setSelection([[2,0],[3,2]])
       nextAnimationFrame()
-      selectionBox = tableView.find('.selection-box')
-      selectionBoxHandle = tableView.find('.selection-box-handle')
+      selectionBox = tableElement.find('.selection-box')
+      selectionBoxHandle = tableElement.find('.selection-box-handle')

     it 'renders the selection box', ->
       expect(selectionBox.length).toEqual(1)
       expect(selectionBoxHandle.length).toEqual(1)

     it 'positions the selection box over the cells', ->
-      cells = tableView.find('.table-edit-cell.selected')
+      cells = tableElement.find('.table-edit-cell.selected')
       firstCell = cells.first()
       lastCell = cells.last()
       expect(selectionBox.offset()).toEqual(firstCell.offset())
-      expect(selectionBox.outerWidth()).toEqual(tableView.find('.table-edit-rows').width())
+      expect(selectionBox.outerWidth()).toEqual(tableElement.find('.table-edit-rows').width())
       expect(selectionBox.outerHeight()).toEqual(firstCell.outerHeight() + lastCell.outerHeight())

     it 'positions the selection box handle at the bottom right corner', ->
-      cells = tableView.find('.table-edit-cell.selected')
+      cells = tableElement.find('.table-edit-cell.selected')
       lastCell = cells.last()
       lastCellOffset = lastCell.offset()

@@ -1536,12 +1536,12 @@

     describe 'when the columns widths have been changed', ->
       beforeEach ->
-        tableView.setColumnsWidths([0.1, 0.1, 0.8])
-        tableView.setSelection([[2,0],[3,1]])
+        tableElement.setColumnsWidths([0.1, 0.1, 0.8])
+        tableElement.setSelection([[2,0],[3,1]])
         nextAnimationFrame()

       it 'positions the selection box over the cells', ->
-        cells = tableView.find('.table-edit-cell.selected')
+        cells = tableElement.find('.table-edit-cell.selected')
         firstCell = cells.first()
         lastCell = cells.last()
         expect(selectionBox.offset()).toEqual(firstCell.offset())
@@ -1550,254 +1550,254 @@

   describe '::setSelection', ->
     it 'change the active cell so that the upper left cell is active', ->
-      tableView.setSelection([[4,0],[6,2]])
-
-      expect(tableView.activeCellPosition).toEqual([4,0])
+      tableElement.setSelection([[4,0],[6,2]])
+
+      expect(tableElement.activeCellPosition).toEqual([4,0])

   describe '::selectionSpansManyCells', ->
     it 'returns true when the selection as at least two cells', ->
-      tableView.setSelection([[4,0],[6,2]])
-
-      expect(tableView.selectionSpansManyCells()).toBeTruthy()
+      tableElement.setSelection([[4,0],[6,2]])
+
+      expect(tableElement.selectionSpansManyCells()).toBeTruthy()

   describe 'core:select-right', ->
     it 'expands the selection by one cell on the right', ->
-      atom.commands.dispatch(tableView.element, 'core:select-right')
-      expect(tableView.getSelection()).toEqual([[0,0],[0,1]])
+      atom.commands.dispatch(tableElement.element, 'core:select-right')
+      expect(tableElement.getSelection()).toEqual([[0,0],[0,1]])

     it 'stops at the last column', ->
-      atom.commands.dispatch(tableView.element, 'core:select-right')
-      atom.commands.dispatch(tableView.element, 'core:select-right')
-      atom.commands.dispatch(tableView.element, 'core:select-right')
-
-      expect(tableView.getSelection()).toEqual([[0,0],[0,2]])
+      atom.commands.dispatch(tableElement.element, 'core:select-right')
+      atom.commands.dispatch(tableElement.element, 'core:select-right')
+      atom.commands.dispatch(tableElement.element, 'core:select-right')
+
+      expect(tableElement.getSelection()).toEqual([[0,0],[0,2]])

     describe 'then triggering core:select-left', ->
       it 'collapse the selection back to the left', ->
-        tableView.activateCellAtPosition([0,1])
-
-        atom.commands.dispatch(tableView.element, 'core:select-right')
-        atom.commands.dispatch(tableView.element, 'core:select-left')
-
-        expect(tableView.getSelection()).toEqual([[0,1],[0,1]])
+        tableElement.activateCellAtPosition([0,1])
+
+        atom.commands.dispatch(tableElement.element, 'core:select-right')
+        atom.commands.dispatch(tableElement.element, 'core:select-left')
+
+        expect(tableElement.getSelection()).toEqual([[0,1],[0,1]])

   describe 'core:select-left', ->
     beforeEach ->
-      tableView.activateCellAtPosition([0,2])
+      tableElement.activateCellAtPosition([0,2])

     it 'expands the selection by one cell on the left', ->
-      atom.commands.dispatch(tableView.element, 'core:select-left')
-      expect(tableView.getSelection()).toEqual([[0,1],[0,2]])
+      atom.commands.dispatch(tableElement.element, 'core:select-left')
+      expect(tableElement.getSelection()).toEqual([[0,1],[0,2]])

     it 'stops at the first column', ->
-      atom.commands.dispatch(tableView.element, 'core:select-left')
-      atom.commands.dispatch(tableView.element, 'core:select-left')
-      atom.commands.dispatch(tableView.element, 'core:select-left')
-      expect(tableView.getSelection()).toEqual([[0,0],[0,2]])
+      atom.commands.dispatch(tableElement.element, 'core:select-left')
+      atom.commands.dispatch(tableElement.element, 'core:select-left')
+      atom.commands.dispatch(tableElement.element, 'core:select-left')
+      expect(tableElement.getSelection()).toEqual([[0,0],[0,2]])

     describe 'then triggering core:select-right', ->
       it 'collapse the selection back to the right', ->
-        tableView.activateCellAtPosition([0,1])
-
-        atom.commands.dispatch(tableView.element, 'core:select-left')
-        atom.commands.dispatch(tableView.element, 'core:select-right')
-
-        expect(tableView.getSelection()).toEqual([[0,1],[0,1]])
+        tableElement.activateCellAtPosition([0,1])
+
+        atom.commands.dispatch(tableElement.element, 'core:select-left')
+        atom.commands.dispatch(tableElement.element, 'core:select-right')
+
+        expect(tableElement.getSelection()).toEqual([[0,1],[0,1]])

   describe 'core:select-up', ->
     beforeEach ->
-      tableView.activateCellAtPosition([2,0])
+      tableElement.activateCellAtPosition([2,0])

     it 'expands the selection by one cell to the top', ->
-      atom.commands.dispatch(tableView.element, 'core:select-up')
-      expect(tableView.getSelection()).toEqual([[1,0],[2,0]])
+      atom.commands.dispatch(tableElement.element, 'core:select-up')
+      expect(tableElement.getSelection()).toEqual([[1,0],[2,0]])

     it 'stops at the first row', ->
-      atom.commands.dispatch(tableView.element, 'core:select-up')
-      atom.commands.dispatch(tableView.element, 'core:select-up')
-      atom.commands.dispatch(tableView.element, 'core:select-up')
-      expect(tableView.getSelection()).toEqual([[0,0],[2,0]])
+      atom.commands.dispatch(tableElement.element, 'core:select-up')
+      atom.commands.dispatch(tableElement.element, 'core:select-up')
+      atom.commands.dispatch(tableElement.element, 'core:select-up')
+      expect(tableElement.getSelection()).toEqual([[0,0],[2,0]])

     it 'scrolls the view to make the added row visible', ->
-      tableView.scrollTop(200)
-      tableView.activateCellAtPosition([10,0])
-
-      atom.commands.dispatch(tableView.element, 'core:select-up')
-
-      expect(tableView.body.scrollTop()).toEqual(180)
+      tableElement.scrollTop(200)
+      tableElement.activateCellAtPosition([10,0])
+
+      atom.commands.dispatch(tableElement.element, 'core:select-up')
+
+      expect(tableElement.body.scrollTop()).toEqual(180)

     describe 'then triggering core:select-down', ->
       it 'collapse the selection back to the bottom', ->
-        tableView.activateCellAtPosition([1,0])
-
-        atom.commands.dispatch(tableView.element, 'core:select-up')
-        atom.commands.dispatch(tableView.element, 'core:select-down')
-
-        expect(tableView.getSelection()).toEqual([[1,0],[1,0]])
+        tableElement.activateCellAtPosition([1,0])
+
+        atom.commands.dispatch(tableElement.element, 'core:select-up')
+        atom.commands.dispatch(tableElement.element, 'core:select-down')
+
+        expect(tableElement.getSelection()).toEqual([[1,0],[1,0]])

   describe 'core:select-down', ->
     beforeEach ->
-      tableView.activateCellAtPosition([97,0])
+      tableElement.activateCellAtPosition([97,0])

     it 'expands the selection by one cell to the bottom', ->
-      atom.commands.dispatch(tableView.element, 'core:select-down')
-      expect(tableView.getSelection()).toEqual([[97,0],[98,0]])
+      atom.commands.dispatch(tableElement.element, 'core:select-down')
+      expect(tableElement.getSelection()).toEqual([[97,0],[98,0]])

     it 'stops at the last row', ->
-      atom.commands.dispatch(tableView.element, 'core:select-down')
-      atom.commands.dispatch(tableView.element, 'core:select-down')
-      atom.commands.dispatch(tableView.element, 'core:select-down')
-      expect(tableView.getSelection()).toEqual([[97,0],[99,0]])
+      atom.commands.dispatch(tableElement.element, 'core:select-down')
+      atom.commands.dispatch(tableElement.element, 'core:select-down')
+      atom.commands.dispatch(tableElement.element, 'core:select-down')
+      expect(tableElement.getSelection()).toEqual([[97,0],[99,0]])

     it 'scrolls the view to make the added row visible', ->
-      tableView.activateCellAtPosition([8,0])
-
-      atom.commands.dispatch(tableView.element, 'core:select-down')
-
-      expect(tableView.body.scrollTop()).not.toEqual(0)
+      tableElement.activateCellAtPosition([8,0])
+
+      atom.commands.dispatch(tableElement.element, 'core:select-down')
+
+      expect(tableElement.body.scrollTop()).not.toEqual(0)

     describe 'then triggering core:select-up', ->
       it 'collapse the selection back to the bottom', ->
-        tableView.activateCellAtPosition([1,0])
-
-        atom.commands.dispatch(tableView.element, 'core:select-down')
-        atom.commands.dispatch(tableView.element, 'core:select-up')
-
-        expect(tableView.getSelection()).toEqual([[1,0],[1,0]])
+        tableElement.activateCellAtPosition([1,0])
+
+        atom.commands.dispatch(tableElement.element, 'core:select-down')
+        atom.commands.dispatch(tableElement.element, 'core:select-up')
+
+        expect(tableElement.getSelection()).toEqual([[1,0],[1,0]])

   describe 'table-edit:select-to-end-of-line', ->
     it 'expands the selection to the end of the current row', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-line')
-
-      expect(tableView.getSelection()).toEqual([[0,0],[0,2]])
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-line')
+
+      expect(tableElement.getSelection()).toEqual([[0,0],[0,2]])

     describe 'then triggering table-edit:select-to-beginning-of-line', ->
       it 'expands the selection to the beginning of the current row', ->
-        tableView.activateCellAtPosition([0,1])
-
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-line')
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-line')
-
-        expect(tableView.getSelection()).toEqual([[0,0],[0,1]])
+        tableElement.activateCellAtPosition([0,1])
+
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-line')
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-line')
+
+        expect(tableElement.getSelection()).toEqual([[0,0],[0,1]])

   describe 'table-edit:select-to-beginning-of-line', ->
     it 'expands the selection to the beginning of the current row', ->
-      tableView.activateCellAtPosition([0,2])
-
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-line')
-
-      expect(tableView.getSelection()).toEqual([[0,0],[0,2]])
+      tableElement.activateCellAtPosition([0,2])
+
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-line')
+
+      expect(tableElement.getSelection()).toEqual([[0,0],[0,2]])

     describe 'table-edit:select-to-end-of-line', ->
       it 'expands the selection to the end of the current row', ->
-        tableView.activateCellAtPosition([0,1])
-
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-line')
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-line')
-
-        expect(tableView.getSelection()).toEqual([[0,1],[0,2]])
+        tableElement.activateCellAtPosition([0,1])
+
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-line')
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-line')
+
+        expect(tableElement.getSelection()).toEqual([[0,1],[0,2]])

   describe 'table-edit:select-to-end-of-table', ->
     it 'expands the selection to the end of the table', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-table')
-
-      expect(tableView.getSelection()).toEqual([[0,0],[99,0]])
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-table')
+
+      expect(tableElement.getSelection()).toEqual([[0,0],[99,0]])

     it 'scrolls the view to make the added row visible', ->
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-table')
-
-      expect(tableView.body.scrollTop()).not.toEqual(0)
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-table')
+
+      expect(tableElement.body.scrollTop()).not.toEqual(0)

     describe 'then triggering table-edit:select-to-beginning-of-table', ->
       it 'expands the selection to the beginning of the table', ->
-        tableView.activateCellAtPosition([1,0])
-
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-table')
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-table')
-
-        expect(tableView.getSelection()).toEqual([[0,0],[1,0]])
+        tableElement.activateCellAtPosition([1,0])
+
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-table')
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-table')
+
+        expect(tableElement.getSelection()).toEqual([[0,0],[1,0]])

   describe 'table-edit:select-to-beginning-of-table', ->
     it 'expands the selection to the beginning of the table', ->
-      tableView.activateCellAtPosition([2,0])
-
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-table')
-
-      expect(tableView.getSelection()).toEqual([[0,0],[2,0]])
+      tableElement.activateCellAtPosition([2,0])
+
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-table')
+
+      expect(tableElement.getSelection()).toEqual([[0,0],[2,0]])

     it 'scrolls the view to make the added row visible', ->
-      tableView.activateCellAtPosition([99,0])
-
-      atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-table')
-
-      expect(tableView.body.scrollTop()).toEqual(0)
+      tableElement.activateCellAtPosition([99,0])
+
+      atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-table')
+
+      expect(tableElement.body.scrollTop()).toEqual(0)

     describe 'table-edit:select-to-end-of-table', ->
       it 'expands the selection to the end of the table', ->
-        tableView.activateCellAtPosition([1,0])
-
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-beginning-of-table')
-        atom.commands.dispatch(tableView.element, 'table-edit:select-to-end-of-table')
-
-        expect(tableView.getSelection()).toEqual([[1,0],[99,0]])
+        tableElement.activateCellAtPosition([1,0])
+
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-beginning-of-table')
+        atom.commands.dispatch(tableElement.element, 'table-edit:select-to-end-of-table')
+
+        expect(tableElement.getSelection()).toEqual([[1,0],[99,0]])

   describe 'dragging the mouse pressed over cell', ->
     it 'creates a selection with the cells from the mouse movements', ->
-      startCell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(1)')
-      endCell = tableView.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(3)')
+      startCell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(1)')
+      endCell = tableElement.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(3)')

       mousedown(startCell)
       mousemove(endCell)

-      expect(tableView.getSelection()).toEqual([[3,0],[6,2]])
+      expect(tableElement.getSelection()).toEqual([[3,0],[6,2]])

       mousedown(endCell)
       mousemove(startCell)

-      expect(tableView.getSelection()).toEqual([[3,0],[6,2]])
+      expect(tableElement.getSelection()).toEqual([[3,0],[6,2]])

     it 'scrolls the view when the selection reach the last row', ->
-      startCell = tableView.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(1)')
-      endCell = tableView.find('.table-edit-row:nth-child(10) .table-edit-cell:nth-child(3)')
+      startCell = tableElement.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(1)')
+      endCell = tableElement.find('.table-edit-row:nth-child(10) .table-edit-cell:nth-child(3)')

       mousedown(startCell)
       mousemove(endCell)

-      expect(tableView.body.scrollTop()).toBeGreaterThan(0)
+      expect(tableElement.body.scrollTop()).toBeGreaterThan(0)

     it 'scrolls the view when the selection reach the first row', ->
-      tableView.scrollTop(300)
+      tableElement.scrollTop(300)
       nextAnimationFrame()

-      startCell = tableView.find('.table-edit-row:nth-child(12) .table-edit-cell:nth-child(1)')
-      endCell = tableView.find('.table-edit-row:nth-child(9) .table-edit-cell:nth-child(3)')
+      startCell = tableElement.find('.table-edit-row:nth-child(12) .table-edit-cell:nth-child(1)')
+      endCell = tableElement.find('.table-edit-row:nth-child(9) .table-edit-cell:nth-child(3)')

       mousedown(startCell)
       mousemove(endCell)

-      expect(tableView.body.scrollTop()).toBeLessThan(300)
+      expect(tableElement.body.scrollTop()).toBeLessThan(300)

   describe 'when the columns widths have been changed', ->
     beforeEach ->
-      tableView.setColumnsWidths([0.1, 0.1, 0.8])
+      tableElement.setColumnsWidths([0.1, 0.1, 0.8])
       nextAnimationFrame()

     it 'creates a selection with the cells from the mouse movements', ->
-      startCell = tableView.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(1)')
-      endCell = tableView.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(2)')
+      startCell = tableElement.find('.table-edit-row:nth-child(4) .table-edit-cell:nth-child(1)')
+      endCell = tableElement.find('.table-edit-row:nth-child(7) .table-edit-cell:nth-child(2)')

       mousedown(startCell)
       mousemove(endCell)

-      expect(tableView.getSelection()).toEqual([[3,0],[6,1]])
+      expect(tableElement.getSelection()).toEqual([[3,0],[6,1]])

   describe 'dragging the selection box handle', ->
     [handle, handleOffset] = []

     beforeEach ->
-      tableView.setSelection([[2,0],[2,1]])
+      tableElement.setSelection([[2,0],[2,1]])
       nextAnimationFrame()
-      handle = tableView.find('.selection-box-handle')
+      handle = tableElement.find('.selection-box-handle')

       mousedown(handle)

@@ -1807,7 +1807,7 @@
         mousemove(handle, handleOffset.left + 50, handleOffset.top + 2)

       it 'expands the selection to the right', ->
-        expect(tableView.getSelection()).toEqual([[2,0],[2,2]])
+        expect(tableElement.getSelection()).toEqual([[2,0],[2,2]])

   #     ######   #######  ########  ######## #### ##    ##  ######
   #    ##    ## ##     ## ##     ##    ##     ##  ###   ## ##    ##
@@ -1820,56 +1820,56 @@
   describe 'sorting', ->
     describe 'when a column have been set as the table order', ->
       beforeEach ->
-        tableView.sortBy 'value', -1
+        tableElement.sortBy 'value', -1
         nextAnimationFrame()

       it 'sorts the rows accordingly', ->
-        expect(tableView.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row99')
+        expect(tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row99')

       it 'leaves the active cell position as it was before', ->
-        expect(tableView.activeCellPosition).toEqual([0,0])
-        expect(tableView.getActiveCell()).toEqual(table.cellAtPosition([99,0]))
+        expect(tableElement.activeCellPosition).toEqual([0,0])
+        expect(tableElement.getActiveCell()).toEqual(table.cellAtPosition([99,0]))

       it 'sets the proper height on the table rows container', ->
-        expect(tableView.find('.table-edit-rows').height()).toEqual(2000)
+        expect(tableElement.find('.table-edit-rows').height()).toEqual(2000)

       it 'decorates the table cells with a class', ->
-        expect(tableView.find('.table-edit-cell.order').length).toBeGreaterThan(1)
+        expect(tableElement.find('.table-edit-cell.order').length).toBeGreaterThan(1)

       it 'decorates the table header cell with a class', ->
-        expect(tableView.find('.table-edit-header-cell.order.descending').length).toEqual(1)
-
-        tableView.toggleSortDirection()
+        expect(tableElement.find('.table-edit-header-cell.order.descending').length).toEqual(1)
+
+        tableElement.toggleSortDirection()
         nextAnimationFrame()

-        expect(tableView.find('.table-edit-header-cell.order.ascending').length).toEqual(1)
+        expect(tableElement.find('.table-edit-header-cell.order.ascending').length).toEqual(1)

       describe 'opening an editor', ->
         beforeEach ->
-          tableView.startCellEdit()
+          tableElement.startCellEdit()

         it 'opens the editor at the cell position', ->
-          editorOffset = tableView.find('atom-text-editor').offset()
-          cellOffset = tableView.find('.table-edit-row:first-child .table-edit-cell:first-child').offset()
+          editorOffset = tableElement.find('atom-text-editor').offset()
+          cellOffset = tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child').offset()

           expect(editorOffset.top).toBeCloseTo(cellOffset.top, -1)
           expect(editorOffset.left).toBeCloseTo(cellOffset.left, -1)

       describe '::toggleSortDirection', ->
         it 'changes the direction of the table sort', ->
-          tableView.toggleSortDirection()
+          tableElement.toggleSortDirection()
           nextAnimationFrame()

-          expect(tableView.direction).toEqual(1)
-          expect(tableView.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row0')
+          expect(tableElement.direction).toEqual(1)
+          expect(tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row0')

       describe '::resetSort', ->
         beforeEach ->
-          tableView.resetSort()
+          tableElement.resetSort()
           nextAnimationFrame()

         it 'clears the value for table order', ->
-          expect(tableView.order).toBeNull()
+          expect(tableElement.order).toBeNull()

         it 'reorder the table in its initial order', ->
-          expect(tableView.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row0')
+          expect(tableElement.find('.table-edit-row:first-child .table-edit-cell:first-child').text()).toEqual('row0')