initial table sorting algo

packages/standard-components/src/DataMap.svelte

@@ -1,31 +0,0 @@
-<script>
-  import { GoogleMap } from "@beyonk/svelte-googlemaps"
-
-  // export let _bb
-  // export let onLoad
-  // export let _instanceId
-  // export let model
-
-  // let mapComponent
-  // let headers = []
-  // let store = _bb.store
-
-  // $: data = $store[model._id] || []
-
-  // async function fetchData() {
-  //   const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
-  //   const response = await _bb.api.get(FETCH_RECORDS_URL)
-  //   if (response.status === 200) {
-  //     const json = await response.json()
-
-  //     store.update(state => {
-  //       state[model._id] = json
-  //       return state
-  //     });
-  //   } else {
-  //     throw new Error("Failed to fetch records.", response)
-  //   }
-  // }
-</script>
-
-<GoogleMap apiKey={'AIzaSyCPJ_eiSIbhRMmKBiVYXgh4HFHmbC4ZL5U'} />

packages/standard-components/src/DataTable.svelte

@@ -12,6 +12,8 @@
 
   let headers = []
   let store = _bb.store
+  let sort = {}
+  let sorted = []
 
   $: cssVariables = {
     backgroundColor,
@@ -20,6 +22,31 @@
     borderColor,
   }
 
+  $: data = $store[model] || []
+  $: sorted = data
+  $: {
+    let result = [...sorted]
+
+    if (!sort.column) sorted = result
+
+    console.log(sort);
+
+    if (sort.direction === "ASC") {
+      result.sort((a, b) =>  {
+        console.log(a[sort.column], b[sort.column])
+        return String(a[sort.column]).localeCompare(String(b[sort.column]))
+      }
+      )
+    }
+
+    if (sort.direction === "DESC") {
+      result.reverse()
+    }
+
+    sorted = result
+  }
+  $: if (model) fetchData()
+
   const shouldDisplayField = name => {
     if (name.startsWith("_")) return false
     // always 'record'
@@ -48,8 +75,20 @@
     }
   }
 
-  $: data = $store[model] || []
+  function sortColumn(column) {
-  $: if (model) fetchData()
+    if (column === sort.column) {
+      sort = {
+        direction: sort.direction === "ASC" ? "DESC" : null,
+        column: sort.direction === "ASC" ? sort.column : null,
+      }
+      return
+    }
+
+    sort = {
+      column,
+      direction: "ASC",
+    }
+  }
 
   onMount(async () => {
     await fetchData()
@@ -60,12 +99,15 @@
   <thead>
     <tr>
       {#each headers as header}
-        <th>{header}</th>
+        <th on:click={() => sortColumn(header)}>
+          {header}
+          {#if sort.column === header}v{/if}
+        </th>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each data as row}
+    {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
           {#if row[header]}
@@ -120,6 +162,10 @@
       display: block;
     }
 
+    th {
+      cursor: pointer;
+    }
+
     /* Hide table headers (but not display: none;, for accessibility) */
     thead tr {
       position: absolute;

packages/standard-components/src/index.js

@@ -21,6 +21,5 @@ export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
-export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"