@isoftdata/svelte-table 2.6.7 → 2.8.0

package/dist/Table.svelte

@@ -20,7 +20,15 @@
 
 	import type { i18n } from 'i18next'
 	import type { Get } from 'type-fest'
-	import type { Column as GenericColumn, SortDirection, UuidRowProps, RowProperties, FooterReducerValue } from './'
+	import {
+		type Column as GenericColumn,
+		type SortDirection,
+		type UuidRowProps,
+		type RowProperties,
+		type FooterReducerValue,
+		ARBITRARY_PROPERTY_PREFIX,
+		type ArbitraryProperty,
+	} from './'
 
 	import { writable, type Writable } from 'svelte/store'
 
@@ -40,11 +48,13 @@
 
 	type K = keyof R
 	type KeyPath = RowProperties<R>
+	type ColumnProperty = KeyPath | ArbitraryProperty
+
 	type IndexedRow = R & { originalIndex: number; uuid: string }
 	type GetRowProperty = Get<R, KeyPath>
 	type GetIndexedRowProperty = Get<IndexedRow, RowProperties<IndexedRow>>
 	type FooterValue = {
-		property: KeyPath
+		property: ColumnProperty
 		value: FooterReducerValue<R>
 	}
 	// Type hack so passing an array of columns without the type argument doesn't reduce the type of R to any
@@ -234,6 +244,11 @@
 
 	// #endregion
 	// #region Functions
+
+	function isArbitraryProperty(property: string | undefined): property is ArbitraryProperty {
+		return !!property?.startsWith(ARBITRARY_PROPERTY_PREFIX)
+	}
+
 	export async function defaultColumnClicked(clickedColumn: Column, sortDirection: SortDirection) {
 		if (currentPageNumber !== lastPageNumber) {
 			paginationComponent?.setPageNumber(1)
@@ -248,7 +263,9 @@
 	}
 
 	function defaultFilter(filter: string, rows: R[], columns: Column[]): IndexedRow[] {
-		const columnProps = columns?.map(({ property }) => property)
+		const columnProps = columns
+			?.map(({ property }) => property)
+			.filter((property): property is KeyPath => !isArbitraryProperty(property))
 
 		if (filterEnabled) {
 			const props = filterProps || columnProps
@@ -318,7 +335,7 @@
 	}
 
 	async function columnClickHandler(clickedColumn: Column) {
-		if (clickedColumn.sortType === false || columnResizingIsActive) {
+		if (clickedColumn.sortType === false || columnResizingIsActive || isArbitraryProperty(clickedColumn.property)) {
 			return
 		}
 		sortDirection = sortDirection === 'ASC' && clickedColumn.property === sortColumn?.property ? 'DESC' : 'ASC'
@@ -448,10 +465,15 @@
 		const hasPreviousSort = previousSortColumn && previousSortOrder.length > 0
 
 		let sortProp: KeyPath
-
-		if (keepSameSortOrder && hasPreviousSort && previousSortColumn && idProp) {
+		if (
+			keepSameSortOrder &&
+			hasPreviousSort &&
+			previousSortColumn &&
+			idProp &&
+			!isArbitraryProperty(previousSortColumn.property)
+		) {
 			sortColumn = previousSortColumn
-			sortProp = sortColumn.property
+			sortProp = previousSortColumn.property
 			sortDirection = 'ASC' //force ASC for keeping the same order because we defined the order in previousSortOrder
 
 			rows = rows.map(row => {
@@ -461,7 +483,7 @@
 
 				return { ...row, order: foundItem ? foundItem.order : 0 }
 			})
-		} else if (sortColumn?.property) {
+		} else if (sortColumn?.property && !isArbitraryProperty(sortColumn.property)) {
 			sortProp = sortColumn.property
 		} else {
 			// no sort property, can't sort
@@ -540,7 +562,7 @@
 		}
 	}
 
-	export function setColumnVisibility(columnProperties: Array<KeyPath> | KeyPath, visible: boolean) {
+	export function setColumnVisibility(columnProperties: Array<ColumnProperty> | ColumnProperty, visible: boolean) {
 		if (!Array.isArray(columnProperties)) {
 			columnProperties = [columnProperties]
 		}
@@ -548,7 +570,7 @@
 		try {
 			untrack(() => {
 				columnInfo.updateColumns(
-					columnProperties.map((property): { property: RowProperties<R>; visible: boolean } => ({
+					columnProperties.map((property): { property: ColumnProperty; visible: boolean } => ({
 						property,
 						visible,
 					})),
@@ -560,7 +582,10 @@
 	}
 
 	/** When called in `onMount` or an effect, will set the visibility of the specified columns whenever the value of `getVisible()` changes*/
-	export function setColumnVisibilityWatch(columnProperties: Array<KeyPath> | KeyPath, getVisible: () => boolean) {
+	export function setColumnVisibilityWatch(
+		columnProperties: Array<ColumnProperty> | ColumnProperty,
+		getVisible: () => boolean,
+	) {
 		$effect(() => {
 			const visible = getVisible()
 			setColumnVisibility(columnProperties, visible)
@@ -643,7 +668,7 @@
 		await tick()
 		if (columnResizingEnabled) {
 			columnInfo.updateColumns(
-				columns.map((column): { property: RowProperties<R>; userWidth: string } => {
+				columns.map((column): { property: ColumnProperty; userWidth: string } => {
 					const thisColumnInfo = columnInfo.current[column.property]
 					const prevUserWidth = thisColumnInfo?.userWidth
 					// Minimum width will be inherited from the layout on reset, but this won't, so re-set it here if needed
@@ -698,7 +723,9 @@
 				const mathFunctions = ['AVG', 'SUM']
 
 				let columnValues: Array<number | GetRowProperty> = rows.map(row => {
-					const value = getNestedProperty(row, property)
+					const value = isArbitraryProperty(property)
+						? ('' as Get<R, RowProperties<R>>)
+						: getNestedProperty(row, property)
 					if (
 						column.footer?.fn &&
 						typeof column.footer.fn === 'string' &&
@@ -821,7 +848,7 @@
 					<th
 						id="col-{tableId}-{column.property}"
 						title={column.title ?? column.name}
-						style:cursor={column.sortType !== false ? 'pointer' : ''}
+						style:cursor={column.sortType !== false && !isArbitraryProperty(column.property) ? 'pointer' : ''}
 						style:width={column.userWidth ?? column.width}
 						style:min-width={column.minWidth}
 						data-sort-specified={isSortColumn ? sortDirection : ''}
@@ -889,9 +916,11 @@
 									align={column.align}
 									property={column.property}
 								>
-									{column.formatter
-										? column.formatter(getNestedProperty(row, column.property, ''))
-										: getNestedProperty(row, column.property, '')}
+									{isArbitraryProperty(column.property)
+										? ''
+										: column.formatter
+											? column.formatter(getNestedProperty(row, column.property, ''))
+											: getNestedProperty(row, column.property, '')}
 								</Td>
 							{/each}
 						</tr>
@@ -908,7 +937,10 @@
 						{@render footerRow({ footers })}
 					{:else}
 						{#each footers as { property, value } (property)}
-							<Td {property}>{value ?? ''}</Td>
+							<Td
+								{property}
+								tagName="TH">{value ?? ''}</Td
+							>
 						{/each}
 					{/if}
 				</tr>

package/dist/Table.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import { ColumnInfoRunicStore } from './column-info-store.svelte';
-import type { Column as GenericColumn, SortDirection, UuidRowProps, RowProperties, FooterReducerValue } from './';
+import { type Column as GenericColumn, type SortDirection, type UuidRowProps, type RowProperties, type FooterReducerValue } from './';
 import type { HTMLTableAttributes, ClassValue } from 'svelte/elements';
 declare class __sveltets_Render<R extends UuidRowProps> {
     props(): Omit<HTMLTableAttributes, "children" | `bind:${string}` | `on:${string}` | `aria-${string}`> & {
@@ -15,7 +15,7 @@ declare class __sveltets_Render<R extends UuidRowProps> {
         currentPageNumber?: number;
         showFooter?: boolean;
         footers?: {
-            property: RowProperties<R>;
+            property: `_${string}` | RowProperties<R>;
             value: FooterReducerValue<R>;
         }[] | undefined;
         lazySort?: boolean;
@@ -126,7 +126,7 @@ declare class __sveltets_Render<R extends UuidRowProps> {
         }]> | undefined;
         footerRow?: Snippet<[{
             footers: {
-                property: RowProperties<R>;
+                property: `_${string}` | RowProperties<R>;
                 value: FooterReducerValue<R>;
             }[];
         }]> | undefined;
@@ -203,8 +203,8 @@ declare class __sveltets_Render<R extends UuidRowProps> {
             sortDirection: SortDirection;
             sameSortOrder: boolean;
         }) => void;
-        setColumnVisibility: (columnProperties: RowProperties<R> | RowProperties<R>[], visible: boolean) => void;
-        setColumnVisibilityWatch: (columnProperties: RowProperties<R> | RowProperties<R>[], getVisible: () => boolean) => void;
+        setColumnVisibility: (columnProperties: (`_${string}` | RowProperties<R>) | (`_${string}` | RowProperties<R>)[], visible: boolean) => void;
+        setColumnVisibilityWatch: (columnProperties: (`_${string}` | RowProperties<R>) | (`_${string}` | RowProperties<R>)[], getVisible: () => boolean) => void;
     };
 }
 interface $$IsomorphicComponent {

package/dist/Td.svelte

@@ -27,6 +27,7 @@
 		enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
 		/** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
 		stopPropagation?: boolean
+		tagName?: 'TD' | 'TH'
 		children?: Snippet
 	}
 
@@ -37,6 +38,7 @@
 		align = $bindable(columnInfo.current[property]?.align),
 		enterGoesDown = false,
 		stopPropagation = false,
+		tagName = 'TD',
 		children,
 		...rest
 	}: Props = $props()
@@ -104,7 +106,8 @@
 </script>
 
 {#if visible}
-	<td
+	<svelte:element
+		this={tagName}
 		class={[classNames, alignClass]}
 		{...rest}
 		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
@@ -126,7 +129,7 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-	</td>
+	</svelte:element>
 {/if}
 
 <style>

package/dist/Td.svelte.d.ts

@@ -20,6 +20,7 @@ interface Props extends Omit<HTMLTdAttributes, 'align'> {
     }) => void);
     /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
     stopPropagation?: boolean;
+    tagName?: 'TD' | 'TH';
     children?: Snippet;
 }
 declare const Td: import("svelte").Component<Props, {}, "align">;

package/dist/column-info-store.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnInfoObject, Column, UuidRowProps, ColumnInfo as GenericColumnInfo, RowProperties } from './types';
+import type { ColumnInfoObject, Column, UuidRowProps, ColumnInfo as GenericColumnInfo, RowProperties, ArbitraryProperty } from './types';
 type StoreOptions = {
     /** The key to use in localstorage */
     key?: string;
@@ -44,9 +44,9 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         iconLeft?: boolean | undefined;
         iconPrefix?: import("@fortawesome/fontawesome-common-types").IconPrefix | undefined;
         minWidth?: string | undefined;
-        name: string;
+        name?: string | undefined;
         numeric?: boolean | undefined;
-        property: RowProperties<R>;
+        property: `_${string}` | RowProperties<R>;
         sortType?: "ALPHA_NUM" | "STANDARD" | false | undefined;
         title?: string | undefined;
         unhidable?: boolean | undefined;
@@ -56,9 +56,9 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         visible: boolean;
     }[];
     get current(): ColumnInfoObject<R>;
-    updateColumn(property: RowProperties<R>, value: Partial<GenericColumnInfo<R>>): void;
+    updateColumn(property: RowProperties<R> | ArbitraryProperty, value: Partial<GenericColumnInfo<R>>): void;
     updateColumns(newColumnInfos: Array<Partial<GenericColumnInfo<R>> & {
-        property: RowProperties<R>;
+        property: RowProperties<R> | ArbitraryProperty;
     }>): void;
     private getStoreValFromColumns;
     /** Takes values from the given column, removes non-serializable values, and fills in with default serializable values */

package/dist/column-info-store.svelte.js

@@ -61,7 +61,7 @@ export class ColumnInfoRunicStore {
                 console.error(`Column ${col.property} not found in column info store`);
                 return;
             }
-            // This gets run for every column in the table on render, so use Object.assign as it's faster
+            // This gets run for every column in the table on render, so use Object.assign as it's faster than spreading
             Object.assign(this.#value[col.property], col);
         });
         this.#lastValue = this.#value;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as TreeRow } from './TreeRow.svelte';
 export { default as DraggableRows } from './DraggableRows.svelte';
 export * from './column-info-store.svelte';
 export * from './tree-utility.js';
+export * from './types.js';
 export type * from './Pagination.svelte';
 export type * from './types';
 export type * from './bracket-paths';

package/dist/index.js

@@ -6,3 +6,4 @@ export { default as TreeRow } from './TreeRow.svelte';
 export { default as DraggableRows } from './DraggableRows.svelte';
 export * from './column-info-store.svelte';
 export * from './tree-utility.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 import type { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
 import type { BracketPaths } from './bracket-paths';
 import type { Get, Simplify } from 'type-fest';
+export declare const ARBITRARY_PROPERTY_PREFIX = "_";
+export type ArbitraryProperty = `${typeof ARBITRARY_PROPERTY_PREFIX}${string}`;
 export type SortDirection = 'ASC' | 'DESC';
 /** String untion of all properties of the row object, or just `string` as a fallback.
  *
@@ -49,9 +51,9 @@ export type Column<R extends UuidRowProps = any> = {
     iconLeft?: boolean;
     iconPrefix?: IconPrefix;
     minWidth?: string;
-    name: string;
+    name?: string;
     numeric?: boolean;
-    property: RowProperties<R>;
+    property: RowProperties<R> | ArbitraryProperty;
     sortType?: 'ALPHA_NUM' | 'STANDARD' | false;
     title?: string;
     unhidable?: boolean;
@@ -60,7 +62,7 @@ export type Column<R extends UuidRowProps = any> = {
     width?: string;
     wrap?: boolean;
 };
-export type FooterReducerValue<R extends UuidRowProps> = string | number | Get<R, RowProperties<R>>;
+export type FooterReducerValue<R extends UuidRowProps> = string | number | Get<R, RowProperties<R> | ArbitraryProperty>;
 export type ColumnInfo<R extends UuidRowProps> = Simplify<Column<R> & {
     visible: boolean;
 }>;

package/dist/types.js

@@ -1 +1 @@
-export {};
+export const ARBITRARY_PROPERTY_PREFIX = '_';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.6.7",
+  "version": "2.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",