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

TheComputerM · Apr 7, 2021 · 839670d · 839670d
1 parent 6b501a1
commit 839670d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/svelte-materialify/src/components/DataTable/DataTableCell.svelte b/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}
diff --git a/packages/svelte-materialify/src/components/DataTable/DataTableHead.svelte b/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>

diff --git a/packages/svelte-materialify/src/components/DataTable/DataTableRow.scss b/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;