fix(DataTable): the DataTable component now uses th properly

Author: marekdedic

packages/svelte-materialify/src/components/DataTable/DataTableCell.svelte

@@ -1,13 +1,23 @@
 <script>
+  import { getContext } from 'svelte';
+
   let klass = '';
   export { klass as class };
 
   export let numeric = false;
+
+  const isTableHead = getContext('is-table-head') === true;
 </script>
 
 <style lang="scss" src="./DataTableCell.scss" global>
 </style>
 
-<td class="s-tbl-cell {klass}" class:numeric>
-  <slot />
-</td>
+{#if isTableHead}
+  <th class="s-tbl-cell {klass}" class:numeric>
+    <slot />
+  </th>
+{:else}
+  <td class="s-tbl-cell {klass}" class:numeric>
+    <slot />
+  </td>
+{/if}

packages/svelte-materialify/src/components/DataTable/DataTableHead.svelte

@@ -1,6 +1,10 @@
 <script>
+  import { setContext } from 'svelte';
+
   let klass = '';
   export { klass as class };
+
+  setContext('is-table-head', true);
 </script>
 
 <style lang="scss" src="./DataTableHead.scss" global>

packages/svelte-materialify/src/components/DataTable/DataTableRow.scss

@@ -1,3 +1,5 @@
+@import './variables';
+
 .s-tbl-row {
   border-top-color: $tbl-border-color;
   border-top-style: solid;