@onsvisual/svelte-components 1.0.12 → 1.0.13

package/dist/datavis/Table/Table.stories.svelte

@@ -11,9 +11,20 @@
 		{ country: "Northern Ireland", mountain: "Slieve Donard", height: 850 }
 	];
 	const columns = [
-		{ key: "country", label: "Country", sortable: true },
+		{ key: "country", label: "Country" },
 		{ key: "mountain", label: "Highest mountain" },
-		{ key: "height", label: "Height in metres", sortable: true, numeric: true }
+		{ key: "height", label: "Height in metres", numeric: true }
+	];
+
+	const dataAlt = [
+		{ measure: "First measure", value: 1 },
+		{ measure: "Second measure", value: 2 },
+		{ measure: "Third measure", value: null },
+		{ measure: "Fourth measure", value: 3 }
+	];
+	const columnsAlt = [
+		{ key: "measure", label: "Measure" },
+		{ key: "value", label: "Value", numeric: true }
 	];
 
 	const { Story } = defineMeta({
@@ -29,4 +40,9 @@
 
 <Story name="Fixed height with sticky header" args={{ data, columns, height: 200 }} />
 
-<Story name="Compact mode" args={{ data, columns, compact: true }} />
+<Story name="Compact mode, sortable" args={{ data, columns, sortable: true, compact: true }} />
+
+<Story
+	name="Sortable with null values"
+	args={{ data: dataAlt, columns: columnsAlt, sortable: true }}
+/>

package/dist/datavis/Table/Table.svelte

@@ -7,10 +7,15 @@
 	 */
 	export let title = "";
 	/**
-	 * Make the chart smaller/more compact
+	 * Make the table smaller/more compact
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Make the table sortable
+	 * @type {boolean}
+	 */
+	export let sortable = false;
 	/**
 	 * Make the chart responsive (changes layout on narrow screens)
 	 * @type {boolean}
@@ -32,21 +37,20 @@
 	 */
 	export let data = [];
 	/**
-	 * Optional metadata for formatting columns. Array of {key, label, sortable?, numeric?, dp?} objects
+	 * Optional metadata for formatting columns. Array of {key, label, numeric?, dp?, formatter?} objects
 	 * @type {object[]}
 	 */
 	export let columns =
 		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
 	let _data = [...data];
-	let sort = columns.map((c) => "none");
+	let sort = columns.map(() => "none");
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string}
 	 */
 	export let cls = "";
 
-	$: sortable = columns.map((d) => d.sortable).includes(true);
-	$: formatters = columns.map((d) => formatter(d.dp));
+	$: formatters = columns.map((d) => d.formatter || formatter(d.dp));
 </script>
 
 <div
@@ -70,7 +74,7 @@
 		<thead class="ons-table__head">
 			<tr class="ons-table__row">
 				{#each columns as col, i}
-					{#if col.sortable}
+					{#if sortable}
 						<th
 							scope="col"
 							class="ons-table__header"

package/dist/datavis/Table/Table.svelte.d.ts

@@ -7,6 +7,7 @@ export default class Table extends SvelteComponentTyped<{
     data?: object[] | undefined;
     title?: string | undefined;
     compact?: boolean | undefined;
+    sortable?: boolean | undefined;
     responsive?: boolean | undefined;
     rowHover?: boolean | undefined;
     columns?: object[] | undefined;
@@ -25,6 +26,7 @@ declare const __propDef: {
         data?: object[] | undefined;
         title?: string | undefined;
         compact?: boolean | undefined;
+        sortable?: boolean | undefined;
         responsive?: boolean | undefined;
         rowHover?: boolean | undefined;
         columns?: object[] | undefined;

package/dist/datavis/Table/docs/component.md

@@ -12,7 +12,7 @@ A table component with various customisation options.
   ];
   const columns = [
     { key: "col1", label: "Text column" },
-    { key: "col2", label: "Numeric column", numeric: true, sortable: true },
+    { key: "col2", label: "Numeric column", numeric: true},
   ];
 </script>
 

package/dist/js/utils.js

@@ -56,10 +56,30 @@ export const formatter = (dp = null) => {
 };
 
 export const ascending = (a, b) =>
-	a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+	a == null && b != null
+		? 1
+		: b == null && a != null
+			? -1
+			: a < b
+				? -1
+				: a > b
+					? 1
+					: a >= b
+						? 0
+						: NaN;
 
 export const descending = (a, b) =>
-	a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+	a == null && b != null
+		? 1
+		: b == null && a != null
+			? -1
+			: b < a
+				? -1
+				: b > a
+					? 1
+					: b >= a
+						? 0
+						: NaN;
 
 export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.12",
+	"version": "1.0.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",