table.erb in voom-presenters-2.0.0

- old
+ new
@@ -1,15 +1,28 @@
-<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
-  <% if comp.header %>
-    <thead>
-      <%= erb :"components/table/header", :locals => {:row=> comp.header} %>
-    </thead>
-  <% end %>
-  <tbody>
-      <% comp.rows.each do |row| %>
-        <%= erb :"components/table/row", :locals => {:row=> row} %>
-      <% end %>
-  </tbody>
-</table>
+<div class="v-data-table mdc-data-table <%= 'v-no-border' unless comp.border %>" style="<%= "width:#{comp.width};" if comp.width %>">
+  <table class="mdc-data-table__table"
+         <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} %>>
+    <% if comp.header %>
+      <thead>
+      <%= erb :"components/table/header", :locals => {:row => comp.header} %>
+      </thead>
+    <% else
+      # This is a workaround for the MDCDataTable component that currently throws an error if it can't find an
+      # mdc-data-table__header-row element. Allos us to create headerless table without JS errors
+    %>
+      <div class="mdc-data-table__header-row v-hidden"/>
+    <% end %>
+    <tbody class="mdc-data-table__content">
+    <% comp.rows.each do |row| %>
+      <%= erb :"components/table/row", :locals => {:row => row} %>
+    <% end %>
+    </tbody>
+    <% if comp.footer %>
+      <tfoot>
+        <%= erb :"components/table/footer", :locals => {:row => comp.footer} %>
+      </tfoot>
+    <% end %>
+  </table>
+</div>
 <% if comp.pagination %>
-  <%= erb :"components/table/pagination", :locals => {:comp=> comp.pagination} %>
+  <%= erb :"components/table/pagination", :locals => {:comp => comp.pagination} %>
 <% end %>