add column breakpoints

app/views/users/show.html.haml

@@ -1,4 +1,5 @@
 %h2= @user.name
+
 %table#transactions.display.responsive.no-wrap{data: { source: user_path(@user) }}
   %thead
     %tr
@@ -7,6 +8,8 @@
       %th Peer
       %th Issuer
       %th Message
+  %tbody
+  %tfoot
     %tr
       %td.bound.input-listen{ 'data-input-type': 'date-range' }
         %input.lower-bound{type: 'date', placeholder: 'after'}
@@ -22,7 +25,6 @@
         %input{type: 'text', placeholder: 'Filter on Peer'}
       %td.input-listen{ 'data-input-type': 'text' }
         %input{type: 'text', placeholder: 'Filter on Message'}
-  %tbody
 
 :javascript
   $(document).ready(function() {
@@ -34,12 +36,13 @@
       ajax: $('#transactions').data('source'),
       pagingType: 'full_numbers',
       autoWidth: false,
+      responsive: true,
       columns: [
-        { data: 'time',    name: 'Time' },
-        { data: 'amount',  name: 'Amount' },
-        { data: 'peer',    name: 'Peer' },
-        { data: 'issuer',  name: 'Issuer' },
-        { data: 'message', name: 'Message' },
+        { data: 'time',    name: 'Time',    className: 'min-tablet-l'},
+        { data: 'amount',  name: 'Amount',  className: 'min-mobile'},
+        { data: 'peer',    name: 'Peer',    className: 'min-mobile'},
+        { data: 'issuer',  name: 'Issuer',  className: 'min-desktop'},
+        { data: 'message', name: 'Message', className: 'min-tablet-p'},
       ]
     });