table column resize

TODO:
- store resized width with the user settings
- read in stored widths from user settings
- add functionality to disable resizing on certain columns

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

@@ -1,4 +1,5 @@
 class App.ControllerTable extends App.Controller
+
   constructor: (params) ->
     for key, value of params
       @[key] = value
@@ -250,6 +251,9 @@ class App.ControllerTable extends App.Controller
         )
       )
 
+    # enable resize column
+    table.on 'mousedown', '.js-col-resize', @onColResizeMousedown
+
     # enable checkbox bulk selection
     if data.checkbox
 
@@ -259,7 +263,7 @@ class App.ControllerTable extends App.Controller
       )
 
       # bind on full bulk click
-      table.delegate('input[name="bulk_all"]', 'click', (e) ->
+      table.delegate('input[name="bulk_all"]', 'change', (e) ->
         e.stopPropagation()
         if $(e.target).prop('checked')
           $(e.target).parents('table').find('[name="bulk"]').each( ->
@@ -275,4 +279,32 @@ class App.ControllerTable extends App.Controller
           )
       )
 
-    table
+    return table
+
+  onColResizeMousedown: (event) =>
+    @resizeTargetLeft = $(event.currentTarget).parents('th')
+    @resizeTargetRight = @resizeTargetLeft.next()
+    @resizeStartX = event.pageX
+    @resizeLeftStartWidth = @resizeTargetLeft.width()
+    @resizeRightStartWidth = @resizeTargetRight.width()
+
+    $(document).on 'mousemove.resizeCol', @onColResizeMousemove
+    $(document).one 'mouseup', @onColResizeMouseup
+
+  onColResizeMousemove: (event) =>
+    # use pixels while moving for max precision
+    difference = event.pageX - @resizeStartX
+    @resizeTargetLeft.width @resizeLeftStartWidth + difference
+    @resizeTargetRight.width @resizeRightStartWidth - difference
+
+  onColResizeMouseup: =>
+    $(document).off 'mousemove.resizeCol'
+    # switch to percentage
+    resizeBaseWidth = @resizeTargetLeft.parents('table').width()
+    leftPercentage = (@resizeTargetLeft.outerWidth() / resizeBaseWidth) * 100
+    rightPercentage = (@resizeTargetRight.outerWidth() / resizeBaseWidth) * 100
+
+    @resizeTargetLeft.width leftPercentage + '%'
+    @resizeTargetRight.width rightPercentage + '%'
+
+    # save table changed widths

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

@@ -1,4 +1,4 @@
-<table class="table table-hover <% if @class: %><%- @class %><% end %>">
+<table class="table table-hover<%- @class if @class %>">
   <thead>
     <tr>
     <% if @checkbox: %>
@@ -13,15 +13,22 @@
     <% if @radio: %>
       <th style="width: 22px"></th>
     <% end %>
-<% for item in @header: %>
+    <% for item, i in @header: %>
-      <th<% if item.className: %> class="<%= item.className %>"<% end %><% if item.style: %> style="<%= item.style %>"<% end %>>
+      <th<%= " class='#{ item.className }'" if item.className %><%= " style='#{ item.style }'" if item.style %>>
-        <%- @T( item.display ) %>
+        <div class="table-column-title">
-        <% if item.sortOrderIcon: %><%- @Icon(item.sortOrderIcon[0], item.sortOrderIcon[1]) %><% end %>
+          <%- @T( item.display ) %>
+          <% if item.sortOrderIcon: %>
+            <%- @Icon(item.sortOrderIcon[0], item.sortOrderIcon[1]) %>
+          <% end %>
+        </div>
+        <% if i < @header.length - 1: %>
+          <div class="table-col-resize js-col-resize"></div>
+        <% end %>
       </th>
-<% end %>
+    <% end %>
-<% if @destroy: %>
+    <% if @destroy: %>
       <th><%- @T('Delete') %></th>
-<% end %>
+    <% end %>
     </tr>
   </thead>
   <tbody>

app/assets/stylesheets/zammad.scss

@@ -679,7 +679,7 @@ table {
   display: table-row;
 }
 
-.table th:not(.noTruncate),
+.table th:not(.noTruncate) .table-column-title,
 .table td:not(.noTruncate) {
   @extend .u-textTruncate;
 }
@@ -694,6 +694,9 @@ table {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  position: relative;
+  user-select: none;
+  box-sizing: content-box;
 }
 
 .table > tbody > tr > td {
@@ -713,6 +716,25 @@ table {
   background: rgba(0,8,14,.015);
 }
 
+.table-col-resize {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  cursor: col-resize;
+  padding: 10px;
+  margin-right: -10px;
+  z-index: 1;
+  
+  &:after {
+    content: "";
+    display: block;
+    width: 1px;
+    height: 100%;
+    background: hsl(210,7%,85%);
+  }
+}
+
 .table > thead:first-child > tr:first-child > th.no-padding,
 .table > thead > tr > th.no-padding,
 .table > tbody > tr > td.no-padding {