svelora 3.0.0 → 3.0.2

package/dist/Table/Table.svelte

@@ -1,57 +1,25 @@
-<script lang="ts" module>import type { TableProps } from './table.types.js';
-export type Props = TableProps;
+<script lang="ts" module>export {};
 </script>
 
 <!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 <script lang="ts" generics="T extends Record<string, any>">;
-
-import Button from '../Button/Button.svelte';
-import Checkbox from '../Checkbox/Checkbox.svelte';
-import { getComponentConfig, iconsDefaults } from '../config.js';
-import Icon from '../Icon/Icon.svelte';
-import type { SortItem, SortState, TableColumn } from './table.types.js';
-import { autoGenerateColumns, computePinOffsets, filterByColumns, filterByGlobal, formatCellValue, getRowKey, paginateData, resolveVisibleColumns, sortData } from './table.utils.js';
-import { tableDefaults, tableVariants } from './table.variants.js';
-
-const config = getComponentConfig('table', tableDefaults);
-const icons = getComponentConfig('icons', iconsDefaults);
-let { ref = $bindable(null), as = 'div', data = [] as T[], columns: columnsProp, rowKey, caption, 
-// Sorting
-sorting = $bindable([]), multiSort = false, manualSorting = false, onSortingChange, 
-// Global Filter
-globalFilter = $bindable(''), globalFilterKeys, manualFiltering = false, onGlobalFilterChange, 
-// Column Filters
-columnFilters = $bindable({}), onColumnFiltersChange, 
-// Pagination
-page = $bindable(0), pageSize = 10, manualPagination = false, onPageChange, 
-// Row Selection
-selection, selectedRows = $bindable([]), onSelectionChange, 
-// Column Visibility
-columnVisibility = $bindable(), onColumnVisibilityChange, 
-// Column Pinning
-columnPinning = $bindable(), 
-// Row Pinning
-pinnedRows = $bindable([]), onPinnedRowsChange, 
-// Row Expanding
-expandedRows = $bindable([]), onExpandedChange, 
-// Column Resizing
-columnSizing = $bindable({}), onColumnSizingChange, 
-// Visual
-loading = false, loadingColor = config.defaultVariants.loadingColor ?? 'primary', loadingAnimation = config.defaultVariants.loadingAnimation ?? 'carousel', empty = 'No data.', striped = false, hoverable = config.defaultVariants.hoverable ?? true, sticky = false, action, 
-// Callbacks
-onRowClick, onRowHover, onRowContextmenu, 
-// Styling
-ui, class: className, 
-// Slots
-captionSlot, emptySlot, loadingSlot, expandedSlot, bodyTopSlot, bodyBottomSlot, headerSlot, cellSlot, ...restProps }: TableProps<T> = $props();
+import Button from "../Button/Button.svelte";
+import Checkbox from "../Checkbox/Checkbox.svelte";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { autoGenerateColumns, computePinOffsets, filterByColumns, filterByGlobal, formatCellValue, getRowKey, paginateData, resolveVisibleColumns, sortData } from "./table.utils.js";
+import { tableDefaults, tableVariants } from "./table.variants.js";
+const config = getComponentConfig("table", tableDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), as = "div", data = [], columns: columnsProp, rowKey, caption, sorting = $bindable([]), multiSort = false, manualSorting = false, onSortingChange, globalFilter = $bindable(""), globalFilterKeys, manualFiltering = false, onGlobalFilterChange, columnFilters = $bindable({}), onColumnFiltersChange, page = $bindable(0), pageSize = 10, manualPagination = false, onPageChange, selection, selectedRows = $bindable([]), onSelectionChange, columnVisibility = $bindable(), onColumnVisibilityChange, columnPinning = $bindable(), pinnedRows = $bindable([]), onPinnedRowsChange, expandedRows = $bindable([]), onExpandedChange, columnSizing = $bindable({}), onColumnSizingChange, loading = false, loadingColor = config.defaultVariants.loadingColor ?? "primary", loadingAnimation = config.defaultVariants.loadingAnimation ?? "carousel", empty = "No data.", striped = false, hoverable = config.defaultVariants.hoverable ?? true, sticky = false, action, onRowClick, onRowHover, onRowContextmenu, ui, class: className, captionSlot, emptySlot, loadingSlot, expandedSlot, bodyTopSlot, bodyBottomSlot, headerSlot, cellSlot, ...restProps } = $props();
 // =========================================================================
 // Apply Svelte action on root element
 // =========================================================================
 $effect(() => {
-    if (ref && action) {
-        const result = action(ref);
-        return () => result?.destroy?.();
-    }
+	if (ref && action) {
+		const result = action(ref);
+		return () => result?.destroy?.();
+	}
 });
 // =========================================================================
 // Change notifications — skip initial mount, fire only on subsequent changes
@@ -63,331 +31,312 @@ let _prevColumnVisibility = columnVisibility;
 let _prevPinnedRows = pinnedRows;
 let _prevExpandedRows = expandedRows;
 $effect(() => {
-    if (globalFilter !== _prevGlobalFilter) {
-        _prevGlobalFilter = globalFilter;
-        onGlobalFilterChange?.(globalFilter);
-    }
+	if (globalFilter !== _prevGlobalFilter) {
+		_prevGlobalFilter = globalFilter;
+		onGlobalFilterChange?.(globalFilter);
+	}
 });
 $effect(() => {
-    if (columnFilters !== _prevColumnFilters) {
-        _prevColumnFilters = columnFilters;
-        onColumnFiltersChange?.(columnFilters);
-    }
+	if (columnFilters !== _prevColumnFilters) {
+		_prevColumnFilters = columnFilters;
+		onColumnFiltersChange?.(columnFilters);
+	}
 });
 $effect(() => {
-    if (page !== _prevPage) {
-        _prevPage = page;
-        onPageChange?.(page);
-    }
+	if (page !== _prevPage) {
+		_prevPage = page;
+		onPageChange?.(page);
+	}
 });
 $effect(() => {
-    if (columnVisibility !== _prevColumnVisibility) {
-        _prevColumnVisibility = columnVisibility;
-        if (columnVisibility !== undefined)
-            onColumnVisibilityChange?.(columnVisibility);
-    }
+	if (columnVisibility !== _prevColumnVisibility) {
+		_prevColumnVisibility = columnVisibility;
+		if (columnVisibility !== undefined) onColumnVisibilityChange?.(columnVisibility);
+	}
 });
 $effect(() => {
-    if (pinnedRows !== _prevPinnedRows) {
-        _prevPinnedRows = pinnedRows;
-        onPinnedRowsChange?.(pinnedRows);
-    }
+	if (pinnedRows !== _prevPinnedRows) {
+		_prevPinnedRows = pinnedRows;
+		onPinnedRowsChange?.(pinnedRows);
+	}
 });
 $effect(() => {
-    if (expandedRows !== _prevExpandedRows) {
-        _prevExpandedRows = expandedRows;
-        onExpandedChange?.(expandedRows);
-    }
+	if (expandedRows !== _prevExpandedRows) {
+		_prevExpandedRows = expandedRows;
+		onExpandedChange?.(expandedRows);
+	}
 });
 // =========================================================================
 // Resolved Columns
 // =========================================================================
-const resolvedColumns = $derived.by((): TableColumn<T>[] => {
-    if (columnsProp && columnsProp.length > 0)
-        return columnsProp;
-    return autoGenerateColumns(data);
+const resolvedColumns = $derived.by(() => {
+	if (columnsProp && columnsProp.length > 0) return columnsProp;
+	return autoGenerateColumns(data);
 });
 const visibleColumns = $derived(resolveVisibleColumns(resolvedColumns, columnVisibility, columnPinning));
 const hasFooter = $derived(visibleColumns.some((col) => col.footer));
-const totalColspan = $derived(visibleColumns.length + (selection === 'multiple' ? 1 : 0));
+const totalColspan = $derived(visibleColumns.length + (selection === "multiple" ? 1 : 0));
 // =========================================================================
 // Data Pipeline: filter → sort → paginate
 // =========================================================================
 const filteredData = $derived.by(() => {
-    if (manualFiltering)
-        return data;
-    let result = data;
-    if (globalFilter) {
-        result = filterByGlobal(result, globalFilter, globalFilterKeys);
-    }
-    if (columnFilters && Object.keys(columnFilters).length > 0) {
-        result = filterByColumns(result, columnFilters, resolvedColumns);
-    }
-    return result;
+	if (manualFiltering) return data;
+	let result = data;
+	if (globalFilter) {
+		result = filterByGlobal(result, globalFilter, globalFilterKeys);
+	}
+	if (columnFilters && Object.keys(columnFilters).length > 0) {
+		result = filterByColumns(result, columnFilters, resolvedColumns);
+	}
+	return result;
 });
 const sortedData = $derived.by(() => {
-    if (manualSorting || sorting.length === 0)
-        return filteredData;
-    return sortData(filteredData, sorting, resolvedColumns);
+	if (manualSorting || sorting.length === 0) return filteredData;
+	return sortData(filteredData, sorting, resolvedColumns);
 });
 const paginatedData = $derived.by(() => {
-    if (manualPagination)
-        return sortedData;
-    if (pageSize <= 0)
-        return sortedData;
-    return paginateData(sortedData, page, pageSize);
+	if (manualPagination) return sortedData;
+	if (pageSize <= 0) return sortedData;
+	return paginateData(sortedData, page, pageSize);
 });
 // =========================================================================
 // Row Pinning — split paginated data into pinned (top) + unpinned
 // =========================================================================
 const pinnedKeySet = $derived(new Set(pinnedRows));
 const pinnedData = $derived.by(() => {
-    if (pinnedRows.length === 0)
-        return [];
-    return sortedData.filter((row, i) => pinnedKeySet.has(getRowKey(row, rowKey, i)));
+	if (pinnedRows.length === 0) return [];
+	return sortedData.filter((row, i) => pinnedKeySet.has(getRowKey(row, rowKey, i)));
 });
 const unpinnedPaginatedData = $derived.by(() => {
-    if (pinnedRows.length === 0)
-        return paginatedData;
-    return paginatedData.filter((row, i) => {
-        const absIdx = manualPagination ? i : page * pageSize + i;
-        return !pinnedKeySet.has(getRowKey(row, rowKey, absIdx));
-    });
+	if (pinnedRows.length === 0) return paginatedData;
+	return paginatedData.filter((row, i) => {
+		const absIdx = manualPagination ? i : page * pageSize + i;
+		return !pinnedKeySet.has(getRowKey(row, rowKey, absIdx));
+	});
 });
 const hasVisibleRows = $derived(pinnedData.length > 0 || unpinnedPaginatedData.length > 0);
 // =========================================================================
 // Sorting
 // =========================================================================
-function getSortDirection(key: string): 'asc' | 'desc' | null {
-    const item = sorting.find((s) => s.key === key);
-    return item ? item.direction : null;
+function getSortDirection(key) {
+	const item = sorting.find((s) => s.key === key);
+	return item ? item.direction : null;
 }
-function toggleSort(key: string, event: MouseEvent | undefined = undefined) {
-    const current = getSortDirection(key);
-    let next: SortItem | null;
-    if (current === null)
-        next = { key, direction: 'asc' };
-    else if (current === 'asc')
-        next = { key, direction: 'desc' };
-    else
-        next = null;
-    let newSorting: SortState;
-    if (multiSort && event?.shiftKey) {
-        const without = sorting.filter((s) => s.key !== key);
-        newSorting = next ? [...without, next] : without;
-    }
-    else {
-        newSorting = next ? [next] : [];
-    }
-    sorting = newSorting;
-    onSortingChange?.(newSorting);
+function toggleSort(key, event = undefined) {
+	const current = getSortDirection(key);
+	let next;
+	if (current === null) next = {
+		key,
+		direction: "asc"
+	};
+	else if (current === "asc") next = {
+		key,
+		direction: "desc"
+	};
+	else next = null;
+	let newSorting;
+	if (multiSort && event?.shiftKey) {
+		const without = sorting.filter((s) => s.key !== key);
+		newSorting = next ? [...without, next] : without;
+	} else {
+		newSorting = next ? [next] : [];
+	}
+	sorting = newSorting;
+	onSortingChange?.(newSorting);
 }
 // =========================================================================
 // Row Selection — uses actual visible rows (pinned + unpinned on page)
 // =========================================================================
 const selectedKeySet = $derived.by(() => {
-    if (!selection)
-        return new Set<string | number>();
-    return new Set(selectedRows.map((row, i) => getRowKey(row, rowKey, i)));
+	if (!selection) return new Set();
+	return new Set(selectedRows.map((row, i) => getRowKey(row, rowKey, i)));
 });
-const actualVisibleRows = $derived.by((): {
-    row: T;
-    absIdx: number;
-}[] => {
-    const rows: {
-        row: T;
-        absIdx: number;
-    }[] = [];
-    for (let i = 0; i < pinnedData.length; i++) {
-        rows.push({ row: pinnedData[i], absIdx: i });
-    }
-    for (let i = 0; i < unpinnedPaginatedData.length; i++) {
-        const absIdx = manualPagination ? i : page * pageSize + i;
-        rows.push({ row: unpinnedPaginatedData[i], absIdx });
-    }
-    return rows;
+const actualVisibleRows = $derived.by(() => {
+	const rows = [];
+	for (let i = 0; i < pinnedData.length; i++) {
+		rows.push({
+			row: pinnedData[i],
+			absIdx: i
+		});
+	}
+	for (let i = 0; i < unpinnedPaginatedData.length; i++) {
+		const absIdx = manualPagination ? i : page * pageSize + i;
+		rows.push({
+			row: unpinnedPaginatedData[i],
+			absIdx
+		});
+	}
+	return rows;
 });
-function isRowSelected(row: T, index: number): boolean {
-    return selectedKeySet.has(getRowKey(row, rowKey, index));
+function isRowSelected(row, index) {
+	return selectedKeySet.has(getRowKey(row, rowKey, index));
 }
-function toggleRowSelect(row: T, index: number) {
-    if (!selection)
-        return;
-    const key = getRowKey(row, rowKey, index);
-    if (selection === 'single') {
-        const isSelected = selectedKeySet.has(key);
-        const next = isSelected ? [] : [row];
-        selectedRows = next;
-        onSelectionChange?.(next);
-        return;
-    }
-    const isSelected = selectedKeySet.has(key);
-    let next: T[];
-    if (isSelected) {
-        next = selectedRows.filter((r, i) => getRowKey(r, rowKey, i) !== key);
-    }
-    else {
-        next = [...selectedRows, row];
-    }
-    selectedRows = next;
-    onSelectionChange?.(next);
+function toggleRowSelect(row, index) {
+	if (!selection) return;
+	const key = getRowKey(row, rowKey, index);
+	if (selection === "single") {
+		const isSelected = selectedKeySet.has(key);
+		const next = isSelected ? [] : [row];
+		selectedRows = next;
+		onSelectionChange?.(next);
+		return;
+	}
+	const isSelected = selectedKeySet.has(key);
+	let next;
+	if (isSelected) {
+		next = selectedRows.filter((r, i) => getRowKey(r, rowKey, i) !== key);
+	} else {
+		next = [...selectedRows, row];
+	}
+	selectedRows = next;
+	onSelectionChange?.(next);
 }
-const allVisibleSelected = $derived(selection === 'multiple' &&
-    actualVisibleRows.length > 0 &&
-    actualVisibleRows.every(({ row, absIdx }) => isRowSelected(row, absIdx)));
-const someVisibleSelected = $derived(selection === 'multiple' &&
-    actualVisibleRows.length > 0 &&
-    actualVisibleRows.some(({ row, absIdx }) => isRowSelected(row, absIdx)) &&
-    !allVisibleSelected);
+const allVisibleSelected = $derived(selection === "multiple" && actualVisibleRows.length > 0 && actualVisibleRows.every(({ row, absIdx }) => isRowSelected(row, absIdx)));
+const someVisibleSelected = $derived(selection === "multiple" && actualVisibleRows.length > 0 && actualVisibleRows.some(({ row, absIdx }) => isRowSelected(row, absIdx)) && !allVisibleSelected);
 function toggleSelectAll() {
-    if (!selection || selection !== 'multiple')
-        return;
-    let next: T[];
-    if (allVisibleSelected) {
-        const visibleKeys = new Set(actualVisibleRows.map(({ row, absIdx }) => getRowKey(row, rowKey, absIdx)));
-        next = selectedRows.filter((r, i) => !visibleKeys.has(getRowKey(r, rowKey, i)));
-    }
-    else {
-        const existing = new Set(selectedRows.map((r, i) => getRowKey(r, rowKey, i)));
-        const toAdd = actualVisibleRows
-            .filter(({ row, absIdx }) => !existing.has(getRowKey(row, rowKey, absIdx)))
-            .map(({ row }) => row);
-        next = [...selectedRows, ...toAdd];
-    }
-    selectedRows = next;
-    onSelectionChange?.(next);
+	if (!selection || selection !== "multiple") return;
+	let next;
+	if (allVisibleSelected) {
+		const visibleKeys = new Set(actualVisibleRows.map(({ row, absIdx }) => getRowKey(row, rowKey, absIdx)));
+		next = selectedRows.filter((r, i) => !visibleKeys.has(getRowKey(r, rowKey, i)));
+	} else {
+		const existing = new Set(selectedRows.map((r, i) => getRowKey(r, rowKey, i)));
+		const toAdd = actualVisibleRows.filter(({ row, absIdx }) => !existing.has(getRowKey(row, rowKey, absIdx))).map(({ row }) => row);
+		next = [...selectedRows, ...toAdd];
+	}
+	selectedRows = next;
+	onSelectionChange?.(next);
 }
 // =========================================================================
 // Row Expanding
 // =========================================================================
-function isRowExpanded(key: string | number): boolean {
-    return expandedRows.includes(key);
+function isRowExpanded(key) {
+	return expandedRows.includes(key);
 }
 // =========================================================================
 // Column Resizing
 // =========================================================================
-let resizing = $state<{
-    key: string;
-    startX: number;
-    startWidth: number;
-} | null>(null);
-function onResizeStart(e: MouseEvent, col: TableColumn<T>) {
-    e.preventDefault();
-    const currentWidth = columnSizing[col.key] ?? col.width ?? 150;
-    resizing = { key: col.key, startX: e.clientX, startWidth: currentWidth };
-    const onMove = (ev: MouseEvent) => {
-        if (!resizing)
-            return;
-        const diff = ev.clientX - resizing.startX;
-        let newWidth = resizing.startWidth + diff;
-        const min = col.minWidth ?? 50;
-        const max = col.maxWidth ?? Infinity;
-        newWidth = Math.max(min, Math.min(max, newWidth));
-        columnSizing = { ...columnSizing, [resizing.key]: newWidth };
-        onColumnSizingChange?.(columnSizing);
-    };
-    const onUp = () => {
-        resizing = null;
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
+let resizing = $state(null);
+function onResizeStart(e, col) {
+	e.preventDefault();
+	const currentWidth = columnSizing[col.key] ?? col.width ?? 150;
+	resizing = {
+		key: col.key,
+		startX: e.clientX,
+		startWidth: currentWidth
+	};
+	const onMove = (ev) => {
+		if (!resizing) return;
+		const diff = ev.clientX - resizing.startX;
+		let newWidth = resizing.startWidth + diff;
+		const min = col.minWidth ?? 50;
+		const max = col.maxWidth ?? Infinity;
+		newWidth = Math.max(min, Math.min(max, newWidth));
+		columnSizing = {
+			...columnSizing,
+			[resizing.key]: newWidth
+		};
+		onColumnSizingChange?.(columnSizing);
+	};
+	const onUp = () => {
+		resizing = null;
+		document.removeEventListener("mousemove", onMove);
+		document.removeEventListener("mouseup", onUp);
+	};
+	document.addEventListener("mousemove", onMove);
+	document.addEventListener("mouseup", onUp);
 }
 // =========================================================================
 // Row Interactions
 // =========================================================================
 const isSelectable = $derived(!!onRowClick || !!selection || !!onRowHover || !!onRowContextmenu);
-function handleRowClick(e: MouseEvent, row: T, index: number) {
-    const target = e.target as HTMLElement;
-    if (target.closest('button, a, input, select, textarea, [role="checkbox"]'))
-        return;
-    if (selection)
-        toggleRowSelect(row, index);
-    onRowClick?.(row, index, e);
+function handleRowClick(e, row, index) {
+	const target = e.target;
+	if (target.closest("button, a, input, select, textarea, [role=\"checkbox\"]")) return;
+	if (selection) toggleRowSelect(row, index);
+	onRowClick?.(row, index, e);
 }
-function handleRowKeyDown(e: KeyboardEvent, row: T, index: number) {
-    if (!onRowClick && !selection)
-        return;
-    if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        if (selection)
-            toggleRowSelect(row, index);
-        onRowClick?.(row, index, e as unknown as MouseEvent);
-    }
+function handleRowKeyDown(e, row, index) {
+	if (!onRowClick && !selection) return;
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		if (selection) toggleRowSelect(row, index);
+		onRowClick?.(row, index, e);
+	}
 }
-function handleRowPointerEnter(e: PointerEvent, row: T, index: number) {
-    onRowHover?.(row, index, e);
+function handleRowPointerEnter(e, row, index) {
+	onRowHover?.(row, index, e);
 }
-function handleRowPointerLeave(e: PointerEvent, row: T, index: number) {
-    onRowHover?.(null, index, e);
+function handleRowPointerLeave(e, row, index) {
+	onRowHover?.(null, index, e);
 }
-function handleRowContextmenu(e: MouseEvent, row: T, index: number) {
-    onRowContextmenu?.(row, index, e);
+function handleRowContextmenu(e, row, index) {
+	onRowContextmenu?.(row, index, e);
 }
 // =========================================================================
 // Column Pinning
 // =========================================================================
 const pinOffsets = $derived(computePinOffsets(visibleColumns, columnSizing, columnPinning));
-function getPinStyle(key: string): string {
-    const pin = pinOffsets.get(key);
-    if (!pin)
-        return '';
-    return `${pin.side}: ${pin.offset}px`;
+function getPinStyle(key) {
+	const pin = pinOffsets.get(key);
+	if (!pin) return "";
+	return `${pin.side}: ${pin.offset}px`;
 }
-function isPinned(key: string): boolean {
-    return pinOffsets.has(key);
+function isPinned(key) {
+	return pinOffsets.has(key);
 }
 // =========================================================================
 // Column Width Style
 // =========================================================================
-function getColWidth(col: TableColumn<T>): string | undefined {
-    const w = columnSizing[col.key] ?? col.width;
-    return w ? `${w}px` : undefined;
+function getColWidth(col) {
+	const w = columnSizing[col.key] ?? col.width;
+	return w ? `${w}px` : undefined;
 }
 // =========================================================================
 // Align class
 // =========================================================================
-function getAlignClass(align: ('left' | 'center' | 'right') | undefined): string {
-    if (align === 'center')
-        return 'text-center';
-    if (align === 'right')
-        return 'text-right';
-    return '';
+function getAlignClass(align) {
+	if (align === "center") return "text-center";
+	if (align === "right") return "text-right";
+	return "";
 }
 // =========================================================================
 // Variant Classes
 // =========================================================================
 const variantSlots = $derived(tableVariants({
-    hoverable: hoverable || undefined,
-    striped: striped || undefined,
-    sticky: sticky || undefined,
-    loading: loading || undefined,
-    loadingColor,
-    loadingAnimation
-} as Parameters<typeof tableVariants>[0]));
-const pinnedVariantSlots = $derived(tableVariants({ pinned: true } as Parameters<typeof tableVariants>[0]));
+	hoverable: hoverable || undefined,
+	striped: striped || undefined,
+	sticky: sticky || undefined,
+	loading: loading || undefined,
+	loadingColor,
+	loadingAnimation
+}));
+const pinnedVariantSlots = $derived(tableVariants({ pinned: true }));
 const classes = $derived({
-    root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-    base: variantSlots.base({ class: [config.slots.base, ui?.base] }),
-    caption: variantSlots.caption({ class: [config.slots.caption, ui?.caption] }),
-    thead: variantSlots.thead({ class: [config.slots.thead, ui?.thead] }),
-    tbody: variantSlots.tbody({ class: [config.slots.tbody, ui?.tbody] }),
-    tfoot: variantSlots.tfoot({ class: [config.slots.tfoot, ui?.tfoot] }),
-    tr: variantSlots.tr({ class: [config.slots.tr, ui?.tr] }),
-    th: variantSlots.th({ class: [config.slots.th, ui?.th] }),
-    thPinned: pinnedVariantSlots.th({ class: [config.slots.th, ui?.th] }),
-    td: variantSlots.td({ class: [config.slots.td, ui?.td] }),
-    tdPinned: pinnedVariantSlots.td({ class: [config.slots.td, ui?.td] }),
-    separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
-    empty: variantSlots.empty({ class: [config.slots.empty, ui?.empty] }),
-    loading: variantSlots.loading({ class: [config.slots.loading, ui?.loading] })
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	base: variantSlots.base({ class: [config.slots.base, ui?.base] }),
+	caption: variantSlots.caption({ class: [config.slots.caption, ui?.caption] }),
+	thead: variantSlots.thead({ class: [config.slots.thead, ui?.thead] }),
+	tbody: variantSlots.tbody({ class: [config.slots.tbody, ui?.tbody] }),
+	tfoot: variantSlots.tfoot({ class: [config.slots.tfoot, ui?.tfoot] }),
+	tr: variantSlots.tr({ class: [config.slots.tr, ui?.tr] }),
+	th: variantSlots.th({ class: [config.slots.th, ui?.th] }),
+	thPinned: pinnedVariantSlots.th({ class: [config.slots.th, ui?.th] }),
+	td: variantSlots.td({ class: [config.slots.td, ui?.td] }),
+	tdPinned: pinnedVariantSlots.td({ class: [config.slots.td, ui?.td] }),
+	separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+	empty: variantSlots.empty({ class: [config.slots.empty, ui?.empty] }),
+	loading: variantSlots.loading({ class: [config.slots.loading, ui?.loading] })
 });
-function thClass(key: string): string {
-    return isPinned(key) ? classes.thPinned : classes.th;
+function thClass(key) {
+	return isPinned(key) ? classes.thPinned : classes.th;
 }
-function tdClass(key: string): string {
-    return isPinned(key) ? classes.tdPinned : classes.td;
+function tdClass(key) {
+	return isPinned(key) ? classes.tdPinned : classes.td;
 }
 </script>
 

package/dist/Table/table.variants.d.ts

@@ -197,7 +197,7 @@ export declare const tableDefaults: {
         loadingColor: "primary";
         loadingAnimation: "carousel";
         loading?: boolean | undefined;
-        sticky?: boolean | "header" | "footer" | undefined;
+        sticky?: boolean | "footer" | "header" | undefined;
         pinned?: boolean | undefined;
         striped?: boolean | undefined;
     };