Improved table api for additional col. like "switch to user" and added unit tests.

app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee

@@ -153,26 +153,19 @@ class App.ControllerGenericIndex extends App.Controller
       menus:   @pageData.menus
     )
 
-    # append additional col. link switch to
-    overview = _.clone( App[ @genericObject ].configure_overview )
-    attributes = _.clone( App[ @genericObject ].configure_attributes )
-    if @pageData.addCol
-      for item in @pageData.addCol.overview
-        overview.push item
-      for item in @pageData.addCol.attributes
-        attributes.push item
-
     # append content table
-    new App.ControllerTable(
+    params = _.extend(
-      el:         @el.find('.table-overview')
+      {
-      model:      App[ @genericObject ]
+        el:         @el.find('.table-overview')
-      objects:    objects
+        model:      App[ @genericObject ]
-      overview:   overview
+        objects:    objects
-      attributes: attributes
+        bindRow:
-      bindRow:
+          events:
-        events:
+            'click': @edit
-          'click': @edit
+      },
+      @pageData.tableExtend
     )
+    new App.ControllerTable(params)
 
   edit: (id, e) =>
     e.preventDefault()

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

@@ -10,29 +10,43 @@ class App.ControllerTable extends App.Controller
 
   ###
 
-    # table simple based on model
+    # table based on model
 
-    rowClick = -> (id, e)
+    rowClick = (id, e) ->
       e.preventDefault()
       console.log('rowClick', id)
-    rowMouseover = -> (id, e)
+    rowMouseover = (id, e) ->
       e.preventDefault()
       console.log('rowMouseover', id)
-    rowMouseout = -> (id, e)
+    rowMouseout = (id, e) ->
       e.preventDefault()
       console.log('rowMouseout', id)
-    rowDblClick = -> (id, e)
+    rowDblClick = (id, e) ->
       e.preventDefault()
       console.log('rowDblClick', id)
 
-    colClick = -> (id, e)
+    colClick = (id, e) ->
       e.preventDefault()
       console.log('colClick', e.target)
 
-    checkboxClick = -> (id, e)
+    checkboxClick = (id, e) ->
       e.preventDefault()
       console.log('checkboxClick', e.target)
 
+    callbackHeader = (header) ->
+      console.log('current header is', header)
+      # add new header item
+      attribute =
+        name: 'some name'
+        display: 'Some Name'
+      header.push attribute
+      console.log('new header is', header)
+
+    callbackAttributes = (value, object, attribute, header, refObject) ->
+      console.log('data of item col', value, object, attribute, header, refObject)
+      value = 'New Data To Show'
+      value
+
     new App.ControllerTable(
       overview: ['host', 'user', 'adapter', 'active']
       model:    App.Channel
@@ -56,6 +70,11 @@ class App.ControllerTable extends App.Controller
           'mouseover':  rowMouseover
           'mouseout':   rowMouseout
           'dblclick':   rowDblClick
+      callbackHeader:   callbackHeader
+      callbackAttributes:
+        attributeName: [
+          callbackAttributes
+        ]
     )
   ###
 
@@ -119,6 +138,10 @@ class App.ControllerTable extends App.Controller
             headerFound = true
             header.push attribute
 
+    # execute header callback
+    if data.callbackHeader
+      header = data.callbackHeader(header)
+
     # get content
     @log 'debug', 'table', 'header', header, 'overview', 'objects', data.objects
     table = App.view('generic/table')(
@@ -158,8 +181,8 @@ class App.ControllerTable extends App.Controller
             for event, callback of item.events
               do (table, event, callback) =>
                 if cursorMap[event]
-                  table.find("tbody > tr > td:nth-child(#{position}) > span").css( 'cursor', cursorMap[event] )
+                  table.find("tbody > tr > td:nth-child(#{position}) span").css( 'cursor', cursorMap[event] )
-                table.on( event, "tbody > tr > td:nth-child(#{position}) > span",
+                table.on( event, "tbody > tr > td:nth-child(#{position}) span",
                   (e) =>
                     e.stopPropagation()
                     id = $(e.target).parents('tr').data('id')
@@ -205,6 +228,14 @@ class App.ControllerTable extends App.Controller
 
     # enable checkbox bulk selection
     if data.checkbox
+
+      # click first tr>td, click checkbox / improve usability
+      table.delegate('tr > td:nth-child(1)', event, (e) ->
+        e.stopPropagation()
+        $(e.target).find('[name="bulk"]').click()
+      )
+
+      # bind on full bulk click
       table.delegate('input[name="bulk_all"]', 'click', (e) ->
         e.stopPropagation()
         if $(e.target).prop('checked')

app/assets/javascripts/app/controllers/ticket_overview.js.coffee

@@ -189,14 +189,15 @@ class Table extends App.ControllerContent
         @navigate ticket.uiUrl()
       callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) =>
         attribute.title = object.title
+        value
       callbackLinkToTicket = (value, object, attribute, attributes, refObject) =>
         attribute.link = object.uiUrl()
-      callbackResetLink = (value, object, attribute, attributes, refObject) =>
+        value
-        attribute.link = undefined
       callbackUserPopover = (value, object, attribute, attributes, refObject) =>
         attribute.class = 'user-popover'
         attribute.data =
           id: refObject.id
+        value
       callbackCheckbox = (id, checked, e) =>
         if @el.find('table').find('input[name="bulk"]:checked').length == 0
           @el.find('.bulk-action').addClass('hide')
@@ -219,9 +220,9 @@ class Table extends App.ControllerContent
         #      'mouseover': popOver
         callbackAttributes:
           customer_id:
-            [ callbackResetLink, callbackUserPopover ]
+            [ callbackUserPopover ]
           owner_id:
-            [ callbackResetLink, callbackUserPopover ]
+            [ callbackUserPopover ]
           title:
             [ callbackLinkToTicket, callbackTicketTitleAdd ]
           number:

app/assets/javascripts/app/controllers/users.js.coffee

@@ -5,6 +5,27 @@ class Index extends App.Controller
     # check authentication
     return if !@authenticate()
 
+    callbackHeader = (header) ->
+      attribute =
+        name:       'switch_to'
+        display:    'Switch to'
+        translation: true
+      header.push attribute
+      header
+
+    callbackAttributes = (value, object, attribute, header, refObject) ->
+      value = ' '
+      attribute.class  = 'glyphicon glyphicon-user'
+      attribute.link   = '#'
+      attribute.title  = App.i18n.translateInline('Switch to')
+      value
+
+    switchTo = (id,e) =>
+      e.preventDefault()
+      @disconnectClient()
+      App.Auth._logout()
+      window.location = App.Config.get('api_path') + '/sessions/switch/' + id
+
     new App.ControllerGenericIndex(
       el: @el
       id: @id
@@ -21,26 +42,18 @@ class Index extends App.Controller
           'Users are for any person in the system. Agents (Owners, Resposbiles, ...) and Customers.'
         ]
         buttons: [
-#          { name: 'List', 'data-type': '', class: 'active' },
           { name: 'New User', 'data-type': 'new', class: 'primary' }
         ]
-        addCol:
+        tableExtend:
-          overview: ['switch_to']
+          callbackHeader:   callbackHeader
-          attributes: [
+          callbackAttributes:
-            {
+            switch_to: [
-              name:     'switch_to'
+              callbackAttributes
-              display:  'Switch to'
+            ]
-              type:     'link'
+          bindCol:
-              class:    'glyphicon glyphicon-user'
+            switch_to:
-              dataType: 'switch_to'
+              events:
-              callback: (e) =>
+                'click': switchTo
-                e.preventDefault()
-                user_id = $(e.target).parent().parent().data('id')
-                @disconnectClient()
-                App.Auth._logout()
-                window.location = App.Config.get('api_path') + '/sessions/switch/' + user_id
-            }
-          ]
     )
 
 App.Config.set( 'User', { prio: 1000, name: 'Users', parent: '#manage', target: '#manage/users', controller: Index, role: ['Admin'] }, 'NavBarAdmin' )

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -71,7 +71,7 @@
       <%   for attribute, callbacksAll of @callbacks: %>
       <%     if attribute is item.name || attribute is item_id: %>
       <%       for callback in callbacksAll: %>
-      <%         callback( value, object, item_clone, @header, refObject ) %>
+      <%         value = callback( value, object, item_clone, @header, refObject ) %>
       <%       end %>
       <%     end %>
       <%   end %>

public/assets/tests/table.js

@@ -0,0 +1,505 @@
+// form
+test( "table test", function() {
+  App.i18n.set('de')
+
+  $('#table').append('<hr><h1>table simple I</h1><div id="table1"></div>')
+  var el = $('#table1')
+  App.TicketPriority.refresh( [
+    {
+      id:   1,
+      name: '1 low',
+      note: 'some note 1',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   2,
+      name: '2 normal',
+      note: 'some note 2',
+      active: false,
+      created_at: '2014-06-10T10:17:34.000Z',
+    },
+  ] )
+  var rowClick = function (id, e) {
+    e.preventDefault()
+    console.log('rowClick', id, e.target)
+  };
+  var rowDblClick = function (id, e) {
+    e.preventDefault()
+    console.log('rowDblClick', id, e.target)
+  };
+  var rowMouseover = function (id, e) {
+    e.preventDefault()
+    console.log('rowMouseover', id, e.target)
+  };
+  var rowMouseout = function (id, e) {
+    e.preventDefault()
+    console.log('rowMouseout', id, e.target)
+  };
+  var colClick = function (id, e) {
+    e.preventDefault()
+    console.log('colClick', id, e.target)
+  };
+  var colDblClick = function (id, e) {
+    e.preventDefault()
+    console.log('colDblClick', id, e.target)
+  };
+  var colMouseover = function (id, e) {
+    e.preventDefault()
+    console.log('colMouseover', id, e.target)
+  };
+  var colMouseout = function (id, e) {
+    e.preventDefault()
+    console.log('colMouseout', id, e.target)
+  };
+
+  new App.ControllerTable({
+    el:       el,
+    overview: ['name', 'created_at', 'active'],
+    model:    App.TicketPriority,
+    objects:  App.TicketPriority.search({sortBy:'name', order: 'ASC'}),
+    checkbox: false,
+    radio:    false,
+    bindRow: {
+      events: {
+        'click':      rowClick,
+        'mouseover':  rowMouseover,
+        'mouseout':   rowMouseout,
+        'dblclick':   rowDblClick,
+      }
+    },
+    bindCol: {
+      name: {
+        events: {
+          'click':      colClick,
+          'mouseover':  colMouseover,
+          'mouseout':   colMouseout,
+          'dblclick':   colDblClick,
+        }
+      },
+      created_at: {
+        events: {
+          'mouseover':  colMouseover,
+          'mouseout':   colMouseout,
+        }
+      }
+    },
+  })
+  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(), '1 niedrig', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', '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(), '2 normal', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'false', 'check row 2')
+
+  $('#table').append('<hr><h1>table simple II</h1><div id="table2"></div>')
+  el = $('#table2')
+  new App.ControllerTable({
+    el:       el,
+    overview: ['name', 'created_at', 'active'],
+    model:    App.TicketPriority,
+    objects:  App.TicketPriority.search({sortBy:'name', order: 'DESC'}),
+    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(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(), '?', '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(1) > td').length, 3, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
+
+  $('#table').append('<hr><h1>table simple III</h1><div id="table3"></div>')
+  el = $('#table3')
+  new App.ControllerTable({
+    el:       el,
+    model:    App.TicketPriority,
+    objects:  App.TicketPriority.search({sortBy:'created_at', order: 'DESC'}),
+    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')
+  notEqual( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
+  notEqual( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
+  equal( el.find('tbody > tr:nth-child(2) > td').length, 1, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal', 'check row 2')
+  notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
+  notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
+  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(), '1 niedrig', 'check row 1')
+  notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
+  notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
+
+
+
+  App.Group.refresh( [
+    {
+      id:   1,
+      name: 'group 1',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   2,
+      name: 'group 2',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ])
+  App.User.refresh( [
+    {
+      id:   55,
+      login: 'login55',
+      firstname: 'firstname55',
+      lastname: 'lastname55',
+      email: 'email55',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   56,
+      login: 'login56',
+      firstname: 'firstname56',
+      lastname: 'lastname56',
+      email: 'email56',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ])
+
+  App.TicketState.refresh( [
+    {
+      id:   1,
+      name: 'new',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   2,
+      name: 'open',
+      note: 'some note 2',
+      active: false,
+      created_at: '2014-06-10T10:17:34.000Z',
+    },
+  ])
+  App.Ticket.refresh( [
+    {
+      id:   1,
+      title:  'some title 1',
+      number: '4711',
+      priority_id: 1,
+      owner_id: 55,
+      customer_id: 56,
+      state_id: 1,
+      group_id: 2,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   3,
+      title:  'some title 3',
+      number: '4713',
+      priority_id: 2,
+      owner_id: 56,
+      state_id: 1,
+      group_id: 2,
+      created_at: '2014-07-11T11:19:34.000Z',
+    },
+    {
+      id:   2,
+      title:  'some title 2',
+      number: '4712',
+      priority_id: 1,
+      state_id: 2,
+      group_id: 1,
+      created_at: '2014-06-10T11:19:34.000Z',
+    },
+  ])
+  $('#table').append('<hr><h1>table complex I</h1><div id="table4"></div>')
+  el = $('#table4')
+  new App.ControllerTable({
+    el:       el,
+    overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
+    model:    App.Ticket,
+    objects:  App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
+    checkbox: true,
+  })
+  equal( el.find('table > thead > tr').length, 1, 'row count')
+  equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Gruppe', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Status', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(9)').text().trim(), 'Erstellt', 'check header')
+  equal( el.find('tbody > tr:nth-child(1) > td').length, 9, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) > input').val(), '3', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), '', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), '', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '4713', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(6)').text().trim(), '2 normal', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(7)').text().trim(), 'group 2', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(8)').text().trim(), 'neu', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(9)').text().trim(), '?', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(2) > td').length, 9, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) > input').val(), '2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'group 1', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), 'offen', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(9)').text().trim(), '?', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(3) > td').length, 9, 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) > input').val(), '1', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), '', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), '', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '4711', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'some title 1', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(4)').text().trim(), 'firstname55 lastname55', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(5)').text().trim(), 'firstname56 lastname56', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(7)').text().trim(), 'group 2', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(8)').text().trim(), 'neu', 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(9)').text().trim(), '?', 'check row 3')
+
+  el.find('input[name="bulk_all"]').click()
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), true, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) > input').val(), '3', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), true, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) > input').val(), '2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), true, 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) > input').val(), '1', 'check row 3')
+
+  $('#table').append('<hr><h1>table complex II</h1><div id="table5"></div>')
+  el = $('#table5')
+  var clickCheckbox = function (id, checked, e) {
+    console.log('clickCheckbox', id, checked, e.target)
+  };
+  new App.ControllerTable({
+    el:       el,
+    overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
+    model:    App.Ticket,
+    objects:  App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
+    checkbox: true,
+    groupBy:  'group',
+    bindCheckbox: {
+      events: {
+        'click':  clickCheckbox,
+      }
+    },
+  })
+  equal( el.find('table > thead > tr').length, 1, 'row count')
+  equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Status', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Erstellt', '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:nth-child(1)').text().trim(), 'group 1', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(2) > td').length, 8, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'offen', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), '?', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(3) > td').length, 1, 'check row 3')
+  equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), 'group 2', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td').length, 8, 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), '', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1)').text().trim(), '', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(2)').text().trim(), '4713', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(5)').text().trim(), '-', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(6)').text().trim(), '2 normal', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(7)').text().trim(), 'neu', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(8)').text().trim(), '?', 'check row 4')
+
+  el.find('input[name="bulk"]:eq(1)').click()
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), true, 'check row 4')
+  equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
+  equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), '', 'check row 5')
+  equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
+  el.find('tbody > tr:nth-child(5) > td:nth-child(1)').click()
+  equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), true, 'check row 5')
+  equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
+});
+
+test( "table test 2", function() {
+  App.i18n.set('de')
+
+  $('#table').append('<hr><h1>table with hash</h1><div id="table-hash1"></div>')
+  var el = $('#table-hash1')
+  App.Group.refresh( [
+    {
+      id:   5,
+      name: 'group 5',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ])
+  App.Channel.refresh( [
+    {
+      id:      1,
+      adapter: 'adapter1',
+      options: {
+        host: 'host1',
+        user: 'user1',
+      },
+      group_id: 5,
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:      2,
+      adapter: 'adapter2',
+      options: {
+        host: 'host2',
+        user: 'user2',
+      },
+      group_id: 5,
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ] )
+  new App.ControllerTable({
+    el:       el,
+    overview: ['adapter', 'options::host', 'options::user', 'active'],
+    model:    App.Channel,
+    objects:  App.Channel.search({sortBy:'adapter', order: 'ASC'}),
+  })
+  equal( el.find('table > thead > tr').length, 1, 'row count')
+  equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Typ', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Host', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Benutzer', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Aktiv', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Löschen', 'check header')
+  equal( el.find('tbody > tr:nth-child(1) > td').length, 5, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'adapter1', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'host1', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'user1', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'true', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'true', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(2) > td').length, 5, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), 'adapter2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'host2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'user2', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), 'true', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '', 'check row 2')
+});
+
+test( "table test 3", function() {
+  App.i18n.set('de')
+
+  $('#table').append('<hr><h1>table with link</h1><div id="table-link1"></div>')
+  var el = $('#table-link1')
+  App.EmailAddress.refresh( [
+    {
+      id:   55,
+      realname: 'realname 55',
+      email:    'email 55',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+    {
+      id:   56,
+      realname: 'realname 56',
+      email:    'email 56',
+      active: true,
+      created_at: '2014-06-10T11:17:34.000Z',
+    },
+  ])
+  var callbackHeader = function (header) {
+    console.log('current header is', header);
+    // add new header item
+    var attribute = {
+      name: 'some name',
+      display: 'Some Name',
+    };
+    header.push(attribute);
+    console.log('new header is', header);
+    return header
+  }
+  var callbackAttributes = function(value, object, attribute, header, refObject) {
+    console.log('data of item col', value, object, attribute, header, refObject)
+    value = ' '
+    attribute.class = 'glyphicon glyphicon-user'
+    attribute.link  = '#'
+    attribute.title  = App.i18n.translateInline('Switch to')
+    return value
+  }
+  var switchTo = function(id, e) {
+    e.preventDefault()
+    console.log('switchTo with id', id, e.target)
+    //@disconnectClient()
+    //App.Auth._logout()
+    //window.location = App.Config.get('api_path') + '/sessions/switch/' + id
+  }
+  new App.ControllerTable({
+    el:       el,
+    model:    App.EmailAddress,
+    objects:  App.EmailAddress.search({sortBy:'realname', order: 'ASC'}),
+    callbackHeader: callbackHeader,
+    callbackAttributes: {
+      'some name': [ callbackAttributes ]
+    },
+    bindCol: {
+      'some name': {
+         events: {
+           'click': switchTo,
+         }
+      },
+    },
+  })
+  equal( el.find('table > thead > tr').length, 1, 'row count')
+  equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Realname', 'check header')
+  equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Some Name', '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:nth-child(1)').text().trim(), 'realname 55', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'email 55', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), '', 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 1')
+  equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').attr('title'), 'Switch to', '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:nth-child(1)').text().trim(), 'realname 56', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'email 56', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), '', 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 2')
+  equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').attr('title'), 'Switch to', 'check row 2')
+
+});