Merge pull request #516 from Budibase/table-sorting

Table sorting

packages/standard-components/package.json

@@ -38,6 +38,7 @@
   "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
+    "fast-sort": "^2.2.0",
     "fusioncharts": "^3.15.1-sr.1",
     "svelte-fusioncharts": "^1.0.0"
   }

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

@@ -1,6 +1,9 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import ArrowUp from "./icons/ArrowUp.svelte"
+  import ArrowDown from "./icons/ArrowDown.svelte"
+  import fsort from "fast-sort"
 
   export let _bb
   export let onLoad
@@ -12,6 +15,8 @@
 
   let headers = []
   let store = _bb.store
+  let sort = {}
+  let sorted = []
 
   $: cssVariables = {
     backgroundColor,
@@ -20,6 +25,10 @@
     borderColor,
   }
 
+  $: data = $store[model] || []
+  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
+  $: if (model) fetchData()
+
   const shouldDisplayField = name => {
     if (name.startsWith("_")) return false
     // always 'record'
@@ -48,8 +57,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 +81,21 @@
   <thead>
     <tr>
       {#each headers as header}
-        <th>{header}</th>
+        <th on:click={() => sortColumn(header)}>
+          <span>
+            {header}
+            {#if sort.column === header}
+              <svelte:component
+                this={sort.direction === 'asc' ? ArrowDown : ArrowUp}
+                style="height: 1em;" />
+            {/if}
+          </span>
+        </th>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each data as row}
+    {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
           {#if row[header]}
@@ -95,6 +125,12 @@
     color: var(--color);
     font-weight: bold;
     text-transform: capitalize;
+    cursor: pointer;
+  }
+
+  th span {
+    display: flex;
+    align-items: center;
   }
 
   td,

packages/standard-components/src/icons/ArrowDown.svelte

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11
+    16.172V4h2v12.172z" />
+</svg>

packages/standard-components/src/icons/ArrowUp.svelte

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414
+    1.414L13 7.828z" />
+</svg>

packages/standard-components/src/index.js

@@ -21,7 +21,6 @@ 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 stackedlist } from "./StackedList.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"