@emamid/svelte-data-table 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/DataTable.svelte

@@ -0,0 +1,200 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
+import DataTableDataCell from "./DataTableDataCell.svelte";
+import DataTableHeaderCell from "./DataTableHeaderCell.svelte";
+import { joinClasses } from "./common.ts";
+export let columns = [];
+export let items = [];
+export let sortKey = "";
+export let sortFunction = null;
+export let reverseSort = false;
+export let sortColumnID = null;
+export let itemKey = null;
+export let enterAction = "next";
+export let divClassAppend = "";
+export let divClassOverride = "";
+const divClassDefault = "relative overflow-x-auto overflow-y-auto";
+export let tableClassAppend = "";
+export let tableClassOverride = "";
+const tableClassDefault = "";
+export let theadClassAppend = "";
+export let theadClassOverride = "";
+const theadClassDefault = "text-xs uppercase sticky top-0";
+export let thClassAppend = "";
+export let thClassOverride = "";
+const thClassDefault = "";
+export let tableBodyClassAppend = "";
+export let tableBodyClassOverride = "";
+const tableBodyClassDefault = "";
+export let tdClassAppend = "";
+export let tdClassOverride = "";
+const tdClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
+export let tdFocusedClassAppend = "";
+export let tdFocusedClassOverride = "";
+const tdFocusedClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
+export let trClassAppend = "";
+export let trClassOverride = "";
+const trClassDefault = "";
+export let trClassGetter = null;
+let sortedItems = [];
+let focusedColumnKeyID = null;
+let focusedItemKey = null;
+const sortBySortKey = (a, b) => {
+  const aValue = a[sortKey];
+  const bValue = b[sortKey];
+  if (typeof aValue === "string") {
+    return aValue.localeCompare(bValue);
+  }
+  if (isFinite(aValue) && isFinite(bValue)) {
+    return aValue - bValue;
+  }
+  return JSON.stringify(aValue).localeCompare(JSON.stringify(bValue));
+};
+$: {
+  sortedItems = sortFunction ? items.toSorted(sortFunction) : sortKey ? items.toSorted(sortBySortKey) : [...items];
+  if (reverseSort) {
+    sortedItems.reverse();
+  }
+}
+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);
+const thClass = joinClasses(thClassOverride || thClassDefault, thClassAppend);
+const tableBodyClass = joinClasses(tableBodyClassOverride || tableBodyClassDefault, tableBodyClassAppend);
+const trClass = joinClasses(trClassOverride || trClassDefault, trClassAppend);
+const tdClass = joinClasses(tdClassOverride || tdClassDefault, tdClassAppend);
+const tdFocusedClass = joinClasses(tdFocusedClassOverride || tdFocusedClassDefault, tdFocusedClassAppend);
+const getTRClass = (item, isRowFocused) => trClassGetter ? trClassGetter(item, isRowFocused, trClass, trClassDefault, trClassAppend, trClassOverride) : trClass;
+const internalColumns = columns.map((column) => {
+  const columnTDClass = joinClasses(column.tdClassOverride || tdClass, column.tdClassAppend);
+  const columnFocusedTDClass = joinClasses(column.tdFocusedClassOverride || tdFocusedClass, column.tdFocusedClassAppend);
+  let getTDClass;
+  const tdClassGetter = column.tdClassGetter;
+  if (tdClassGetter) {
+    getTDClass = (item, value, isFocused) => tdClassGetter(item, column, value, isFocused, columnTDClass, tdClassDefault, tdClassAppend, tdClassOverride);
+  } else {
+    getTDClass = (_item, _value, isFocused) => isFocused ? columnFocusedTDClass : columnTDClass;
+  }
+  return {
+    ...column,
+    sortKey: column.sortKey || column.key,
+    id: column.id || column.key,
+    getTDClass
+  };
+});
+const focusableColumns = internalColumns.filter((column) => column.canFocus);
+const prevTab = (event) => {
+  const { item, column } = event.detail;
+  let nextColumn = null;
+  let nextItem = null;
+  if (column === focusableColumns[0]) {
+    if (item !== sortedItems[0]) {
+      nextColumn = focusableColumns[focusableColumns.length - 1];
+      nextItem = sortedItems[sortedItems.indexOf(item) - 1];
+    }
+  } else {
+    nextColumn = focusableColumns[focusableColumns.indexOf(column) - 1];
+    nextItem = item;
+  }
+  focusedColumnKeyID = getColumnID(nextColumn);
+  focusedItemKey = getItemKey(nextItem);
+};
+const nextTab = (event) => {
+  const { item, column } = event.detail;
+  let nextColumn = null;
+  let nextItem = null;
+  if (column === focusableColumns.at(-1)) {
+    if (item !== sortedItems.at(-1)) {
+      nextColumn = focusableColumns[0];
+      nextItem = sortedItems[sortedItems.indexOf(item) + 1];
+    }
+  } else {
+    nextColumn = focusableColumns[focusableColumns.indexOf(column) + 1];
+    nextItem = item;
+  }
+  focusedColumnKeyID = getColumnID(nextColumn);
+  focusedItemKey = getItemKey(nextItem);
+};
+const enterPressed = (event) => {
+  if (enterAction === "stay") {
+    return;
+  }
+  if (enterAction === "next") {
+    return nextTab(event);
+  }
+  const { item } = event.detail;
+  const itemIndex = sortedItems.indexOf(item);
+  if (itemIndex !== sortedItems.length - 1) {
+    focusedItemKey = getItemKey(sortedItems[itemIndex + 1]);
+  }
+};
+const cellClicked = (item, column) => {
+  focusedColumnKeyID = null;
+  focusedItemKey = null;
+  if (column.canFocus) {
+    focusedColumnKeyID = getColumnID(column);
+    focusedItemKey = getItemKey(item);
+  }
+  dispatch("cellClicked", {
+    item,
+    column
+  });
+};
+const headerClicked = (column) => {
+  if (column.id && column.canSort) {
+    if (sortColumnID === column.id) {
+      reverseSort = !reverseSort;
+    } else {
+      reverseSort = false;
+      sortColumnID = column.id;
+      sortKey = column.sortKey || "";
+      sortFunction = column.sortFunction;
+    }
+  }
+  dispatch("headerClicked", {
+    column,
+    sortColumnID,
+    sortKey,
+    sortFunction,
+    reverseSort
+  });
+};
+const rowClicked = (item) => {
+  dispatch("rowClicked", {
+    item
+  });
+};
+</script>
+
+<Table class={tableClass} {divClass}>
+	<TableHead defaultRow={false} {theadClass}>
+		{#each internalColumns as column}
+			<DataTableHeaderCell {column} isSorted={!!sortColumnID && getColumnID(column) === sortColumnID} {reverseSort} {thClass} on:click={() => headerClicked(column)}/>
+		{/each}
+	</TableHead>
+	<TableBody {tableBodyClass}>
+		{#each sortedItems as item}
+		{@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
+			<TableBodyRow class={getTRClass(item, isRowFocused)} on:click={() => rowClicked(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
+						on:cellInput
+					/>
+				{/each}
+			</TableBodyRow>
+		{/each}
+	</TableBody>
+</Table>	

package/dist/DataTable.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig, EnterAction, RowClassFunction, SortFunction } from './common.ts';
+declare const __propDef: {
+    props: {
+        columns?: ColumnConfig[] | undefined;
+        items?: any[] | undefined;
+        sortKey?: string | undefined;
+        sortFunction?: SortFunction | undefined | null;
+        reverseSort?: boolean | undefined;
+        sortColumnID?: string | null | undefined;
+        itemKey?: string | null | undefined;
+        enterAction?: EnterAction | undefined;
+        divClassAppend?: string | undefined;
+        divClassOverride?: string | undefined;
+        tableClassAppend?: string | undefined;
+        tableClassOverride?: string | undefined;
+        theadClassAppend?: string | undefined;
+        theadClassOverride?: string | undefined;
+        thClassAppend?: string | undefined;
+        thClassOverride?: string | undefined;
+        tableBodyClassAppend?: string | undefined;
+        tableBodyClassOverride?: string | undefined;
+        tdClassAppend?: string | undefined;
+        tdClassOverride?: string | undefined;
+        tdFocusedClassAppend?: string | undefined;
+        tdFocusedClassOverride?: string | undefined;
+        trClassAppend?: string | undefined;
+        trClassOverride?: string | undefined;
+        trClassGetter?: RowClassFunction | null | undefined;
+    };
+    events: {
+        action: any;
+        cellChanged: any;
+        cellInput: any;
+        cellClicked: CustomEvent<any>;
+        headerClicked: CustomEvent<any>;
+        rowClicked: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableProps = typeof __propDef.props;
+export type DataTableEvents = typeof __propDef.events;
+export type DataTableSlots = typeof __propDef.slots;
+export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
+}
+export {};

package/dist/DataTableDataCell.svelte

@@ -0,0 +1,50 @@
+<script>import { TableBodyCell } from "flowbite-svelte";
+import { defaultCellRenderer } from "./common.ts";
+export let column;
+export let item;
+export let isCellFocused;
+</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>
+	{#if column.viewComponent}
+	<svelte:component
+		this={column.viewComponent}
+		{column}
+		{item}
+		value={dataValue}
+		on:action
+		on:cellChanged
+		on:cellInput 
+		on:click
+		on:enterPressed
+		on:prevTab
+		on:nextTab
+		{...column.viewComponentConfig}
+	/>
+	{:else}
+		{#if column.focusComponent && isCellFocused}
+		<svelte:component
+			this={column.focusComponent}
+			{column}
+			{item}
+			value={dataValue}
+			on:action
+			on:cellChanged
+			on:cellInput
+			on:click
+			on:enterPressed
+			on:prevTab
+			on:nextTab
+			{...column.focusComponentConfig}
+		/>
+		{:else}
+		{displayValue}
+		{/if}
+	{/if}	
+</TableBodyCell>
+{:catch}
+<TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
+{/await}

package/dist/DataTableDataCell.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { InternalColumnConfig } from './common.ts';
+declare const __propDef: {
+    props: {
+        column: InternalColumnConfig;
+        item: any;
+        isCellFocused: boolean;
+    };
+    events: {
+        click: any;
+        action: any;
+        cellChanged: any;
+        cellInput: any;
+        enterPressed: any;
+        prevTab: any;
+        nextTab: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableDataCellProps = typeof __propDef.props;
+export type DataTableDataCellEvents = typeof __propDef.events;
+export type DataTableDataCellSlots = typeof __propDef.slots;
+export default class DataTableDataCell extends SvelteComponent<DataTableDataCellProps, DataTableDataCellEvents, DataTableDataCellSlots> {
+}
+export {};

package/dist/DataTableHeaderCell.svelte

@@ -0,0 +1,22 @@
+<script>import { TableHeadCell } from "flowbite-svelte";
+import { ArrowDownSolid, ArrowUpSolid } from "flowbite-svelte-icons";
+import { joinClasses } from "./common.ts";
+export let column;
+export let reverseSort;
+export let isSorted;
+export let thClass;
+</script>
+
+<TableHeadCell
+	class={joinClasses(thClass || column.thClassOverride, column.thClassAppend)}
+	on:click
+>
+	{#if isSorted}
+		{#if reverseSort}
+		<ArrowUpSolid class="inline"/>
+		{:else}
+		<ArrowDownSolid class="inline"/>
+		{/if}
+	{/if}
+	<span>{column.title}</span>
+</TableHeadCell>

package/dist/DataTableHeaderCell.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { InternalColumnConfig } from './common.ts';
+declare const __propDef: {
+    props: {
+        column: InternalColumnConfig;
+        reverseSort: boolean;
+        isSorted: boolean;
+        thClass: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableHeaderCellProps = typeof __propDef.props;
+export type DataTableHeaderCellEvents = typeof __propDef.events;
+export type DataTableHeaderCellSlots = typeof __propDef.slots;
+export default class DataTableHeaderCell extends SvelteComponent<DataTableHeaderCellProps, DataTableHeaderCellEvents, DataTableHeaderCellSlots> {
+}
+export {};

package/dist/cells/Actions.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from './ActionsCell.svelte';
+export declare const bookmarkAction: Action;
+export declare const deleteAction: Action;
+export declare const downAction: Action;
+export declare const editAction: Action;
+export declare const favoriteAction: Action;
+export declare const infoAction: Action;
+export declare const notificationAction: Action;
+export declare const settingsAction: Action;
+export declare const shareAction: Action;
+export declare const upAction: Action;

package/dist/cells/Actions.js

@@ -0,0 +1,41 @@
+import { ArrowDownSolid, ArrowUpSolid, BellActiveOutline, BookmarkOutline, CogOutline, EditOutline, HeartSolid, InfoCircleOutline, ShareNodesOutline, TrashBinOutline, } from 'flowbite-svelte-icons';
+export const bookmarkAction = {
+    icon: BookmarkOutline,
+    name: 'bookmark',
+};
+export const deleteAction = {
+    icon: TrashBinOutline,
+    name: 'delete',
+};
+export const downAction = {
+    icon: ArrowDownSolid,
+    name: 'down',
+};
+export const editAction = {
+    icon: EditOutline,
+    name: 'edit',
+};
+export const favoriteAction = {
+    icon: HeartSolid,
+    name: 'favorite',
+};
+export const infoAction = {
+    icon: InfoCircleOutline,
+    name: 'info',
+};
+export const notificationAction = {
+    icon: BellActiveOutline,
+    name: 'notification',
+};
+export const settingsAction = {
+    icon: CogOutline,
+    name: 'settings',
+};
+export const shareAction = {
+    icon: ShareNodesOutline,
+    name: 'share',
+};
+export const upAction = {
+    icon: ArrowUpSolid,
+    name: 'up',
+};

package/dist/cells/ActionsCell.svelte

@@ -0,0 +1,30 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { Button } from "flowbite-svelte";
+export let buttonClass = "border-0 p-1";
+export let buttonColor = "light";
+export let iconClass = "w-4 h-4";
+export let column;
+export let item;
+export let actions = [];
+const dispatch = createEventDispatcher();
+const actionClicked = (action) => {
+  dispatch("action", {
+    action: action.name,
+    column,
+    item
+  });
+};
+</script>
+
+{#each actions as action}
+	<Button
+		class={action.buttonClass || buttonClass}
+		color={action.buttonColor || buttonColor}
+		disabled={action.isDisabled?.(item, column, action)}
+		on:click={() => actionClicked(action)}>
+		<svelte:component this={action.icon} class={action.iconClass || iconClass}/>
+		{#if action.caption}{action.caption}{/if}
+	</Button>
+{/each}

package/dist/cells/ActionsCell.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+type ButtonColor = 'red' | 'yellow' | 'green' | 'purple' | 'blue' | 'light' | 'dark' | 'primary' | 'none' | 'alternative' | undefined;
+export interface Action {
+    buttonClass?: string;
+    buttonColor?: ButtonColor;
+    caption?: string;
+    name: string;
+    icon: ConstructorOfATypedSvelteComponent;
+    iconClass?: string;
+    isDisabled?: (item: any, column: ColumnConfig, action: Action) => boolean;
+}
+declare const __propDef: {
+    props: {
+        buttonClass?: string | undefined;
+        buttonColor?: ButtonColor;
+        iconClass?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+        actions?: Action[] | undefined;
+    };
+    events: {
+        action: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ActionsCellProps = typeof __propDef.props;
+export type ActionsCellEvents = typeof __propDef.events;
+export type ActionsCellSlots = typeof __propDef.slots;
+export default class ActionsCell extends SvelteComponent<ActionsCellProps, ActionsCellEvents, ActionsCellSlots> {
+}
+export {};

package/dist/cells/ButtonCell.svelte

@@ -0,0 +1,15 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Button } from "flowbite-svelte";
+export let caption = "";
+export let column;
+export let item;
+const dispatch = createEventDispatcher();
+const buttonClicked = () => {
+  dispatch("click", {
+    column,
+    item
+  });
+};
+</script>
+
+<Button {...$$props} on:click={buttonClicked}>{#if caption}{caption}{/if}</Button>

package/dist/cells/ButtonCell.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonCellProps = typeof __propDef.props;
+export type ButtonCellEvents = typeof __propDef.events;
+export type ButtonCellSlots = typeof __propDef.slots;
+export default class ButtonCell extends SvelteComponent<ButtonCellProps, ButtonCellEvents, ButtonCellSlots> {
+}
+export {};

package/dist/cells/CheckboxCell.svelte

@@ -0,0 +1,19 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Checkbox } from "flowbite-svelte";
+export let caption = "";
+export let column;
+export let item;
+export let value;
+let localValue = value;
+const dispatch = createEventDispatcher();
+const toggleChanged = () => {
+  dispatch("cellChanged", {
+    column,
+    item,
+    oldValue: value,
+    newValue: localValue
+  });
+};
+</script>
+
+<Checkbox {...$$props} bind:checked={localValue} on:change={toggleChanged}>{#if caption}{caption}{/if}</Checkbox>

package/dist/cells/CheckboxCell.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+        value: any;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckboxCellProps = typeof __propDef.props;
+export type CheckboxCellEvents = typeof __propDef.events;
+export type CheckboxCellSlots = typeof __propDef.slots;
+export default class CheckboxCell extends SvelteComponent<CheckboxCellProps, CheckboxCellEvents, CheckboxCellSlots> {
+}
+export {};

package/dist/cells/InputCell.svelte

@@ -0,0 +1,49 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Input } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let inputType = "text";
+export let item;
+export let column;
+export let value;
+let internalValue;
+$:
+  internalValue = value;
+const dispatch = createEventDispatcher();
+const dispatchCellChanged = () => {
+  if (value !== internalValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue: internalValue
+    });
+  }
+};
+const keypress = (event) => {
+  if (event.key === "Enter") {
+    dispatch("enterPressed", {
+      column,
+      item
+    });
+    dispatchCellChanged();
+  }
+};
+const prevTab = (_event) => {
+  dispatch("prevTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+const nextTab = (_event) => {
+  dispatch("nextTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+</script>
+
+<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
+	<Input type={inputType} bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus/>
+</TabWrapper>

package/dist/cells/InputCell.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inputType?: string | undefined;
+        item: any;
+        column: ColumnConfig;
+        value: string;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+        enterPressed: CustomEvent<any>;
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputCellProps = typeof __propDef.props;
+export type InputCellEvents = typeof __propDef.events;
+export type InputCellSlots = typeof __propDef.slots;
+export default class InputCell extends SvelteComponent<InputCellProps, InputCellEvents, InputCellSlots> {
+}
+export {};

package/dist/cells/NumberInputCell.svelte

@@ -0,0 +1,48 @@
+<script>import { createEventDispatcher } from "svelte";
+import { NumberInput } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let item;
+export let column;
+export let value;
+let internalValue;
+$:
+  internalValue = value;
+const dispatch = createEventDispatcher();
+const dispatchCellChanged = () => {
+  if (value !== internalValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue: internalValue
+    });
+  }
+};
+const keypress = async (event) => {
+  if (event.key === "Enter") {
+    dispatch("enterPressed", {
+      column,
+      item
+    });
+    dispatchCellChanged();
+  }
+};
+const prevTab = (_event) => {
+  dispatch("prevTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+const nextTab = (_event) => {
+  dispatch("nextTab", {
+    column,
+    item
+  });
+  dispatchCellChanged();
+};
+</script>
+
+<TabWrapper on:prevTab={prevTab} on:nextTab={nextTab}>
+	<NumberInput bind:value={internalValue} {...$$props} on:keypress={keypress} autofocus/>
+</TabWrapper>

package/dist/cells/NumberInputCell.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        item: any;
+        column: ColumnConfig;
+        value: number;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+        enterPressed: CustomEvent<any>;
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberInputCellProps = typeof __propDef.props;
+export type NumberInputCellEvents = typeof __propDef.events;
+export type NumberInputCellSlots = typeof __propDef.slots;
+export default class NumberInputCell extends SvelteComponent<NumberInputCellProps, NumberInputCellEvents, NumberInputCellSlots> {
+}
+export {};

package/dist/cells/SelectCell.svelte

@@ -0,0 +1,30 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Select } from "flowbite-svelte";
+import TabWrapper from "./TabWrapper.svelte";
+export let item;
+export let column;
+export let displayProp = "name";
+export let valueProp = "id";
+export let items = [];
+export let value;
+let newValue = value;
+const dispatch = createEventDispatcher();
+$:
+  if (value !== newValue) {
+    dispatch("cellChanged", {
+      column,
+      item,
+      oldValue: value,
+      newValue
+    });
+  }
+</script>
+
+<TabWrapper {column} {item} on:prevTab on:nextTab>
+	<Select
+		{...$$props}
+		items={items.map(item => ({ value: item[valueProp], name: item[displayProp]}))}
+		bind:value={newValue}
+		autofocus
+	/>
+</TabWrapper>

package/dist/cells/SelectCell.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        item: any;
+        column: ColumnConfig;
+        displayProp?: string | undefined;
+        valueProp?: string | undefined;
+        items?: any[] | undefined;
+        value: any;
+    };
+    events: {
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectCellProps = typeof __propDef.props;
+export type SelectCellEvents = typeof __propDef.events;
+export type SelectCellSlots = typeof __propDef.slots;
+export default class SelectCell extends SvelteComponent<SelectCellProps, SelectCellEvents, SelectCellSlots> {
+}
+export {};

package/dist/cells/SpinCell.svelte

@@ -0,0 +1,47 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Button } from "flowbite-svelte";
+import { MinusSolid, PlusSolid } from "flowbite-svelte-icons";
+export let item;
+export let column;
+export let value;
+export let decValue = 1;
+export let incValue = 1;
+export let minValue = void 0;
+export let maxValue = void 0;
+export let minusIcon = MinusSolid;
+export let minusIconClass = "pr-1 w-3 h-3";
+export let plusIcon = PlusSolid;
+export let plusIconClass = "pr-1 w-3 h-3";
+const dispatch = createEventDispatcher();
+const decrement = () => {
+  dispatch("cellChanged", {
+    column,
+    item,
+    oldValue: value,
+    newValue: (value || 0) - decValue
+  });
+};
+const increment = () => {
+  dispatch("cellChanged", {
+    column,
+    item,
+    oldValue: value,
+    newValue: (value || 0) + incValue
+  });
+};
+</script>
+
+<div class="spinner">
+	<Button color="none" class="pr-1" on:click={decrement} disabled={minValue !== undefined && (value - decValue) < minValue}><svelte:component this={minusIcon} class={minusIconClass}/></Button>
+	{value || 0}
+	<Button color="none" class="pl-1" on:click={increment} disabled={maxValue !== undefined && (value + incValue) > maxValue}><svelte:component this={plusIcon} class={plusIconClass}/></Button>
+</div>
+
+<style>
+	.spinner {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/cells/SpinCell.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        item: any;
+        column: ColumnConfig;
+        value: any;
+        decValue?: number | undefined;
+        incValue?: number | undefined;
+        minValue?: number | undefined;
+        maxValue?: number | undefined;
+        minusIcon?: ConstructorOfATypedSvelteComponent | undefined;
+        minusIconClass?: string | undefined;
+        plusIcon?: ConstructorOfATypedSvelteComponent | undefined;
+        plusIconClass?: string | undefined;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpinCellProps = typeof __propDef.props;
+export type SpinCellEvents = typeof __propDef.events;
+export type SpinCellSlots = typeof __propDef.slots;
+export default class SpinCell extends SvelteComponent<SpinCellProps, SpinCellEvents, SpinCellSlots> {
+}
+export {};

package/dist/cells/TabWrapper.svelte

@@ -0,0 +1,23 @@
+<script>import { createEventDispatcher } from "svelte";
+export let item = null;
+export let column = null;
+const dispatch = createEventDispatcher();
+const prevTab = (_event) => {
+  dispatch("prevTab", {
+    column,
+    item
+  });
+};
+const nextTab = (_event) => {
+  dispatch("nextTab", {
+    column,
+    item
+  });
+};
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
+<div tabindex="0" on:focus={prevTab}/>
+<slot />
+<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
+<div tabindex="0" on:focus={nextTab}/>	

package/dist/cells/TabWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        item?: any;
+        column?: ColumnConfig | null | undefined;
+    };
+    events: {
+        prevTab: CustomEvent<any>;
+        nextTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabWrapperProps = typeof __propDef.props;
+export type TabWrapperEvents = typeof __propDef.events;
+export type TabWrapperSlots = typeof __propDef.slots;
+export default class TabWrapper extends SvelteComponent<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
+}
+export {};

package/dist/cells/ToggleCell.svelte

@@ -0,0 +1,19 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Toggle } from "flowbite-svelte";
+export let caption = "";
+export let column;
+export let item;
+export let value;
+let localValue = value;
+const dispatch = createEventDispatcher();
+const toggleChanged = () => {
+  dispatch("cellChanged", {
+    column,
+    item,
+    oldValue: value,
+    newValue: localValue
+  });
+};
+</script>
+
+<Toggle {...$$props} bind:checked={localValue} on:change={toggleChanged}>{#if caption}{caption}{/if}</Toggle>

package/dist/cells/ToggleCell.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnConfig } from '../common.ts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        caption?: string | undefined;
+        column: ColumnConfig;
+        item: any;
+        value: any;
+    };
+    events: {
+        cellChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleCellProps = typeof __propDef.props;
+export type ToggleCellEvents = typeof __propDef.events;
+export type ToggleCellSlots = typeof __propDef.slots;
+export default class ToggleCell extends SvelteComponent<ToggleCellProps, ToggleCellEvents, ToggleCellSlots> {
+}
+export {};

package/dist/cells/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Actions';
+export * from './ActionsCell.svelte';
+export * from './ButtonCell.svelte';
+export * from './CheckboxCell.svelte';
+export * from './InputCell.svelte';
+export * from './NumberInputCell.svelte';
+export * from './SelectCell.svelte';
+export * from './SpinCell.svelte';
+export * from './TabWrapper.svelte';
+export * from './ToggleCell.svelte';

package/dist/cells/index.js

@@ -0,0 +1,10 @@
+export * from './Actions';
+export * from './ActionsCell.svelte';
+export * from './ButtonCell.svelte';
+export * from './CheckboxCell.svelte';
+export * from './InputCell.svelte';
+export * from './NumberInputCell.svelte';
+export * from './SelectCell.svelte';
+export * from './SpinCell.svelte';
+export * from './TabWrapper.svelte';
+export * from './ToggleCell.svelte';

package/dist/common.d.ts

@@ -0,0 +1,36 @@
+export interface ColumnConfig {
+    id?: string;
+    key?: string;
+    title?: string;
+    cellRenderer?: CellRenderer;
+    viewComponent?: ConstructorOfATypedSvelteComponent;
+    viewComponentConfig?: any;
+    focusComponent?: ConstructorOfATypedSvelteComponent;
+    focusComponentConfig?: any;
+    tdClassAppend?: string;
+    tdClassOverride?: string;
+    tdFocusedClassAppend?: string;
+    tdFocusedClassOverride?: string;
+    tdClassGetter?: DataCellClassFunction;
+    thClassAppend?: string;
+    thClassOverride?: string;
+    canFocus?: boolean;
+    canSort?: boolean;
+    sortFunction?: SortFunction;
+    sortKey?: string;
+}
+export type CellRenderer = (columnConfig: ColumnConfig, item: any) => Promise<any>;
+export type SortFunction = (a: any, b: any) => number;
+export type RowClassFunction = (item: any, isFocused: boolean, calcClass: string, defaultClass: string, appendClass: string, overrideClass: string) => string;
+export type DataCellClassFunction = (item: any, column: ColumnConfig, value: any, isFocused: boolean, calcClass: string, defaultClass: string, appendClass: string, overrideClass: string) => string;
+export declare const joinClasses: (...classes: (string | false | null | undefined)[]) => string;
+export type GetTDClassFunction = (item: any, value: any, isFocused: boolean) => string;
+export interface InternalColumnConfig extends ColumnConfig {
+    getTDClass: GetTDClassFunction;
+}
+export declare const blankCellValues: {
+    dataValue: null;
+    displayValue: string;
+};
+export declare const defaultCellRenderer: CellRenderer;
+export type EnterAction = 'next' | 'down' | 'stay';

package/dist/common.js

@@ -0,0 +1,6 @@
+export const joinClasses = (...classes) => (classes || []).filter(value => !!value).join(' ');
+export const blankCellValues = {
+    dataValue: null,
+    displayValue: '',
+};
+export const defaultCellRenderer = async (column, item) => column.key ? { dataValue: item[column.key], displayValue: item[column.key] || '' } : blankCellValues;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import DataTable from './DataTable.svelte';
+export type { CellRenderer, ColumnConfig, DataCellClassFunction, RowClassFunction, SortFunction } from './common.ts';
+export * from './cells/index.ts';
+export default DataTable;

package/dist/index.js

@@ -0,0 +1,3 @@
+import DataTable from './DataTable.svelte';
+export * from './cells/index.ts';
+export default DataTable;

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@emamid/svelte-data-table",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && 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",
+		"test": "vitest",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "8.56.0",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+    "flowbite": "^2.2.1",
+    "flowbite-svelte": "^0.44.22",
+    "flowbite-svelte-icons": "^1.0.2",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3",
+		"vitest": "^1.0.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}