Made sort icons configurable

docs/ColumnConfig.html

@@ -653,6 +653,68 @@ <h5 class="subsection-title">Properties:</h5>
 
 
 
+<tr class="deep-level-0">
+
+        <td class="name"><code>sortAscendingIcon</code></td>
+
+
+    <td class="type">
+
+
+<code class="param-type">ConstructorOfATypedSvelteComponent</code>
+
+
+
+    </td>
+
+
+        <td class="attributes">
+
+            &lt;optional><br>
+
+
+
+        </td>
+
+
+
+
+    <td class="description last">Svelte component class to be displayed in the column is sorting ascended (overrides table).</td>
+</tr>
+
+
+
+<tr class="deep-level-0">
+
+        <td class="name"><code>sortDescendingIcon</code></td>
+
+
+    <td class="type">
+
+
+<code class="param-type">ConstructorOfATypedSvelteComponent</code>
+
+
+
+    </td>
+
+
+        <td class="attributes">
+
+            &lt;optional><br>
+
+
+
+        </td>
+
+
+
+
+    <td class="description last">Svelte component class to be displayed in the column is sorting descended (overrides table).</td>
+</tr>
+
+
+
 <tr class="deep-level-0">
 
         <td class="name"><code>sortFunction</code></td>

docs/DataTable.doc.ts.html

@@ -94,6 +94,8 @@ <h1>DataTable.doc.ts</h1>
  * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
  * @property {boolean} [reverseSort] - True when sorting is reversed.
  * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
+ * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
+ * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
  * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
  * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
  * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .

docs/common.ts.html

@@ -164,6 +164,8 @@ <h1>common.ts</h1>
  * @property {string} [thClassOverride] - Class to replace existing CSS for header cells.
  * @property {boolean} [canFocus] - True if cells in this column can be focused.
  * @property {boolean} [canSort] - If true, clicking the column's header will set sorting to sortFunction or sortKey, or reverse it if already set.
+ * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in the column is sorting ascended (overrides table).
+ * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in the column is sorting descended (overrides table).
  * @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
  * @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
   */
@@ -187,6 +189,8 @@ <h1>common.ts</h1>
 	canSort?: boolean;
 	sortFunction?: SortFunction;
 	sortKey?: string;
+	sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
+	sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
 }
 
 /**

docs/global.html

@@ -3381,6 +3381,68 @@ <h5 class="subsection-title">Properties:</h5>
 
 
 
+<tr class="deep-level-0">
+
+        <td class="name"><code>sortAscendingIcon</code></td>
+
+
+    <td class="type">
+
+
+<code class="param-type">ConstructorOfATypedSvelteComponent</code>
+
+
+
+    </td>
+
+
+        <td class="attributes">
+
+            &lt;optional><br>
+
+
+
+        </td>
+
+
+
+
+    <td class="description last">Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from <a href="https://flowbite.com/icons/">https://flowbite.com/icons/</a></td>
+</tr>
+
+
+
+<tr class="deep-level-0">
+
+        <td class="name"><code>sortDescendingIcon</code></td>
+
+
+    <td class="type">
+
+
+<code class="param-type">ConstructorOfATypedSvelteComponent</code>
+
+
+
+    </td>
+
+
+        <td class="attributes">
+
+            &lt;optional><br>
+
+
+
+        </td>
+
+
+
+
+    <td class="description last">Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from <a href="https://flowbite.com/icons/">https://flowbite.com/icons/</a></td>
+</tr>
+
+
+
 <tr class="deep-level-0">
 
         <td class="name"><code>itemKey</code></td>
@@ -4290,7 +4352,7 @@ <h4 class="name" id="EnterAction">
         <p class="tag-source">
             <a href="common.ts.html" class="button">View Source</a>
             <span>
-                <a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line91">line 91</a>
+                <a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line93">line 93</a>
             </span>
         </p>
 
@@ -4825,7 +4887,7 @@ <h5>Parameters:</h5>
         <p class="tag-source">
             <a href="common.ts.html" class="button">View Source</a>
             <span>
-                <a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line78">line 78</a>
+                <a href="common.ts.html">common.ts</a>, <a href="common.ts.html#line80">line 80</a>
             </span>
         </p>
 
@@ -6024,7 +6086,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="DataTable.doc.ts.html" class="button">View Source</a>
             <span>
-                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line63">line 63</a>
+                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line65">line 65</a>
             </span>
         </p>
 
@@ -6248,7 +6310,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="DataTable.doc.ts.html" class="button">View Source</a>
             <span>
-                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line70">line 70</a>
+                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line72">line 72</a>
             </span>
         </p>
 
@@ -6426,7 +6488,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="DataTable.doc.ts.html" class="button">View Source</a>
             <span>
-                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line43">line 43</a>
+                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line45">line 45</a>
             </span>
         </p>
 
@@ -6673,7 +6735,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="DataTable.doc.ts.html" class="button">View Source</a>
             <span>
-                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line49">line 49</a>
+                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line51">line 51</a>
             </span>
         </p>
 
@@ -6828,7 +6890,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="DataTable.doc.ts.html" class="button">View Source</a>
             <span>
-                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line58">line 58</a>
+                <a href="DataTable.doc.ts.html">DataTable.doc.ts</a>, <a href="DataTable.doc.ts.html#line60">line 60</a>
             </span>
         </p>
 

docs/index.html

@@ -147,7 +147,8 @@ <h4>Example 4 - Table with actions and cell view components</h4>
 <h4>Example 5 - Table with custom cell component</h4>
 <p><img src="./screenshot-05.png" alt="Example 5"></p>
 <h4>Example 6 - Table with cell and row class getter functions</h4>
-<p><img src="./screenshot-06.png" alt="Example 6"></p></article>
+<p><img src="./screenshot-06.png" alt="Example 6"></p>
+<h4>Kitchen Sink example - All of the above</h4></article>
     </section>
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"homepage": "https://github.com/emamid/svelte-data-table",
 	"scripts": {
 		"dev": "vite dev",

src/lib/DataTable.doc.ts

@@ -7,6 +7,8 @@
  * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
  * @property {boolean} [reverseSort] - True when sorting is reversed.
  * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
+ * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
+ * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
  * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
  * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
  * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .

src/lib/DataTable.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
-	import { P, Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
-	
+	import { Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
+	import { AngleDownSolid, AngleUpSolid } from 'flowbite-svelte-icons';
+
 	import DataTableDataCell from './DataTableDataCell.svelte';
 	import DataTableHeaderCell from './DataTableHeaderCell.svelte';
 
@@ -24,6 +25,8 @@
 	export let sortFunction: SortFunction | undefined | null = null;
 	export let reverseSort: boolean = false;
 	export let sortColumnID: string | null = null;
+	export let sortAscendingIcon: ConstructorOfATypedSvelteComponent = AngleDownSolid;
+	export let sortDescendingIcon: ConstructorOfATypedSvelteComponent = AngleUpSolid;
 	export let itemKey: string | null = null;
 
 	export let enterAction: EnterAction = 'next';
@@ -267,6 +270,8 @@
 				{column}
 				isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
 				{reverseSort}
+				defaultSortAscendingIcon={sortAscendingIcon}
+				defaultSortDescendingIcon={sortDescendingIcon}
 				{thClass}
 				on:click={() => headerClicked(column)}
 			/>

src/lib/DataTableHeaderCell.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import { TableHeadCell } from 'flowbite-svelte';
-	import { AngleDownSolid, AngleUpSolid } from 'flowbite-svelte-icons';
 
 	import type { InternalColumnConfig } from './common.js';
 	import { joinClasses } from './common.js';
 
 	export let column: InternalColumnConfig;
 	export let reverseSort: boolean;
 	export let isSorted: boolean;
+	export let defaultSortAscendingIcon: ConstructorOfATypedSvelteComponent;
+	export let defaultSortDescendingIcon: ConstructorOfATypedSvelteComponent;
 	export let thClass: string;
+
+	const sortAscendingIcon = column.sortAscendingIcon || defaultSortAscendingIcon;
+	const sortDescendingIcon = column.sortDescendingIcon || defaultSortDescendingIcon;
 </script>
 
 <TableHeadCell
@@ -17,9 +21,9 @@
 >
 	{#if isSorted}
 		{#if reverseSort}
-			<AngleUpSolid class="inline h-3 w-3" />
+			<svelte:component this={sortAscendingIcon} class="inline h-3 w-3" />
 		{:else}
-			<AngleDownSolid class="inline h-3 w-3" />
+			<svelte:component this={sortDescendingIcon} class="inline h-3 w-3" />
 		{/if}
 	{/if}
 	<span>{column.title}</span>

src/lib/common.ts

@@ -77,6 +77,8 @@ export type SortFunction = (
  * @property {string} [thClassOverride] - Class to replace existing CSS for header cells.
  * @property {boolean} [canFocus] - True if cells in this column can be focused.
  * @property {boolean} [canSort] - If true, clicking the column's header will set sorting to sortFunction or sortKey, or reverse it if already set.
+ * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in the column is sorting ascended (overrides table).
+ * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in the column is sorting descended (overrides table).
  * @property {SortFunction} [sortFunction] - Comparison function for complex sorting.
  * @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
   */
@@ -100,6 +102,8 @@ export interface ColumnConfig {
 	canSort?: boolean;
 	sortFunction?: SortFunction;
 	sortKey?: string;
+	sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
+	sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
 }
 
 /**