fix(ui): table should have a header and body group

Author: mvegter

lib/public/components/Table/content.js

@@ -32,8 +32,8 @@ const row = (value, text) => {
  */
 const content = (data, keys, params) => {
     const idKey = Object.keys(keys).find((key) => keys[key] && keys[key].primary);
-    return data.map((entry) =>
-        h(`tr#row${entry[idKey]}`, params(entry), Object.entries(keys).map(([key, value]) => row(value, entry[key]))));
+    return h('tbody', data.map((entry) =>
+        h(`tr#row${entry[idKey]}`, params(entry), Object.entries(keys).map(([key, value]) => row(value, entry[key])))));
 };
 
 export default content;

lib/public/components/Table/headers.js

@@ -17,10 +17,9 @@ import { h } from '/js/src/index.js';
  * @param {Object} keys The full collection of API keys and their corresponding header values
  * @return {vnode} An array of rows containing all given header values with specific cell sizes
  */
-const headers = (keys) =>
-    h('tr#headers', Object.values(keys).map((value) => {
-        const size = value.size || 'cell-m';
-        return h(`th.${size}`, value.name);
-    }));
+const headers = (keys) => h('thead', h('tr', Object.values(keys).map((value) => {
+    const size = value.size || 'cell-m';
+    return h(`th.${size}`, { scope: 'col' }, value.name);
+})));
 
 export default headers;