@emamid/svelte-data-table 0.0.9 → 0.0.11

package/README.md

@@ -63,3 +63,5 @@ Examples for most of the component's features are under /examples . You can find
 
 #### Example 6 - Table with cell and row class getter functions
 ![Example 6](./screenshot-06.png)
+
+#### Kitchen Sink example - All of the above

package/dist/DataTable.doc.d.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 .

package/dist/DataTable.doc.js

@@ -8,6 +8,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 .

package/dist/DataTable.svelte

@@ -1,5 +1,6 @@
 <script>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";
 import { joinClasses } from "./common.js";
@@ -9,6 +10,8 @@ export let sortKey = "";
 export let sortFunction = null;
 export let reverseSort = false;
 export let sortColumnID = null;
+export let sortAscendingIcon = AngleDownSolid;
+export let sortDescendingIcon = AngleUpSolid;
 export let itemKey = null;
 export let enterAction = "next";
 export let divClassAppend = "";
@@ -209,6 +212,8 @@ const rowClicked = (item) => {
 				{column}
 				isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
 				{reverseSort}
+				defaultSortAscendingIcon={sortAscendingIcon}
+				defaultSortDescendingIcon={sortDescendingIcon}
 				{thClass}
 				on:click={() => headerClicked(column)}
 			/>

package/dist/DataTable.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         sortFunction?: SortFunction | undefined | null;
         reverseSort?: boolean | undefined;
         sortColumnID?: string | null | undefined;
+        sortAscendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
+        sortDescendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
         itemKey?: string | null | undefined;
         enterAction?: EnterAction | undefined;
         divClassAppend?: string | undefined;

package/dist/DataTableHeaderCell.svelte

@@ -1,10 +1,13 @@
 <script>import { TableHeadCell } from "flowbite-svelte";
-import { AngleDownSolid, AngleUpSolid } from "flowbite-svelte-icons";
 import { joinClasses } from "./common.js";
 export let column;
 export let reverseSort;
 export let isSorted;
+export let defaultSortAscendingIcon;
+export let defaultSortDescendingIcon;
 export let thClass;
+const sortAscendingIcon = column.sortAscendingIcon || defaultSortAscendingIcon;
+const sortDescendingIcon = column.sortDescendingIcon || defaultSortDescendingIcon;
 </script>
 
 <TableHeadCell
@@ -13,9 +16,9 @@ export let thClass;
 >
 	{#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>

package/dist/DataTableHeaderCell.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         column: InternalColumnConfig;
         reverseSort: boolean;
         isSorted: boolean;
+        defaultSortAscendingIcon: ConstructorOfATypedSvelteComponent;
+        defaultSortDescendingIcon: ConstructorOfATypedSvelteComponent;
         thClass: string;
     };
     events: {

package/dist/common.d.ts

@@ -70,6 +70,8 @@ b: any) => number;
  * @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.
   */
@@ -93,6 +95,8 @@ export interface ColumnConfig {
     canSort?: boolean;
     sortFunction?: SortFunction;
     sortKey?: string;
+    sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
+    sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
 }
 /**
  * Returns the a class string for a data row.

package/package.json

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