@emamid/svelte-data-table 0.0.8 → 0.0.11

package/README.md

@@ -0,0 +1,67 @@
+## Svelte Data Table based on [Flowbite Svelte](https://flowbite-svelte.com/), [Flowbite Icons](https://flowbite.com/icons/), and [Tailwind](https://tailwindcss.com/)
+
+This data table is designed for viewing and editing data in an array of objects. It's built using the Flowbite Svelte library's Table components and works in conjunction with it, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.
+
+## Install
+
+To add to an existing Svelte app, first install Tailwind if you haven't already:
+
+```bash
+> npx svelte-add@latest tailwindcss
+```
+
+Then install the Flowbite components and icons along with the data table component.
+```bash
+> npm i flowbite-svelte flowbite flowbite-svelte-icons @emamid/svelte-data-table
+```
+
+## Basic example
+
+```html
+<script lang="ts">
+  import DataTable from '@emamid/svelte-data-table';
+  import type { ColumnConfig } from '@emamid/svelte-data-table';
+
+  const columns: ColumnConfig[] = [
+    { canSort: true, key: 'firstName', title: 'First Name' },
+    { canSort: true, key: 'lastName', title: 'Last Name' },
+  ];
+
+  const items: any[] = [
+    { firstName: 'Bilbo', lastName: 'Baggins'},
+    { firstName: 'Frodo', lastName: 'Baggins'},
+    { firstName: 'Samwise', lastName: 'Gamgee'},
+    { firstName: 'Meriadoc', lastName: 'Brandybuck'},
+    { firstName: 'Peregrin', lastName: 'Took'},
+  ];
+</script>
+
+<main>	
+  <DataTable
+    {columns}
+    {items}
+  />
+</main>
+```
+
+Examples for most of the component's features are under /examples . You can find the documentation [here](https://emamid.github.io/svelte-data-table/).
+
+#### Example 1 - Basic data table
+![Example 1](./screenshot-01.png)
+
+#### Example 2 - Table with cell focus components
+![Example 2](./screenshot-02.png)
+
+#### Example 3 - Table with cell focus Select components, cell renderers, and custom sort
+![Example 3](./screenshot-03.png)
+
+#### Example 4 - Table with actions and cell view components
+![Example 4](./screenshot-04.png)
+
+#### Example 5 - Table with custom cell component
+![Example 5](./screenshot-05.png)
+
+#### 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 .
@@ -26,6 +28,13 @@
  * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
  * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
  * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
+ * @property {boolean} [striped] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [hoverable] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [noborder] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [shadow] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {string} [color] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {string} [customColor] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+
  * @fires action
  * @fires cellChanged
  * @fires cellClicked

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 .
@@ -27,6 +29,13 @@
  * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
  * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
  * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
+ * @property {boolean} [striped] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [hoverable] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [noborder] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {boolean} [shadow] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {string} [color] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+ * @property {string} [customColor] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
+
  * @fires action
  * @fires cellChanged
  * @fires cellClicked

package/dist/DataTable.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher } from "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 = "";
@@ -46,14 +49,23 @@ let sortedItems = [];
 let focusedColumnKeyID = null;
 let focusedItemKey = null;
 const sortBySortKey = (a, b) => {
-  const aValue = a[sortKey];
-  const bValue = b[sortKey];
+  let aValue = a[sortKey];
+  let bValue = b[sortKey];
+  if (aValue === bValue) {
+    return 0;
+  }
   if (typeof aValue === "string" && typeof bValue === "string") {
     return aValue.localeCompare(bValue);
   }
-  if (isFinite(aValue) && isFinite(bValue)) {
+  if (typeof aValue === "number" && typeof bValue === "number") {
     return aValue - bValue;
   }
+  if (typeof aValue === "number" || typeof bValue === "number") {
+    return (aValue || 0) - (bValue || 0);
+  }
+  if (typeof aValue === "string" || typeof bValue === "string") {
+    return (aValue || "").localeCompare(bValue || "");
+  }
   return JSON.stringify(aValue).localeCompare(JSON.stringify(bValue));
 };
 $: {
@@ -200,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,12 +1,12 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.8",
-	"homepage": "htts://davidemami.net/",
+	"version": "0.0.11",
+	"homepage": "https://github.com/emamid/svelte-data-table",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
+		"package": "svelte-kit sync && svelte-package && npm run jsdoc && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",