Improved rendering of tables.

app/assets/javascripts/app/controllers/_application_controller_table.coffee

@@ -117,6 +117,7 @@ class App.ControllerTable extends App.Controller
   columnsLength: undefined
   headers: undefined
   headerWidth: {}
+  maxShown: 150
 
   currentRows: []
 
@@ -141,7 +142,6 @@ class App.ControllerTable extends App.Controller
     @overviewAttributes ||= @overview || @model.configure_overview || []
     @attributesListRaw ||= @attribute_list || @model.configure_attributes || {}
     @attributesList = App.Model.attributesGet(false, @attributesListRaw)
-    console.log('Table', @overviewAttributes, @overview)
     #@setHeaderWidths = App.Model.setHeaderWidthsGet(false, @attributesList)
     @destroy    = @model.configure_delete
 
@@ -168,16 +168,18 @@ class App.ControllerTable extends App.Controller
     $(window).off 'resize.table', @onResize
 
   update: (params) =>
-    console.log('params', params)
+    if params.sync is true
       for key, value of params
         @[key] = value
-
-    if params.sync is true
       return @render()
-    @renderQueue()
+    @renderQueue(params)
 
-  renderQueue: =>
+  renderQueue: (params) =>
-    App.QueueManager.add('tableRender', @render)
+    localeRender = =>
+      for key, value of params
+        @[key] = value
+      @render()
+    App.QueueManager.add('tableRender', localeRender)
     App.QueueManager.run('tableRender')
 
   render: =>
@@ -214,8 +216,12 @@ class App.ControllerTable extends App.Controller
       removedRows = _.difference(@currentRows, newRows)
       addedRows = _.difference(newRows, @currentRows)
 
+      #console.log('newRows', newRows)
+      #console.log('removedRows', removedRows)
+      #console.log('addedRows', addedRows)
+
       # if only rows are removed
-      if _.isEmpty(addedRows) && !_.isEmpty(removedRows) && removedRows.length < 15 && !_.isEmpty(newRows)
+      if (!_.isEmpty(addedRows) || !_.isEmpty(removedRows)) && addedRows.length < 10 && removedRows.length < 15 && removedRows.length < newRows.length && !_.isEmpty(newRows)
         newCurrentRows = []
         removePositions = []
         for position in [0..@currentRows.length-1]
@@ -223,14 +229,24 @@ class App.ControllerTable extends App.Controller
             removePositions.push position
           else
             newCurrentRows.push @currentRows[position]
+        addPositions = []
+        for position in [0..newRows.length-1]
+          if _.contains(addedRows, newRows[position])
+            addPositions.push position
+            newCurrentRows.splice(position,0,newRows[position])
 
         # check if order is still correct
         if @_isSame(newRows, newCurrentRows) is true
           for position in removePositions.reverse()
             @$("tbody > tr:nth-child(#{position+1})").remove()
+          for position in addPositions
+            if position is 0
+              @$('tbody').append(newCurrentRows[position])
+            else
+              @$("tbody > tr:nth-child(#{position})").after(newCurrentRows[position])
           @currentRows = newCurrentRows
-          console.log('fullRender.contentRemoved', removePositions)
+          console.log('fullRender.contentRemoved', removePositions, addPositions)
-          return ['fullRender.contentRemoved', removePositions]
+          return ['fullRender.contentRemoved', removePositions, addPositions]
 
       if newRows.length isnt @currentRows.length
         result = ['fullRender.lenghtChanged', @currentRows.length, newRows.length]
@@ -254,7 +270,7 @@ class App.ControllerTable extends App.Controller
     )
 
   renderTableFull: (rows) =>
-    console.log('renderTableFull', @orderBy, @orderDirection)
+    console.log('renderTableFull', @orderBy, @orderDirection, @objects)
     @tableHeaders()
     @sortList()
     bulkIds = @getBulkSelected()
@@ -408,7 +424,9 @@ class App.ControllerTable extends App.Controller
       columnsLength++
     groupLast = ''
     tableBody = []
-    for object in @objects
+    objectsToShow = @objects.slice(0, @maxShown)
+    for object in objectsToShow
+      if object
         position++
         if @groupBy
           groupByName = App.viewPrint(object, @groupBy, @attributesList)
@@ -552,6 +570,12 @@ class App.ControllerTable extends App.Controller
           localObjects = _.sortBy(
             @objects
             (item) ->
+
+              # error handling
+              if !item
+                console.log('Got empty object in order by with header _.sortBy')
+                return ''
+
               # if we need to sort translated col.
               if header.translate
                 return App.i18n.translateInline(item[header.name])
@@ -586,6 +610,12 @@ class App.ControllerTable extends App.Controller
             localObjects = _.sortBy(
               @objects
               (item) ->
+
+                # error handling
+                if !item
+                  console.log('Got empty object in order by in attribute _.sortBy')
+                  return ''
+
                 # if we need to sort translated col.
                 if attribute.translate
                   return App.i18n.translateInline(item[attribute.name])

public/assets/tests/table_extended.js

@@ -152,9 +152,10 @@ test('table new - initial list', function() {
   ], {clear: true})
 
   result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
-  equal(result[0], 'fullRender.lenghtChanged')
+  equal(result[0], 'fullRender.contentRemoved')
-  equal(result[1], 2)
+  equal(result[1][0], undefined)
-  equal(result[2], 3)
+  equal(result[2][0], 2)
+  equal(result[2][1], undefined)
 
   equal(el.find('table > thead > tr').length, 1, 'row count')
   equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
@@ -231,8 +232,9 @@ test('table new - initial list', function() {
 
   result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
   equal(result[0], 'fullRender.contentRemoved')
-  equal(result[1], 1)
+  equal(result[1][0], 1)
-  notOk(result[2])
+  equal(result[1][1], undefined)
+  notOk(result[1][1])
 
   equal(el.find('table > thead > tr').length, 1, 'row count')
   equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
@@ -312,7 +314,6 @@ test('table new - initial list', function() {
   equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig', 'check row 1')
   equal(el.find('tbody > tr:nth-child(3) > td').length, 0, 'check row 3')
 
-
   $('#table').append('<hr><h1>table group by with data</h1><div id="table-new2"></div>')
   var el = $('#table-new2')
 
@@ -435,7 +436,11 @@ test('table new - initial list', function() {
   ], {clear: true})
 
   result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
-  equal(result[0], 'fullRender.lenghtChanged')
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], undefined)
+  equal(result[2][0], 3)
+  equal(result[2][1], 4)
+  equal(result[2][2], undefined)
 
   equal(el.find('table > thead > tr').length, 1, 'row count')
   equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
@@ -458,4 +463,585 @@ test('table new - initial list', function() {
   equal(el.find('tbody > tr:nth-child(5) > td:nth-child(3)').text().trim(), 'true', 'check row 5')
   equal(el.find('tbody > tr:nth-child(6) > td').length, 0, 'check row 6')
 
+  App.TicketPriority.refresh([
+    {
+      id:         1,
+      name:       '1 low',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+    {
+      id:         3,
+      name:       '3 high',
+      note:       'some other note',
+      active:     true,
+      created_at: '2014-06-10T10:17:38.000Z',
+    },
+    {
+      id:         4,
+      name:       '4 high',
+      note:       'some other note',
+      active:     true,
+      created_at: '2014-06-10T10:17:39.000Z',
+    },
+    {
+      id:         5,
+      name:       '5 high',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:39.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], undefined)
+  equal(result[2][0], 3)
+  equal(result[2][1], 6)
+  equal(result[2][2], undefined)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 1, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), 'some note', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '2 normal', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(4) > td').length, 3, 'check row 4')
+  equal(el.find('tbody > tr:nth-child(4) > td:first').text().trim(), '5 high', 'check row 4')
+  equal(el.find('tbody > tr:nth-child(4) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 4')
+  equal(el.find('tbody > tr:nth-child(4) > td:nth-child(3)').text().trim(), 'true', 'check row 4')
+  equal(el.find('tbody > tr:nth-child(5) > td').length, 1, 'check row 5')
+  equal(el.find('tbody > tr:nth-child(5) > td:first').text().trim(), 'some other note', 'check row 5')
+  equal(el.find('tbody > tr:nth-child(6) > td:first').text().trim(), '3 hoch', 'check row 6')
+  equal(el.find('tbody > tr:nth-child(6) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 6')
+  equal(el.find('tbody > tr:nth-child(6) > td:nth-child(3)').text().trim(), 'true', 'check row 6')
+  equal(el.find('tbody > tr:nth-child(7) > td').length, 3, 'check row 7')
+  equal(el.find('tbody > tr:nth-child(7) > td:first').text().trim(), '4 high', 'check row 7')
+  equal(el.find('tbody > tr:nth-child(7) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 7')
+  equal(el.find('tbody > tr:nth-child(7) > td:nth-child(3)').text().trim(), 'true', 'check row 7')
+  equal(el.find('tbody > tr:nth-child(8) > td').length, 0, 'check row 8')
+
+  $('#table').append('<hr><h1>table with large data</h1><div id="table-new3"></div>')
+  var el = $('#table-new3')
+
+  var objects = [];
+  var created_at = Date.parse('2014-06-10T11:17:34.000Z')
+
+  for (i = 0; i < 1000; i++) {
+    local_created_at = new Date(created_at - (1000 * 60 * 60 * 24 * i)).toISOString()
+    item = {
+      id:         i,
+      name:       i + ' prio',
+      note:       'some note',
+      active:     true,
+      created_at: local_created_at,
+    }
+    objects.push(item)
+  }
+
+  App.TicketPriority.refresh(objects.reverse(), {clear: true})
+
+  var table = new App.ControllerTable({
+    tableId:            'large_table_test',
+    el:                 el,
+    overviewAttributes: ['name', 'created_at', 'active'],
+    model:              App.TicketPriority,
+    objects:            App.TicketPriority.all(),
+    checkbox:           false,
+    radio:              false,
+    ttt: true
+  })
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '999 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '998 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0)
+  el.find('.js-tableHead[data-column-key="name"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '0 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '09.06.2014', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '10 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '31.05.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-up').length, 1)
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-down').length, 0)
+  el.find('.js-tableHead[data-column-key="name"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '999 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '998 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-down').length, 1)
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-up').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon').length, 0)
+  el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '999 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '998 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 1)
+  el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '0 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '09.06.2014', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '2 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '08.06.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 1)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 0)
+
+  objects = App.TicketPriority.all().reverse()
+  objects.shift()
+  objects.shift()
+
+  result = table.update({sync: true, objects: objects})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], 1)
+  equal(result[1][1], 0)
+  equal(result[2][0], 148)
+  equal(result[2][1], 149)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '08.06.2014', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '3 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '07.06.2014', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '4 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '06.06.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:first').text().trim(), '150 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:nth-child(2)').text().trim(), '11.01.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:first').text().trim(), '151 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:nth-child(2)').text().trim(), '10.01.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 1)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 0)
+  el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '999 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '998 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 0)
+  equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 1)
+
+  el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click()
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 prio', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '08.06.2014', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '3 prio', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '07.06.2014', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3, 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '4 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '06.06.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:first').text().trim(), '150 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:nth-child(2)').text().trim(), '11.01.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(149) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:first').text().trim(), '151 prio', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:nth-child(2)').text().trim(), '10.01.2014', 'check row 3')
+  equal(el.find('tbody > tr:nth-child(150) > td:nth-child(3)').text().trim(), 'true', 'check row 3')
+  equal(el.find('tbody > tr').length, 150)
+  equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
+
+  $('#table').append('<hr><h1>table with now data</h1><div id="table-new4"></div>')
+  var el = $('#table-new4')
+
+  App.TicketPriority.refresh([
+    {
+      id:         1,
+      name:       '1 low',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ], {clear: true})
+
+  var table = new App.ControllerTable({
+    el:                 el,
+    overviewAttributes: ['name', 'created_at', 'active'],
+    model:              App.TicketPriority,
+    objects:            App.TicketPriority.search({sortBy:'name', order: 'ASC'}),
+    checkbox:           false,
+    radio:              false,
+  })
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         1,
+      name:       '1 low',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], undefined)
+  equal(result[2][0], 1)
+  equal(result[2][1], undefined)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         1,
+      name:       '1 low',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+    {
+      id:         3,
+      name:       '3 high',
+      note:       'some note 3',
+      active:     true,
+      created_at: '2014-06-10T10:17:38.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], undefined)
+  equal(result[2][0], 2)
+  equal(result[2][1], undefined)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '3 hoch')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(4) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         3,
+      name:       '3 high',
+      note:       'some note 3',
+      active:     true,
+      created_at: '2014-06-10T10:17:38.000Z',
+    },
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], 0)
+  equal(result[1][1], undefined)
+  equal(result[2][0], undefined)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '3 hoch')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.lenghtChanged')
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
+
+  App.TicketPriority.refresh([], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'emptyList')
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Keine Einträge', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 0, 'check row 1')
+
+  App.TicketPriority.refresh([
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender')
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         1,
+      name:       '1 low',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.contentRemoved')
+  equal(result[1][0], undefined)
+  equal(result[2][0], 0)
+  equal(result[2][1], undefined)
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(3) > td').length, 0)
+
+  App.TicketPriority.refresh([
+    {
+      id:         2,
+      name:       '2 normal',
+      note:       'some note',
+      active:     true,
+      created_at: '2014-06-10T10:17:30.000Z',
+    },
+  ], {clear: true})
+
+  result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})})
+  equal(result[0], 'fullRender.lenghtChanged')
+
+  equal(el.find('table > thead > tr').length, 1, 'row count')
+  equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  equal(el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal(el.find('tbody > tr:nth-child(1) > td').length, 3)
+  equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014')
+  equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true')
+  equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
 })