@emamid/svelte-data-table 0.0.8 → 0.0.9

package/README.md

@@ -0,0 +1,65 @@
+## 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)

package/dist/DataTable.doc.d.ts

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

@@ -27,6 +27,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,5 @@
 <script>import { createEventDispatcher } from "svelte";
-import { Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
+import { P, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
 import DataTableDataCell from "./DataTableDataCell.svelte";
 import DataTableHeaderCell from "./DataTableHeaderCell.svelte";
 import { joinClasses } from "./common.js";
@@ -46,14 +46,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));
 };
 $: {

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "@emamid/svelte-data-table",
-	"version": "0.0.8",
-	"homepage": "htts://davidemami.net/",
+	"version": "0.0.9",
+	"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",