feat(components): add default, sortable DataTable

Supports #14

src/components/DataTable/TableHeader.svelte

@@ -1,44 +1,36 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let isSortHeader = false;
-  export let isSortable = false;
   export let scope = 'col';
-  export let sortDirection = undefined;
   export let translateWithId = () => '';
   export let style = undefined;
 
+  import { getContext } from 'svelte';
   import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
   import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
   import { cx } from '../../lib';
 
-  const sortDirections = {
-    NONE: 'none',
-    ASC: 'ascending',
-    DESC: 'descending'
-  };
+  const id = Math.random();
+  const { sortHeader, tableSortable, add } = getContext('DataTable');
 
-  $: ariaSort = isSortHeader ? sortDirections[sortDirection] : 'none';
+  add(id);
+
+  $: active = $sortHeader.id === id;
   // TODO: translate with id
   $: ariaLabel = translateWithId();
 </script>
 
-{#if !isSortable}
-  <th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
-    <span class={cx('--table-header-label')}>
-      <slot />
-    </span>
-  </th>
-{:else}
+{#if $tableSortable}
   <th
-    {scope}
-    on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    class={cx('--table-sort', isSortHeader && sortDirection !== 'NONE' && '--table-sort--active', isSortHeader && sortDirection === 'DESC' && '--table-sort--ascending', className)}
-    aria-sort={ariaSort}>
-    <button on:click>
+    class={className}
+    aria-sort={active ? $sortHeader.sortDirection : 'none'}
+    {scope}>
+    <button
+      class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
+      on:click>
       <span class={cx('--table-header-label')}>
         <slot />
       </span>
@@ -46,4 +38,10 @@
       <ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
     </button>
   </th>
+{:else}
+  <th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
+    <span class={cx('--table-header-label')}>
+      <slot />
+    </span>
+  </th>
 {/if}