@emamid/svelte-data-table 0.0.19 → 0.0.21

package/dist/DataTable.doc.d.ts

@@ -3,6 +3,8 @@
  * @typedef {object} DataTable
  * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
  * @property {any[]} items - Data for the rows in the table.
+ * @property {RowBoolean} [allowRowDrag] -
+ * @property {RowDropBoolean} [allowRowDrop] -
  * @property {string} [sortKey] - Data property to sort by.
  * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
  * @property {boolean} [reverseSort] - True when sorting is reversed.

package/dist/DataTable.doc.js

@@ -1,9 +1,10 @@
-"use strict";
 /**
  * The DataTable component based on {@link https://flowbite-svelte.com/docs/components/table}
  * @typedef {object} DataTable
  * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
  * @property {any[]} items - Data for the rows in the table.
+ * @property {RowBoolean} [allowRowDrag] -
+ * @property {RowDropBoolean} [allowRowDrop] -
  * @property {string} [sortKey] - Data property to sort by.
  * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
  * @property {boolean} [reverseSort] - True when sorting is reversed.
@@ -42,6 +43,7 @@
  * @fires headerClicked
  * @fires rowClicked
  */
+export {};
 /**
  * @event cellClicked
  * @type {object}

package/dist/DataTable.svelte

@@ -1,9 +1,15 @@
 <script>import { createEventDispatcher } from "svelte";
-import { Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
+import { Table, TableBody, 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";
+import DataTableRow from "./DataTableRow.svelte";
+import {
+  getColumnID,
+  joinClasses,
+  setDataTableContext
+} from "./common.js";
+export let allowRowDrag = false;
+export let allowRowDrop = !!allowRowDrag;
 export let columns = [];
 export let items = [];
 export let sortKey = "";
@@ -48,6 +54,7 @@ export let customColor = "";
 let sortedItems = [];
 let focusedColumnKeyID = null;
 let focusedItemKey = null;
+setDataTableContext({});
 const sortBySortKey = (a, b) => {
   let aValue = a[sortKey];
   let bValue = b[sortKey];
@@ -76,7 +83,6 @@ $: {
 }
 const dispatch = createEventDispatcher();
 const getItemKey = (item) => item ? itemKey ? item[itemKey] || null : items.indexOf(item).toString() : null;
-const getColumnID = (column) => column ? column.id || null : null;
 const divClass = joinClasses(divClassOverride || divClassDefault, divClassAppend);
 const tableClass = joinClasses(tableClassOverride || tableClassDefault, tableClassAppend);
 const theadClass = joinClasses(theadClassOverride || theadClassDefault, theadClassAppend);
@@ -167,7 +173,8 @@ const enterPressed = (event) => {
     focusedItemKey = getItemKey(sortedItems[itemIndex + 1]);
   }
 };
-const cellClicked = (item, column) => {
+const cellClicked = (event) => {
+  const { column, item } = event.detail;
   focusedColumnKeyID = null;
   focusedItemKey = null;
   if (column.canFocus) {
@@ -178,6 +185,9 @@ const cellClicked = (item, column) => {
     item,
     column
   });
+  dispatch("rowClicked", {
+    item
+  });
 };
 const headerClicked = (column) => {
   if (column.id && column.canSort) {
@@ -198,24 +208,6 @@ const headerClicked = (column) => {
     reverseSort
   });
 };
-const rowClicked = (item) => {
-  dispatch("rowClicked", {
-    item
-  });
-};
-let draggedItem = null;
-const rowDragStart = (item) => {
-  draggedItem = item;
-  dispatch("rowDragStart", {
-    draggedItem
-  });
-};
-const rowDropped = (targetItem) => {
-  dispatch("rowDropped", {
-    draggedItem,
-    targetItem
-  });
-};
 </script>
 
 <Table class={tableClass} {divClass} {striped} {hoverable} {noborder} {shadow} {color} {customColor}>
@@ -235,29 +227,26 @@ const rowDropped = (targetItem) => {
 	<TableBody {tableBodyClass}>
 		{#each sortedItems as item}
 			{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
-			<TableBodyRow
-				class={getTRClass(item, isRowFocused)}
-				draggable={true}
-				on:click={() => rowClicked(item)}
-				on:dragstart={() => rowDragStart(item)}
-				on:drop={() => rowDropped(item)}
-			>
-				{#each internalColumns as column}
-					{@const isCellFocused =
-						isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
-					<DataTableDataCell
-						{column}
-						{isCellFocused}
-						{item}
-						on:click={() => cellClicked(item, column)}
-						on:enterPressed={enterPressed}
-						on:prevTab={prevTab}
-						on:nextTab={nextTab}
-						on:action
-						on:cellChanged
-					/>
-				{/each}
-			</TableBodyRow>
+			<DataTableRow
+				{allowRowDrag}
+				{allowRowDrop}
+				columns={internalColumns}
+				{focusedColumnKeyID}
+				{getTRClass}
+				{isRowFocused}
+				{item}
+				on:action
+				on:cellChanged
+				on:cellClicked={cellClicked}
+				on:cellDragStart
+				on:cellDropped
+				on:enterPressed={enterPressed}
+				on:nextTab={nextTab}
+				on:prevTab={prevTab}
+				on:rowClicked
+				on:rowDragStart
+				on:rowDropped
+			/>
 		{/each}
 	</TableBody>
 </Table>

package/dist/DataTable.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnConfig, EnterAction, RowClassFunction, SortFunction } from './common.js';
+import type { ColumnConfig, EnterAction, RowBoolean, RowClassFunction, RowDropBoolean, SortFunction } from './common.js';
 declare const __propDef: {
     props: {
+        allowRowDrag?: RowBoolean | undefined;
+        allowRowDrop?: RowDropBoolean | undefined;
         columns?: ColumnConfig[] | undefined;
         items?: any[] | undefined;
         sortKey?: string | undefined;
@@ -39,11 +41,13 @@ declare const __propDef: {
     events: {
         action: any;
         cellChanged: any;
-        cellClicked: CustomEvent<any>;
-        headerClicked: CustomEvent<any>;
+        cellDragStart: CustomEvent<any>;
+        cellDropped: CustomEvent<any>;
         rowClicked: CustomEvent<any>;
         rowDragStart: CustomEvent<any>;
         rowDropped: CustomEvent<any>;
+        cellClicked: CustomEvent<any>;
+        headerClicked: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/DataTableDataCell.svelte

@@ -1,14 +1,77 @@
-<script>import { TableBodyCell } from "flowbite-svelte";
-import { defaultCellRenderer } from "./common.js";
+<script>import { createEventDispatcher, onDestroy } from "svelte";
+import { TableBodyCell } from "flowbite-svelte";
+import {
+  defaultCellRenderer,
+  evalCellDropBoolean,
+  evalRowBoolean,
+  getDataTableContext
+} from "./common.js";
 export let column;
 export let item;
 export let isCellFocused;
+const context = getDataTableContext();
+let span;
+const dispatch = createEventDispatcher();
+const dragOverHandler = (event) => {
+  const { draggedColumn, draggedItem } = context;
+  event.preventDefault();
+  const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
+  if (canDrop) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+  }
+};
+const dragStartHandler = (dragEvent) => {
+  context.draggedColumn = column;
+  context.draggedItem = item;
+  dispatch("cellDragStart", {
+    dragEvent,
+    sourceColumn: column,
+    sourceItem: item
+  });
+};
+const dropHandler = (event) => {
+  const { draggedColumn, draggedItem } = context;
+  const canDrop = evalCellDropBoolean(draggedItem, draggedColumn, item, column.allowCellDrop);
+  if (canDrop) {
+    event.preventDefault();
+    dispatch("cellDropped", {
+      sourceColumn: draggedColumn,
+      sourceItem: draggedItem,
+      targetColumn: column,
+      targetItem: item
+    });
+  }
+};
+$: {
+  if (span && span.parentElement) {
+    span.parentElement.addEventListener("dragover", dragOverHandler);
+    span.parentElement.addEventListener("dragstart", dragStartHandler);
+    span.parentElement.addEventListener("drop", dropHandler);
+  }
+}
+onDestroy(() => {
+  if (span && span.parentElement) {
+    span.parentElement.removeEventListener("dragover", dragOverHandler);
+    span.parentElement.removeEventListener("dragstart", dragStartHandler);
+    span.parentElement.removeEventListener("drop", dropHandler);
+  }
+});
 </script>
 
 {#await (column.cellRenderer || defaultCellRenderer)(column, item)}
 	<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
 {:then { dataValue, displayValue }}
-	<TableBodyCell tdClass={column.getTDClass(item, dataValue, isCellFocused)} on:click>
+	<TableBodyCell
+		draggable={evalRowBoolean(item, column.allowCellDrag)}
+		tdClass={column.getTDClass(item, dataValue, isCellFocused)}
+		on:click
+	>
+		{#if !!column.allowCellDrag || !!column.allowCellDrop}
+			<span style="display:none" bind:this={span}></span>
+		{/if}
 		{#if column.viewComponent}
 			<svelte:component
 				this={column.viewComponent}

package/dist/DataTableDataCell.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         enterPressed: any;
         prevTab: any;
         nextTab: any;
+        cellDragStart: CustomEvent<any>;
+        cellDropped: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/DataTableRow.svelte

@@ -0,0 +1,93 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { TableBodyRow } from "flowbite-svelte";
+import DataTableDataCell from "./DataTableDataCell.svelte";
+import {
+  evalRowDropBoolean,
+  evalRowBoolean,
+  getColumnID,
+  getDataTableContext
+} from "./common.js";
+export let allowRowDrag;
+export let allowRowDrop;
+export let columns;
+export let focusedColumnKeyID;
+export let getTRClass;
+export let isRowFocused;
+export let item;
+const context = getDataTableContext();
+let span;
+const dispatch = createEventDispatcher();
+const cellClicked = (column) => dispatch("cellClicked", { column, item });
+const rowClicked = () => dispatch("rowClicked", { item });
+const dragOverHandler = (event) => {
+  const { draggedItem } = context;
+  const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
+  if (canDrop) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+  }
+};
+const dragStartHandler = (dragEvent) => {
+  context.draggedColumn = void 0;
+  context.draggedItem = item;
+  dispatch("rowDragStart", {
+    dragEvent,
+    sourceItem: item
+  });
+};
+const dropHandler = (event) => {
+  const { draggedItem } = context;
+  const canDrop = evalRowDropBoolean(draggedItem, item, allowRowDrop);
+  if (canDrop) {
+    event.preventDefault();
+    dispatch("rowDropped", {
+      sourceItem: draggedItem,
+      targetItem: item
+    });
+  }
+};
+onMount(() => {
+  if (span && span.parentElement) {
+    span.parentElement.addEventListener("click", rowClicked);
+    span.parentElement.addEventListener("dragover", dragOverHandler);
+    span.parentElement.addEventListener("dragstart", dragStartHandler);
+    span.parentElement.addEventListener("drop", dropHandler);
+  }
+});
+onDestroy(() => {
+  if (span && span.parentElement) {
+    span.parentElement.removeEventListener("click", rowClicked);
+    span.parentElement.removeEventListener("dragover", dragOverHandler);
+    span.parentElement.removeEventListener("dragstart", dragStartHandler);
+    span.parentElement.removeEventListener("drop", dropHandler);
+  }
+});
+</script>
+
+<TableBodyRow
+	class={getTRClass(item, isRowFocused)}
+	draggable={evalRowBoolean(item, allowRowDrag)}
+>
+	{#if !!allowRowDrag || !!allowRowDrop}
+		<span style="display:none" bind:this={span}></span>
+	{/if}
+	{#each columns as column}
+		{@const isCellFocused =
+			isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
+		<DataTableDataCell
+			{column}
+			{isCellFocused}
+			{item}
+			on:click={() => cellClicked(column)}
+			on:enterPressed
+			on:prevTab
+			on:nextTab
+			on:action
+			on:cellChanged
+			on:cellDragStart
+			on:cellDropped
+		/>
+	{/each}
+</TableBodyRow>

package/dist/DataTableRow.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import type { RowBoolean, RowDropBoolean, GetTRClassFunction, InternalColumnConfig } from './common.js';
+declare const __propDef: {
+    props: {
+        allowRowDrag: RowBoolean;
+        allowRowDrop: RowDropBoolean;
+        columns: InternalColumnConfig[];
+        focusedColumnKeyID: any;
+        getTRClass: GetTRClassFunction;
+        isRowFocused: boolean;
+        item: any;
+    };
+    events: {
+        enterPressed: any;
+        prevTab: any;
+        nextTab: any;
+        action: any;
+        cellChanged: any;
+        cellDragStart: CustomEvent<any>;
+        cellDropped: CustomEvent<any>;
+        cellClicked: CustomEvent<any>;
+        rowClicked: CustomEvent<any>;
+        rowDragStart: CustomEvent<any>;
+        rowDropped: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableRowProps = typeof __propDef.props;
+export type DataTableRowEvents = typeof __propDef.events;
+export type DataTableRowSlots = typeof __propDef.slots;
+export default class DataTableRow extends SvelteComponent<DataTableRowProps, DataTableRowEvents, DataTableRowSlots> {
+}
+export {};

package/dist/common.d.ts

@@ -56,6 +56,8 @@ b: any) => number;
  * @property {string} [id] - Used to distinguish between multiple columns that have the same key.
  * @property {string} [key] - Name of the property in each row item that will be used for this column's value.
  * @property {string} [title] - Text to display in the column's header.
+ * @property {RowBoolean} [allowCellDrag] -
+ * @property {CellDropBoolean} [allowCellDrop] -
  * @property {CellRenderer} [cellRenderer] - Dynamically determines the data value and display value for a cell.
  * @property {ConstructorOfATypedSvelteComponent} [viewComponent] - Svelte component class to be displayed in the cell regardless of focus. If set, focusComponent will be ignored.
  * @property {object} [viewComponentConfig] - Properties to be passed when creating viewComponent.
@@ -76,14 +78,19 @@ b: any) => number;
  * @property {string} [sortKey] - Item property to sort by, if sortFunction is not defined.
   */
 export interface ColumnConfig {
-    id?: string;
-    key?: string;
-    title?: string;
+    allowCellDrag?: RowBoolean;
+    allowCellDrop?: CellDropBoolean;
+    canFocus?: boolean;
+    canSort?: boolean;
     cellRenderer?: CellRenderer;
-    viewComponent?: ConstructorOfATypedSvelteComponent;
-    viewComponentConfig?: any;
     focusComponent?: ConstructorOfATypedSvelteComponent;
     focusComponentConfig?: any;
+    id?: string;
+    key?: string;
+    sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
+    sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
+    sortFunction?: SortFunction;
+    sortKey?: string;
     tdClassAppend?: string;
     tdClassOverride?: string;
     tdFocusedClassAppend?: string;
@@ -91,12 +98,9 @@ export interface ColumnConfig {
     tdClassGetter?: DataCellClassFunction;
     thClassAppend?: string;
     thClassOverride?: string;
-    canFocus?: boolean;
-    canSort?: boolean;
-    sortFunction?: SortFunction;
-    sortKey?: string;
-    sortAscendingIcon?: ConstructorOfATypedSvelteComponent;
-    sortDescendingIcon?: ConstructorOfATypedSvelteComponent;
+    title?: string;
+    viewComponent?: ConstructorOfATypedSvelteComponent;
+    viewComponentConfig?: any;
 }
 /**
  * Returns the a class string for a data row.
@@ -128,9 +132,40 @@ export declare const joinClasses: (...classes: (string | false | null | undefine
  * @enum {string} EnterAction
  */
 export type EnterAction = 'next' | 'down' | 'stay';
+export type GetItemKeyFunction = (item?: any) => any;
 export type GetTDClassFunction = (item: any, value: any, isFocused: boolean) => string;
+export type GetTRClassFunction = (item: any, isRowFocused: boolean) => string;
 export interface InternalColumnConfig extends ColumnConfig {
     getTDClass: GetTDClassFunction;
 }
+type CellDropBooleanFunction = (sourceItem: any, targetItem: any, targetColumn: ColumnConfig) => boolean;
+/**
+ * @callback CellDropBoolean
+ * @returns {boolean}
+ */
+export type CellDropBoolean = boolean | CellDropBooleanFunction;
+type RowBooleanFunction = (item: any) => boolean;
+/**
+ * @callback RowBoolean
+ * @returns {boolean}
+ */
+export type RowBoolean = boolean | RowBooleanFunction;
+type RowDropBooleanFunction = (sourceItem: any, targetItem: any) => boolean;
+/**
+ * @callback RowDropBoolean
+ * @returns {boolean}
+ */
+export type RowDropBoolean = boolean | RowDropBooleanFunction;
 export declare const blankCellValue: CellValue;
+export declare const evalCellDropBoolean: (sourceItem: any, sourceColumn: ColumnConfig | undefined, targetItem: any, cellDropBoolean?: CellDropBoolean) => boolean | undefined;
+export declare const evalRowBoolean: (item: any, rowBoolean?: RowBoolean) => boolean | undefined;
+export declare const evalRowDropBoolean: (sourceItem: any, targetItem: any, rowDropBoolean?: RowDropBoolean) => boolean | undefined;
 export declare const defaultCellRenderer: CellRenderer;
+export declare const getColumnID: (column?: ColumnConfig | null) => string | null;
+interface DataTableContext {
+    draggedColumn?: InternalColumnConfig;
+    draggedItem?: any;
+}
+export declare const getDataTableContext: () => DataTableContext;
+export declare const setDataTableContext: (context: DataTableContext) => DataTableContext;
+export {};

package/dist/common.js

@@ -1,3 +1,4 @@
+import { getContext, setContext } from 'svelte';
 /**
  * Joins an array of classes into a string, removing any falsey values.
  * @function joinClasses
@@ -9,6 +10,28 @@ export const blankCellValue = {
     dataValue: null,
     displayValue: '',
 };
+export const evalCellDropBoolean = (sourceItem, sourceColumn, targetItem, cellDropBoolean) => {
+    if (typeof cellDropBoolean === 'boolean') {
+        return cellDropBoolean;
+    }
+    return cellDropBoolean && cellDropBoolean(sourceItem, sourceColumn, targetItem);
+};
+export const evalRowBoolean = (item, rowBoolean) => {
+    if (typeof rowBoolean === 'boolean') {
+        return rowBoolean;
+    }
+    return rowBoolean && rowBoolean(item);
+};
+export const evalRowDropBoolean = (sourceItem, targetItem, rowDropBoolean) => {
+    if (typeof rowDropBoolean == 'boolean') {
+        return rowDropBoolean;
+    }
+    return rowDropBoolean && rowDropBoolean(sourceItem, targetItem);
+};
 export const defaultCellRenderer = async (column, item) => column.key
     ? { dataValue: item[column.key], displayValue: item[column.key] || '' }
     : blankCellValue;
+export const getColumnID = (column) => (column ? column.id || null : null);
+const dataTableContextName = 'data-grid';
+export const getDataTableContext = () => getContext(dataTableContextName);
+export const setDataTableContext = (context) => setContext(dataTableContextName, context);

package/package.json

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