sveltacular 1.0.26 → 1.0.27

package/dist/generic/pill/pill.svelte

@@ -8,7 +8,8 @@
 		shape = 'rounded' as 'circular' | 'square' | 'rounded' | 'badge' | 'circle',
 		fill = 'solid' as 'solid' | 'outline',
 		compact = false,
-		label
+		label,
+		children
 	}: {
 		size?: FormFieldSizeOptions;
 		variant?: 'standard' | 'positive' | 'negative';
@@ -16,11 +17,15 @@
 		fill?: 'solid' | 'outline';
 		compact?: boolean;
 		label?: string;
+		children?: Snippet;
 	} = $props();
 </script>
 
 <div class="pill {size} {variant} {shape} {fill}" class:compact>
-	<span>{label}</span>
+	<span>
+		{label}
+		{@render children?.()}
+	</span>
 </div>
 
 <style>.pill {

package/dist/generic/pill/pill.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     size?: FormFieldSizeOptions;
@@ -6,6 +7,7 @@ type $$ComponentProps = {
     fill?: 'solid' | 'outline';
     compact?: boolean;
     label?: string;
+    children?: Snippet;
 };
 declare const Pill: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pill = ReturnType<typeof Pill>;

package/dist/tables/cell-renderers.d.ts

@@ -1,4 +1,4 @@
-import type { JsonObject, ColumnDef, TextColumn, NumberColumn, CurrencyColumn, DateColumn, DateTimeColumn, BooleanColumn, EmailColumn, CustomColumn } from '../types/data.js';
+import type { JsonObject, ColumnDef, TextColumn, NumberColumn, CurrencyColumn, DateColumn, DateTimeColumn, BooleanColumn, EmailColumn, ArrayColumn, CustomColumn } from '../types/data.js';
 export interface CellRenderContext<T extends JsonObject = JsonObject> {
     row: T;
     column: ColumnDef<T>;
@@ -15,6 +15,14 @@ export declare function formatDateCell<T extends JsonObject>(row: T, column: Dat
 export declare function formatDateTimeCell<T extends JsonObject>(row: T, column: DateTimeColumn<T>): string;
 export declare function formatBooleanCell<T extends JsonObject>(row: T, column: BooleanColumn<T>): string;
 export declare function formatEmailCell<T extends JsonObject>(row: T, column: EmailColumn<T>): string;
+export interface ArrayCellResult {
+    items: Array<{
+        text: string;
+        link: string | null;
+    }>;
+    separator: 'comma' | 'semicolon' | 'line' | 'pill';
+}
+export declare function formatArrayCell<T extends JsonObject>(row: T, column: ArrayColumn<T>): ArrayCellResult;
 export declare function formatCustomCell<T extends JsonObject>(row: T, column: CustomColumn<T>): string;
 export declare function formatCell<T extends JsonObject>(row: T, column: ColumnDef<T>): string;
 export declare function getCellLink<T extends JsonObject>(row: T, column: ColumnDef<T>): string | null;

package/dist/tables/cell-renderers.js

@@ -10,92 +10,101 @@ export function isNullish(value) {
 export function isEmpty(value) {
     return typeof value === 'string' && value.trim() === '';
 }
+function createFormatter(config) {
+    return (row, column) => {
+        const value = config.getValue(row, column);
+        // Check for null/undefined
+        if (isNullish(value) && 'nullText' in column && column.nullText) {
+            return column.nullText;
+        }
+        // Check for empty (if applicable)
+        if (config.checkEmpty && config.checkEmpty(value)) {
+            if ('emptyText' in column && column.emptyText) {
+                return column.emptyText;
+            }
+        }
+        // Use custom format if provided
+        if (config.customFormat && 'format' in column && column.format) {
+            return column.format(value, row);
+        }
+        // Use default format
+        return config.defaultFormat(value);
+    };
+}
 // Format text column
 export function formatTextCell(row, column) {
-    const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    if (isEmpty(value) && column.emptyText) {
-        return column.emptyText;
-    }
-    if (column.format) {
-        return column.format(String(value), row);
-    }
-    return String(value ?? '');
+    const formatter = createFormatter({
+        getValue: (row, column) => getCellValue(row, column.key),
+        checkEmpty: isEmpty,
+        defaultFormat: (value) => String(value ?? ''),
+        customFormat: (value, row) => String(value)
+    });
+    return formatter(row, column);
 }
 // Format number column
 export function formatNumberCell(row, column) {
-    const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    const numValue = Number(value);
-    if (isNaN(numValue)) {
-        return column.emptyText ?? '';
-    }
-    if (column.format) {
-        return column.format(numValue, row);
-    }
-    return numValue.toLocaleString();
+    const formatter = createFormatter({
+        getValue: (row, column) => {
+            const value = getCellValue(row, column.key);
+            return Number(value);
+        },
+        checkEmpty: (value) => isNaN(value),
+        defaultFormat: (value) => value.toLocaleString(),
+        customFormat: (value, row) => value.toString()
+    });
+    return formatter(row, column);
 }
 // Format currency column
 export function formatCurrencyCell(row, column) {
-    const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    const numValue = Number(value);
-    if (isNaN(numValue)) {
-        return column.emptyText ?? '';
-    }
-    if (column.format) {
-        return column.format(numValue, row);
-    }
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: column.currency ?? 'USD'
-    }).format(numValue);
+    const formatter = createFormatter({
+        getValue: (row, column) => {
+            const value = getCellValue(row, column.key);
+            return Number(value);
+        },
+        checkEmpty: (value) => isNaN(value),
+        defaultFormat: (value) => new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: column.currency ?? 'USD'
+        }).format(value),
+        customFormat: (value, row) => value.toString()
+    });
+    return formatter(row, column);
 }
 // Format date column
 export function formatDateCell(row, column) {
-    const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    if (isEmpty(value) && column.emptyText) {
-        return column.emptyText;
-    }
-    if (column.format) {
-        return column.format(value, row);
-    }
-    try {
-        const date = typeof value === 'string' ? new Date(value) : value;
-        return date.toISOString().substring(0, 10);
-    }
-    catch {
-        return String(value ?? '');
-    }
+    const formatter = createFormatter({
+        getValue: (row, column) => getCellValue(row, column.key),
+        checkEmpty: isEmpty,
+        defaultFormat: (value) => {
+            try {
+                const date = typeof value === 'string' ? new Date(value) : value;
+                return date.toISOString().substring(0, 10);
+            }
+            catch {
+                return String(value ?? '');
+            }
+        },
+        customFormat: (value, row) => String(value)
+    });
+    return formatter(row, column);
 }
 // Format datetime column
 export function formatDateTimeCell(row, column) {
-    const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    if (isEmpty(value) && column.emptyText) {
-        return column.emptyText;
-    }
-    if (column.format) {
-        return column.format(value, row);
-    }
-    try {
-        const date = typeof value === 'string' ? new Date(value) : value;
-        return date.toLocaleString();
-    }
-    catch {
-        return String(value ?? '');
-    }
+    const formatter = createFormatter({
+        getValue: (row, column) => getCellValue(row, column.key),
+        checkEmpty: isEmpty,
+        defaultFormat: (value) => {
+            try {
+                const date = typeof value === 'string' ? new Date(value) : value;
+                return date.toLocaleString();
+            }
+            catch {
+                return String(value ?? '');
+            }
+        },
+        customFormat: (value, row) => String(value)
+    });
+    return formatter(row, column);
 }
 // Format boolean column
 export function formatBooleanCell(row, column) {
@@ -114,23 +123,43 @@ export function formatBooleanCell(row, column) {
 }
 // Format email column
 export function formatEmailCell(row, column) {
+    const formatter = createFormatter({
+        getValue: (row, column) => getCellValue(row, column.key),
+        checkEmpty: isEmpty,
+        defaultFormat: (value) => String(value ?? ''),
+        customFormat: (value, row) => String(value)
+    });
+    return formatter(row, column);
+}
+// Format array column
+export function formatArrayCell(row, column) {
     const value = getCellValue(row, column.key);
-    if (isNullish(value) && column.nullText) {
-        return column.nullText;
-    }
-    if (isEmpty(value) && column.emptyText) {
-        return column.emptyText;
-    }
-    if (column.format) {
-        return column.format(String(value), row);
-    }
-    return String(value ?? '');
+    const arr = Array.isArray(value) ? value : [];
+    const separator = column.separator ?? 'comma';
+    const items = arr.map((element, index) => {
+        let text;
+        if (column.format) {
+            text = column.format(element, row, index);
+        }
+        else if (column.displayKey && typeof element === 'object' && element !== null) {
+            text = String(element[column.displayKey] ?? '');
+        }
+        else {
+            text = String(element);
+        }
+        const link = column.link ? column.link(element, row, index) : null;
+        return { text, link };
+    });
+    return { items, separator };
 }
 // Format custom column
 export function formatCustomCell(row, column) {
     if (isNullish(row) && column.nullText) {
         return column.nullText;
     }
+    if (!column.render) {
+        return '';
+    }
     const value = column.render(row);
     return String(value ?? '');
 }
@@ -152,14 +181,25 @@ export function formatCell(row, column) {
             return formatBooleanCell(row, column);
         case 'email':
             return formatEmailCell(row, column);
+        case 'array':
+            // Array type returns structured data, not a string
+            // Use formatArrayCell directly instead
+            return '';
         case 'custom':
             return formatCustomCell(row, column);
     }
 }
 // Get link for a cell if applicable
 export function getCellLink(row, column) {
+    // Array columns handle their own links via formatArrayCell
+    if (column.type === 'array') {
+        return null;
+    }
     if ('link' in column && column.link) {
-        return column.link(row);
+        // Type guard to ensure we're not dealing with array column
+        if (typeof column.link === 'function') {
+            return column.link(row);
+        }
     }
     // Auto-link emails
     if (column.type === 'email') {

package/dist/tables/data-grid-actions-cell.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { JsonObject } from '../types/data.js';
+	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
+	import TableCell from './table-cell.svelte';
+	import Button from '../forms/button/button.svelte';
+	import DropdownButton from '../navigation/dropdown-button/dropdown-button.svelte';
+	import DropdownItem from '../generic/dropdown-item/dropdown-item.svelte';
+
+	interface Action {
+		text: string;
+		variant?: ButtonVariant;
+		href?: (row: JsonObject) => string;
+		onClick?: (row: JsonObject) => unknown;
+	}
+
+	interface Actions {
+		text?: string;
+		type?: 'buttons' | 'dropdown';
+		variant?: ButtonVariant | 'default';
+		size?: FormFieldSizeOptions;
+		align?: 'left' | 'center' | 'right';
+		items: Action[];
+	}
+
+	let {
+		actions,
+		row,
+		actionButtonVariant = 'outline',
+		actionButtonSize = 'sm',
+		actionAlign = 'center'
+	}: {
+		actions: Actions;
+		row: JsonObject;
+		actionButtonVariant?: ButtonVariant;
+		actionButtonSize?: FormFieldSizeOptions;
+		actionAlign?: 'left' | 'center' | 'right';
+	} = $props();
+</script>
+
+<TableCell type="actions" align={actionAlign}>
+	{#if actions.type === 'dropdown'}
+		<DropdownButton text={actions.text ?? ''} variant="ghost">
+			{#each actions.items as action}
+				<DropdownItem
+					href={action.href ? action.href(row) : undefined}
+					onClick={action.onClick ? () => action.onClick?.(row) : undefined}
+					>{action.text}</DropdownItem
+				>
+			{/each}
+		</DropdownButton>
+	{:else}
+		<div class="actions">
+			{#each actions.items as action}
+				{@const buttonVariant = action.variant ?? actionButtonVariant}
+				<Button
+					type="button"
+					variant={buttonVariant}
+					size={actionButtonSize}
+					href={action.href ? action.href(row) : undefined}
+					onClick={action.onClick ? () => action.onClick?.(row) : undefined}
+				>
+					{action.text}
+				</Button>
+			{/each}
+		</div>
+	{/if}
+</TableCell>
+
+<style>.actions {
+  display: flex;
+  gap: 0.5rem;
+}</style>

package/dist/tables/data-grid-actions-cell.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { JsonObject } from '../types/data.js';
+import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
+interface Action {
+    text: string;
+    variant?: ButtonVariant;
+    href?: (row: JsonObject) => string;
+    onClick?: (row: JsonObject) => unknown;
+}
+interface Actions {
+    text?: string;
+    type?: 'buttons' | 'dropdown';
+    variant?: ButtonVariant | 'default';
+    size?: FormFieldSizeOptions;
+    align?: 'left' | 'center' | 'right';
+    items: Action[];
+}
+type $$ComponentProps = {
+    actions: Actions;
+    row: JsonObject;
+    actionButtonVariant?: ButtonVariant;
+    actionButtonSize?: FormFieldSizeOptions;
+    actionAlign?: 'left' | 'center' | 'right';
+};
+declare const DataGridActionsCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataGridActionsCell = ReturnType<typeof DataGridActionsCell>;
+export default DataGridActionsCell;

package/dist/tables/data-grid-cell.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ColumnDef, JsonObject } from '../types/data.js';
+	import TableCell from './table-cell.svelte';
+	import Pill from '../generic/pill/pill.svelte';
+	import {
+		formatCell,
+		getCellLink,
+		getCellAlignment,
+		getCellTypeClass,
+		getCellValue,
+		formatArrayCell
+	} from './cell-renderers.js';
+
+	interface CellContext<T extends JsonObject = JsonObject> {
+		row: T;
+		value: unknown;
+		column: ColumnDef<T>;
+		rowIndex: number;
+	}
+
+	let {
+		row,
+		column,
+		rowIndex,
+		cellSnippet = undefined,
+		width = undefined
+	}: {
+		row: JsonObject;
+		column: ColumnDef;
+		rowIndex: number;
+		cellSnippet?: Snippet<[CellContext]>;
+		width?: number | string;
+	} = $props();
+
+	let cellValue = $derived(getCellValue(row, column.key));
+	let cellAlign = $derived(getCellAlignment(column));
+</script>
+
+<TableCell type={getCellTypeClass(column)} {width} align={cellAlign}>
+	{#if cellSnippet}
+		{@render cellSnippet({ row, value: cellValue, column, rowIndex })}
+	{:else if column.type === 'custom' && column.component}
+		{@const CellComponent = column.component}
+		<CellComponent {row} value={cellValue} column={column} {rowIndex} />
+	{:else if column.type === 'array'}
+		{@const arrayResult = formatArrayCell(row, column)}
+		<span class="array-cell array-{arrayResult.separator}">
+			{#each arrayResult.items as item, i}
+				{#if arrayResult.separator === 'pill'}
+					<Pill compact>
+						{#if item.link}<a href={item.link}>{item.text}</a>{:else}{item.text}{/if}
+					</Pill>
+				{:else if arrayResult.separator === 'line'}
+					<div>
+						{#if item.link}<a href={item.link}>{item.text}</a>{:else}{item.text}{/if}
+					</div>
+				{:else}
+					{#if i > 0}
+						{#if arrayResult.separator === 'comma'},
+						{:else if arrayResult.separator === 'semicolon'};
+						{/if}
+					{/if}
+					{#if item.link}<a href={item.link}>{item.text}</a>{:else}{item.text}{/if}
+				{/if}
+			{/each}
+		</span>
+	{:else if column.type === 'check' || column.type === 'boolean'}
+		{#if row[column.key]}
+			<Pill shape="circle" variant="positive" compact label="✔" />
+		{/if}
+	{:else}
+		{@const cellLink = getCellLink(row, column)}
+		{#if cellLink}
+			<a href={cellLink}>{formatCell(row, column)}</a>
+		{:else}
+			{formatCell(row, column)}
+		{/if}
+	{/if}
+</TableCell>
+
+<style>a {
+  color: var(--table-link-fg, rgb(0, 0, 200));
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+.array-cell {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.array-cell.array-comma, .array-cell.array-semicolon {
+  gap: 0;
+}
+.array-cell.array-line {
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.array-cell.array-pill {
+  gap: 0.25rem;
+}</style>

package/dist/tables/data-grid-cell.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDef, JsonObject } from '../types/data.js';
+interface CellContext<T extends JsonObject = JsonObject> {
+    row: T;
+    value: unknown;
+    column: ColumnDef<T>;
+    rowIndex: number;
+}
+type $$ComponentProps = {
+    row: JsonObject;
+    column: ColumnDef;
+    rowIndex: number;
+    cellSnippet?: Snippet<[CellContext]>;
+    width?: number | string;
+};
+declare const DataGridCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataGridCell = ReturnType<typeof DataGridCell>;
+export default DataGridCell;

package/dist/tables/data-grid-row.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ColumnDef, JsonObject } from '../types/data.js';
+	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
+	import TableRow from './table-row.svelte';
+	import TableSelectionCell from './table-selection-cell.svelte';
+	import DataGridCell from './data-grid-cell.svelte';
+	import DataGridActionsCell from './data-grid-actions-cell.svelte';
+
+	interface CellContext<T extends JsonObject = JsonObject> {
+		row: T;
+		value: unknown;
+		column: ColumnDef<T>;
+		rowIndex: number;
+	}
+
+	interface Action {
+		text: string;
+		variant?: ButtonVariant;
+		href?: (row: JsonObject) => string;
+		onClick?: (row: JsonObject) => unknown;
+	}
+
+	interface Actions {
+		text?: string;
+		type?: 'buttons' | 'dropdown';
+		variant?: ButtonVariant | 'default';
+		size?: FormFieldSizeOptions;
+		align?: 'left' | 'center' | 'right';
+		items: Action[];
+	}
+
+	let {
+		row,
+		rowIndex,
+		visibleCols,
+		hasSelectionCol = false,
+		hasActionCol = false,
+		actions = undefined,
+		cells = undefined,
+		actionButtonVariant = 'outline',
+		actionButtonSize = 'sm',
+		actionAlign = 'center'
+	}: {
+		row: JsonObject;
+		rowIndex: number;
+		visibleCols: ColumnDef[];
+		hasSelectionCol?: boolean;
+		hasActionCol?: boolean;
+		actions?: Actions;
+		cells?: Record<string, Snippet<[CellContext]>>;
+		actionButtonVariant?: ButtonVariant;
+		actionButtonSize?: FormFieldSizeOptions;
+		actionAlign?: 'left' | 'center' | 'right';
+	} = $props();
+</script>
+
+<TableRow {row} {rowIndex} selectable={hasSelectionCol}>
+	{#if hasSelectionCol}
+		<TableSelectionCell {row} {rowIndex} />
+	{/if}
+	{#each visibleCols as col}
+		<DataGridCell
+			{row}
+			column={col}
+			{rowIndex}
+			cellSnippet={cells?.[col.key]}
+			width={col.width}
+		/>
+	{/each}
+	{#if hasActionCol && actions}
+		<DataGridActionsCell {actions} {row} {actionButtonVariant} {actionButtonSize} {actionAlign} />
+	{/if}
+</TableRow>

package/dist/tables/data-grid-row.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDef, JsonObject } from '../types/data.js';
+import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
+interface CellContext<T extends JsonObject = JsonObject> {
+    row: T;
+    value: unknown;
+    column: ColumnDef<T>;
+    rowIndex: number;
+}
+interface Action {
+    text: string;
+    variant?: ButtonVariant;
+    href?: (row: JsonObject) => string;
+    onClick?: (row: JsonObject) => unknown;
+}
+interface Actions {
+    text?: string;
+    type?: 'buttons' | 'dropdown';
+    variant?: ButtonVariant | 'default';
+    size?: FormFieldSizeOptions;
+    align?: 'left' | 'center' | 'right';
+    items: Action[];
+}
+type $$ComponentProps = {
+    row: JsonObject;
+    rowIndex: number;
+    visibleCols: ColumnDef[];
+    hasSelectionCol?: boolean;
+    hasActionCol?: boolean;
+    actions?: Actions;
+    cells?: Record<string, Snippet<[CellContext]>>;
+    actionButtonVariant?: ButtonVariant;
+    actionButtonSize?: FormFieldSizeOptions;
+    actionAlign?: 'left' | 'center' | 'right';
+};
+declare const DataGridRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataGridRow = ReturnType<typeof DataGridRow>;
+export default DataGridRow;

package/dist/tables/data-grid.svelte

@@ -2,33 +2,29 @@
 	import TableCell from './table-cell.svelte';
 	import TableHeaderCell from './table-header-cell.svelte';
 	import TableHeader from './table-header.svelte';
-	import TableRow from './table-row.svelte';
 	import Table from './table.svelte';
-	import TableSelectionCell from './table-selection-cell.svelte';
 	import TableSelectionHeaderCell from './table-selection-header-cell.svelte';
+	import DataGridRow from './data-grid-row.svelte';
 	import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
-	import Button from '../forms/button/button.svelte';
-	import DropdownItem from '../generic/dropdown-item/dropdown-item.svelte';
 	import Empty from '../generic/empty/empty.svelte';
-	import Pill from '../generic/pill/pill.svelte';
 	import Icon from '../icons/icon.svelte';
-	import DropdownButton from '../navigation/dropdown-button/dropdown-button.svelte';
 	import Pagination from '../navigation/pagination/pagination.svelte';
 	import Loading from '../placeholders/loading.svelte';
 	import TableCaption from './table-caption.svelte';
-	import {
-		formatCell,
-		getCellLink,
-		getCellAlignment,
-		getCellTypeClass,
-		sortRows
-	} from './cell-renderers.js';
+	import { getCellAlignment, sortRows } from './cell-renderers.js';
 	import type { Snippet } from 'svelte';
 	import { useVirtualList } from '../helpers/use-virtual-list.svelte.js';
 	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 
 	type PaginationEvent = (pagination: PaginationProperties) => void;
 
+	interface CellContext<T extends JsonObject = JsonObject> {
+		row: T;
+		value: unknown;
+		column: ColumnDef<T>;
+		rowIndex: number;
+	}
+
 	interface Action {
 		text: string;
 		variant?: ButtonVariant;
@@ -61,6 +57,7 @@
 		onSelectionChange = undefined,
 		selectedCount = $bindable(0),
 		children = undefined,
+		cells = undefined,
 		virtualScroll = false,
 		rowHeight = 48,
 		maxHeight = '600px'
@@ -80,6 +77,7 @@
 		onSelectionChange?: (selectedRows: JsonObject[]) => void;
 		selectedCount?: number;
 		children?: Snippet;
+		cells?: Record<string, Snippet<[CellContext]>>;
 		virtualScroll?: boolean;
 		rowHeight?: number;
 		maxHeight?: string;
@@ -257,7 +255,7 @@
 			: ''}
 	>
 		{#if !filteredRows?.length}
-			<TableRow>
+			<tr>
 				<TableCell colspan={colCount}>
 					<div class="empty" role="status" aria-live="polite">
 						{#if rows === undefined}
@@ -269,7 +267,7 @@
 						{/if}
 					</div>
 				</TableCell>
-			</TableRow>
+			</tr>
 		{:else if virtualScroll && !pagination && virtual}
 			<!-- Virtual scrolling mode -->
 			<tr style="height: {virtual.totalHeight}px; position: relative;">
@@ -280,57 +278,18 @@
 						<div
 							style="position: absolute; top: {vItem.offsetTop}px; height: {vItem.height}px; width: 100%; display: table; table-layout: fixed;"
 						>
-							<TableRow {row} rowIndex={index} selectable={hasSelectionCol}>
-								{#if hasSelectionCol}
-									<TableSelectionCell {row} rowIndex={index} />
-								{/if}
-								{#each visibleCols as col}
-									{@const cellValue = formatCell(row, col)}
-									{@const cellLink = getCellLink(row, col)}
-									{@const cellAlign = getCellAlignment(col)}
-									<TableCell type={getCellTypeClass(col)} width={col.width} align={cellAlign}>
-										{#if cellLink}
-											<a href={cellLink}>{cellValue}</a>
-										{:else if col.type === 'check' || col.type === 'boolean'}
-											{#if row[col.key]}
-												<Pill shape="circle" variant="positive" compact label="✔" />
-											{/if}
-										{:else}
-											{cellValue}
-										{/if}
-									</TableCell>
-								{/each}
-								{#if hasActionCol && actions}
-									<TableCell type="actions" align={actionAlign}>
-										{#if actions.type === 'dropdown'}
-											<DropdownButton text={actions.text ?? ''} variant="ghost">
-												{#each actions.items as action}
-													<DropdownItem
-														href={action.href ? action.href(row) : undefined}
-														onClick={action.onClick ? () => action.onClick?.(row) : undefined}
-														>{action.text}</DropdownItem
-													>
-												{/each}
-											</DropdownButton>
-										{:else}
-											<div class="actions">
-												{#each actions.items as action}
-													{@const buttonVariant = action.variant ?? actionButtonVariant}
-													<Button
-														collapse={true}
-														type="button"
-														variant={buttonVariant}
-														size={actionButtonSize}
-														href={action.href ? action.href(row) : undefined}
-														onClick={action.onClick ? () => action.onClick?.(row) : undefined}
-														label={action.text}
-													/>
-												{/each}
-											</div>
-										{/if}
-									</TableCell>
-								{/if}
-							</TableRow>
+							<DataGridRow
+								{row}
+								rowIndex={index}
+								{visibleCols}
+								{hasSelectionCol}
+								{hasActionCol}
+								{actions}
+								{cells}
+								{actionButtonVariant}
+								{actionButtonSize}
+								{actionAlign}
+							/>
 						</div>
 					{/each}
 				</td>
@@ -338,56 +297,18 @@
 		{:else}
 			<!-- Regular rendering mode -->
 			{#each filteredRows as row, index}
-				<TableRow {row} rowIndex={index} selectable={hasSelectionCol}>
-					{#if hasSelectionCol}
-						<TableSelectionCell {row} rowIndex={index} />
-					{/if}
-					{#each visibleCols as col}
-						{@const cellValue = formatCell(row, col)}
-						{@const cellLink = getCellLink(row, col)}
-						{@const cellAlign = getCellAlignment(col)}
-						<TableCell type={getCellTypeClass(col)} width={col.width} align={cellAlign}>
-							{#if cellLink}
-								<a href={cellLink}>{cellValue}</a>
-							{:else if col.type === 'check' || col.type === 'boolean'}
-								{#if row[col.key]}
-									<Pill shape="circle" variant="positive" compact label="✔" />
-								{/if}
-							{:else}
-								{cellValue}
-							{/if}
-						</TableCell>
-					{/each}
-					{#if hasActionCol && actions}
-						<TableCell type="actions" align={actionAlign}>
-							{#if actions.type === 'dropdown'}
-								<DropdownButton text={actions.text ?? ''} variant="ghost">
-									{#each actions.items as action}
-										<DropdownItem
-											href={action.href ? action.href(row) : undefined}
-											onClick={action.onClick ? () => action.onClick?.(row) : undefined}
-											>{action.text}</DropdownItem
-										>
-									{/each}
-								</DropdownButton>
-							{:else}
-								<div class="actions">
-									{#each actions.items as action}
-										{@const buttonVariant = action.variant ?? actionButtonVariant}
-										<Button
-											type="button"
-											variant={buttonVariant}
-											size={actionButtonSize}
-											href={action.href ? action.href(row) : undefined}
-											onClick={action.onClick ? () => action.onClick?.(row) : undefined}
-											label={action.text}
-										/>
-									{/each}
-								</div>
-							{/if}
-						</TableCell>
-					{/if}
-				</TableRow>
+				<DataGridRow
+					{row}
+					rowIndex={index}
+					{visibleCols}
+					{hasSelectionCol}
+					{hasActionCol}
+					{actions}
+					{cells}
+					{actionButtonVariant}
+					{actionButtonSize}
+					{actionAlign}
+				/>
 			{/each}
 		{/if}
 	</tbody>
@@ -418,14 +339,6 @@
   letter-spacing: 0.2rem;
 }
 
-a {
-  color: var(--table-link-fg, rgb(0, 0, 200));
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-
 tfoot {
   background: var(--table-footer-bg);
   color: var(--table-footer-fg);
@@ -442,9 +355,4 @@ td.footer-cell :global(.pagination) {
   display: flex;
   justify-content: center;
   align-items: center;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
 }</style>

package/dist/tables/data-grid.svelte.d.ts

@@ -2,6 +2,12 @@ import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.
 import type { Snippet } from 'svelte';
 import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 type PaginationEvent = (pagination: PaginationProperties) => void;
+interface CellContext<T extends JsonObject = JsonObject> {
+    row: T;
+    value: unknown;
+    column: ColumnDef<T>;
+    rowIndex: number;
+}
 interface Action {
     text: string;
     variant?: ButtonVariant;
@@ -32,6 +38,7 @@ type $$ComponentProps = {
     onSelectionChange?: (selectedRows: JsonObject[]) => void;
     selectedCount?: number;
     children?: Snippet;
+    cells?: Record<string, Snippet<[CellContext]>>;
     virtualScroll?: boolean;
     rowHeight?: number;
     maxHeight?: string;

package/dist/tables/example-status-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { CellRendererProps } from '../types/data.js';
+	import Pill from '../generic/pill/pill.svelte';
+
+	type StatusValue = 'active' | 'completed' | 'on-hold';
+
+	let { value }: CellRendererProps = $props();
+</script>
+
+{#if value === 'active'}
+	<Pill variant="positive" compact label="✓ Active" />
+{:else if value === 'completed'}
+	<Pill variant="standard" compact label="✓ Completed" />
+{:else}
+	<Pill variant="negative" compact label="⚠ On Hold" />
+{/if}

package/dist/tables/example-status-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CellRendererProps } from '../types/data.js';
+declare const ExampleStatusCell: import("svelte").Component<CellRendererProps<import("../types/data.js").JsonObject>, {}, "">;
+type ExampleStatusCell = ReturnType<typeof ExampleStatusCell>;
+export default ExampleStatusCell;

package/dist/tables/index.d.ts

@@ -7,4 +7,5 @@ export { default as TableRow } from './table-row.svelte';
 export { default as TableCaption } from './table-caption.svelte';
 export { createTableContext, getTableContext, TableContext } from './table-context.svelte.js';
 export type { TableContextConfig } from './table-context.svelte.js';
-export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';
+export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatArrayCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';
+export type { ArrayCellResult, CellRenderContext } from './cell-renderers.js';

package/dist/tables/index.js

@@ -9,4 +9,4 @@ export { default as TableCaption } from './table-caption.svelte';
 // Context and utilities
 export { createTableContext, getTableContext, TableContext } from './table-context.svelte.js';
 // Cell renderers and utilities
-export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';
+export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatArrayCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';

package/dist/types/data.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 export type JsonValue = string | number | boolean | null | {
     [key: string]: JsonValue;
 } | JsonValue[];
@@ -50,11 +51,25 @@ export interface EmailColumn<T extends JsonObject = JsonObject> extends BaseColu
     type: 'email';
     format?: (value: string, row: T) => string;
 }
+export interface ArrayColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'array';
+    displayKey?: string;
+    format?: (element: unknown, row: T, index: number) => string;
+    link?: (element: unknown, row: T, index: number) => string | null;
+    separator?: 'comma' | 'semicolon' | 'line' | 'pill';
+}
+export interface CellRendererProps<T extends JsonObject = JsonObject> {
+    row: T;
+    value: unknown;
+    column: ColumnDef<T>;
+    rowIndex: number;
+}
 export interface CustomColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
     type: 'custom';
-    render: (row: T) => string | number | boolean;
+    render?: (row: T) => string | number | boolean;
+    component?: Component<CellRendererProps<T>>;
 }
-export type ColumnDef<T extends JsonObject = JsonObject> = TextColumn<T> | NumberColumn<T> | CurrencyColumn<T> | DateColumn<T> | DateTimeColumn<T> | BooleanColumn<T> | EmailColumn<T> | CustomColumn<T>;
+export type ColumnDef<T extends JsonObject = JsonObject> = TextColumn<T> | NumberColumn<T> | CurrencyColumn<T> | DateColumn<T> | DateTimeColumn<T> | BooleanColumn<T> | EmailColumn<T> | ArrayColumn<T> | CustomColumn<T>;
 export type DataCol = {
     key: string;
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.26",
+	"version": "1.0.27",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",