compote-ui 0.55.3 → 0.56.0

package/dist/components/data-table/data-table-utils.ts.md

@@ -1,179 +0,0 @@
-import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
-import { cn } from 'tailwind-variants';
-import type { DataTableFeatures, DataTableInstance } from './create-table';
-import type { DataTableColumnMeta } from './types';
-
-export type DataTablePinnableColumn = {
-getIsPinned(): ColumnPinningPosition;
-getStart(position?: ColumnPinningPosition): number;
-getAfter(position?: ColumnPinningPosition): number;
-getIsLastColumn(position?: ColumnPinningPosition): boolean;
-getIsFirstColumn(position?: ColumnPinningPosition): boolean;
-};
-
-export function alignClass(align: DataTableColumnMeta['align']) {
-return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
-}
-
-export function justifyClass(align: DataTableColumnMeta['align']) {
-return align === 'right'
-? 'justify-end'
-: align === 'center'
-? 'justify-center'
-: 'justify-start';
-}
-
-export function sortButtonDirectionClass(align: DataTableColumnMeta['align']) {
-return align === 'right' ? 'flex-row-reverse' : 'flex-row';
-}
-
-export function columnSizeStyle(size: number) {
-return `width: ${size}px`;
-}
-
-export function selectionColumnSizeStyle() {
-return 'width: 40px';
-}
-
-export function virtualColumnSizeStyle(size: number) {
-return `display: flex; flex: 0 0 ${size}px; width: ${size}px`;
-}
-
-export function virtualSelectionColumnSizeStyle() {
-return 'display: flex; flex: 0 0 40px; width: 40px';
-}
-
-export function tableSizeStyle<T extends RowData>(
-table: DataTableInstance<T>,
-isRowSelectionEnabled: boolean
-) {
-return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
-}
-
-export function virtualGrowColumnSizeStyle() {
-return 'display: flex; flex: 1; min-width: 0';
-}
-
-export function virtualGroupWithGrowSizeStyle(fixedPortion: number) {
-return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
-}
-
-export function resizeHandleStyle<T extends RowData>(
-table: DataTableInstance<T>,
-header: Header<DataTableFeatures, T, CellData>
-) {
-if (table.options.columnResizeMode !== 'onEnd') return undefined;
-const deltaOffset = table.store.state.columnResizing.deltaOffset;
-if (!header.column.getIsResizing() || deltaOffset === null) return undefined;
-return `transform: translateX(${deltaOffset}px)`;
-}
-
-export function resizeHandleClass(headerIndex: number, headerCount: number) {
-return cn(
-'absolute top-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]',
-headerIndex === headerCount - 1 ? 'right-0' : '-right-1'
-);
-}
-
-export function getHeaderSortDirection<T extends RowData>(
-header: Header<DataTableFeatures, T, CellData>,
-sortingState: unknown
-) {
-void sortingState;
-return header.column.getIsSorted();
-}
-
-export function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc') {
-if (sortDirection === 'asc') return 'Sorted ascending';
-if (sortDirection === 'desc') return 'Sorted descending';
-return 'Not sorted';
-}
-
-export function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc') {
-if (sortDirection === 'asc') return 'ascending';
-if (sortDirection === 'desc') return 'descending';
-return 'none';
-}
-
-export function getAllRowsSelectionState<T extends RowData>(
-table: DataTableInstance<T>,
-rowSelection: unknown
-) {
-void rowSelection;
-const allRowsSelected = table.getIsAllRowsSelected();
-const someRowsSelected = table.getIsSomeRowsSelected();
-return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
-}
-
-export function getRowSelectionState<T extends RowData>(
-table: DataTableInstance<T>,
-rowSelection: unknown,
-rowId: string
-) {
-void rowSelection;
-return table.getRow(rowId).getIsSelected();
-}
-
-export function getSelectedRowCount<T extends RowData>(
-table: DataTableInstance<T>,
-rowSelection: unknown
-) {
-void rowSelection;
-return table.getSelectedRowModel().rows.length;
-}
-
-export function getBooleanCellValue(value: unknown) {
-if (value === true) return true;
-if (value === false) return false;
-return undefined;
-}
-
-export function getPinningStyle(
-column: DataTablePinnableColumn,
-isHeader = false,
-isRowSelectionEnabled = false
-): string | undefined {
-const isPinned = column.getIsPinned();
-if (!isPinned) return undefined;
-
-    const zIndex = isHeader ? 15 : 1;
-    const selectionOffset = isRowSelectionEnabled ? 40 : 0;
-
-    if (isPinned === 'left') {
-    	const left = column.getStart('left') + selectionOffset;
-    	const shadow =
-    		!isHeader && column.getIsLastColumn('left')
-    			? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
-    			: undefined;
-    	return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
-    		.filter(Boolean)
-    		.join('; ');
-    } else {
-    	const right = column.getAfter('right');
-    	const shadow =
-    		!isHeader && column.getIsFirstColumn('right')
-    			? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
-    			: undefined;
-    	return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
-    		.filter(Boolean)
-    		.join('; ');
-    }
-
-}
-
-export function getUrlCellValue(value: unknown) {
-if (typeof value !== 'string' || value.trim() === '') return undefined;
-return value;
-}
-
-export function openUrlCell(value: string) {
-window.open(value, '\_blank', 'noopener,noreferrer');
-}
-
-export function getColumnMeta(columnDef: { meta?: unknown }): DataTableColumnMeta | undefined {
-return columnDef.meta as DataTableColumnMeta | undefined;
-}
-
-export function joinStyles(...styles: Array<string | undefined>) {
-return styles.filter(Boolean).join('; ');
-}

package/dist/components/data-table/data-table-virtual-rows.svelte.md

@@ -1,171 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import { FlexRender } from '@tanstack/svelte-table';
-	import type { Row, RowData } from '@tanstack/svelte-table';
-	import { createVirtualizer } from '@tanstack/svelte-virtual';
-	import { get } from 'svelte/store';
-	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '$lib/icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { DataTableFeatures, DataTableInstance } from './create-table';
-	import {
-		alignClass,
-		getBooleanCellValue,
-		getColumnMeta,
-		getPinningStyle,
-		getRowSelectionState,
-		getUrlCellValue,
-		joinStyles,
-		justifyClass,
-		openUrlCell,
-		virtualColumnSizeStyle,
-		virtualGrowColumnSizeStyle,
-		virtualSelectionColumnSizeStyle
-	} from './data-table-utils';
-
-	type Props = {
-		rows: Row<DataTableFeatures, T>[];
-		scrollContainer: HTMLDivElement;
-		isRowSelectionEnabled: boolean;
-		table: DataTableInstance<T>;
-		emptyMessage: string;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		rows,
-		scrollContainer,
-		isRowSelectionEnabled,
-		table,
-		emptyMessage,
-		onRowClick,
-		onRowDoubleClick
-	}: Props = $props();
-
-	const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-		get count() {
-			return rows.length;
-		},
-		estimateSize: () => 37,
-		getScrollElement: () => scrollContainer,
-		measureElement:
-			typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
-				? (element) => element.getBoundingClientRect().height
-				: undefined,
-		overscan: 5
-	});
-
-	$effect(() => {
-		get(rowVirtualizer).setOptions({ count: rows.length });
-	});
-
-	function measureRowElement(node: HTMLTableRowElement) {
-		get(rowVirtualizer).measureElement(node);
-	}
-</script>
-
-<tbody style="display: grid; height: {$rowVirtualizer.getTotalSize()}px; position: relative">
-	{#if rows.length === 0}
-		<tr style="display: flex; position: absolute; width: 100%; top: 0">
-			<td class="px-3 py-10 text-center text-sm text-ink-dim" style="flex: 1">
-				{emptyMessage}
-			</td>
-		</tr>
-	{:else}
-		{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
-			{@const row = rows[virtualRow.index]}
-			{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
-			<tr
-				data-index={virtualRow.index}
-				use:measureRowElement
-				class={cn(
-					'group/row border-b border-surface-2 last:border-b-0',
-					'[--row-bg:var(--compote-surface-1)]',
-					'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
-					rowSelected &&
-						'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
-				)}
-				style="display: flex; position: absolute; transform: translateY({virtualRow.start}px); width: 100%"
-				onclick={(event) => onRowClick?.({ row: row.original, event })}
-				ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
-			>
-				{#if isRowSelectionEnabled}
-					<td
-						class="items-center justify-center bg-(--row-bg) px-3 py-2 text-center align-middle"
-						style={joinStyles(
-							virtualSelectionColumnSizeStyle(),
-							'position: sticky; left: 0; z-index: 1'
-						)}
-					>
-						<Checkbox
-							size="sm"
-							aria-label="Select row"
-							class="mx-auto size-4"
-							checked={rowSelected}
-							disabled={!row.getCanSelect()}
-							onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
-						/>
-					</td>
-				{/if}
-				{#each row.getVisibleCells() as cell (cell.id)}
-					{@const columnDef = getColumnMeta(cell.column.columnDef)}
-					<td
-						class={cn(
-							'items-center truncate px-3 py-2',
-							alignClass(columnDef?.align),
-							justifyClass(columnDef?.align),
-							cell.column.getIsPinned() && 'bg-(--row-bg)'
-						)}
-						style={joinStyles(
-							getColumnMeta(cell.column.columnDef)?.grow
-								? virtualGrowColumnSizeStyle()
-								: virtualColumnSizeStyle(cell.column.getSize()),
-							getPinningStyle(cell.column, false, isRowSelectionEnabled)
-						)}
-					>
-						{#if columnDef?.type === 'boolean'}
-							{@const value = getBooleanCellValue(cell.getValue())}
-							{#if value === true}
-								<span
-									class="inline-flex size-5 items-center justify-center text-success"
-									role="img"
-									aria-label="Yes"
-								>
-									<PhCheck class="size-4" />
-								</span>
-							{:else if value === false}
-								<span
-									class="inline-flex size-5 items-center justify-center text-danger"
-									role="img"
-									aria-label="No"
-								>
-									<PhX class="size-4" />
-								</span>
-							{:else}
-								-
-							{/if}
-						{:else if columnDef?.type === 'url'}
-							{@const value = getUrlCellValue(cell.getValue())}
-							{#if value}
-								<button
-									type="button"
-									class={cn(
-										'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
-										justifyClass(columnDef.align)
-									)}
-									onclick={() => openUrlCell(value)}
-								>
-									<PhArrowSquareOut class="size-3.5 shrink-0" />
-								</button>
-							{:else}
-								-
-							{/if}
-						{:else}
-							<FlexRender {cell} />
-						{/if}
-					</td>
-				{/each}
-			</tr>
-		{/each}
-	{/if}
-</tbody>

package/dist/components/data-table/data-table-virtualized.svelte.md

@@ -1,108 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import { type DataTableInstance } from './create-table';
-	import DataTableHead from './data-table-head.svelte';
-	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
-	import {
-		getAllRowsSelectionState,
-		getSelectedRowCount,
-		tableSizeStyle
-	} from './data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
-
-	const tableStateKey = $derived(JSON.stringify(table.store.state));
-	function trackTableState() {
-		return tableStateKey;
-	}
-
-	const rowModel = $derived.by(() => {
-		trackTableState();
-		return table.getRowModel();
-	});
-	const headerGroups = $derived.by(() => {
-		trackTableState();
-		return table.getHeaderGroups();
-	});
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	const headerGroupCount = $derived(headerGroups.length);
-	const allRowsSelectionState = $derived(
-		getAllRowsSelectionState(table, table.store.state.rowSelection)
-	);
-	const selectedRowCount = $derived(getSelectedRowCount(table, table.store.state.rowSelection));
-	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
-</script>
-
-<div
-	class={cn(
-		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
-		className
-	)}
-	{...rest}
->
-	{#if isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-    <div class="min-h-0 flex-1 overflow-auto" bind:this={scrollContainerRef}>
-    	<table
-    		class="table-fixed border-separate border-spacing-0 text-sm"
-    		style="display: grid; {tableSizeStyle(table, isRowSelectionEnabled)}"
-    	>
-    		{#if caption}
-    			<caption class="sr-only">{caption}</caption>
-    		{/if}
-    		<DataTableHead
-    			{table}
-    			{headerGroups}
-    			{headerGroupCount}
-    			{isRowSelectionEnabled}
-    			{isMultiRowSelectionEnabled}
-    			{allRowsSelectionState}
-    			isVirtual
-    		/>
-    		{#if scrollContainerRef}
-    			<DataTableVirtualRows
-    				rows={rowModel.rows}
-    				scrollContainer={scrollContainerRef}
-    				{isRowSelectionEnabled}
-    				{table}
-    				{emptyMessage}
-    				{onRowClick}
-    				{onRowDoubleClick}
-    			/>
-    		{/if}
-    	</table>
-    </div>
-
-    <div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-    	{#if isRowSelectionEnabled}
-    		{selectedRowCount} of {rowModel.rows.length} rows selected
-    	{:else}
-    		{rowModel.rows.length} rows
-    	{/if}
-    </div>
-
-</div>

package/dist/components/data-table/data-table.svelte.md

@@ -1,214 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import { FlexRender } from '@tanstack/svelte-table';
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '$lib/icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import { type DataTableInstance } from './create-table';
-	import DataTableHead from './data-table-head.svelte';
-	import {
-		alignClass,
-		columnSizeStyle,
-		//		getAllRowsSelectionState,
-		getBooleanCellValue,
-		getColumnMeta,
-		getPinningStyle,
-		getRowSelectionState,
-		//		getSelectedRowCount,
-		getUrlCellValue,
-		justifyClass,
-		openUrlCell,
-		selectionColumnSizeStyle,
-		tableSizeStyle
-	} from './data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	const rowModel = $derived(table.getRowModel());
-	const headerGroups = $derived(table.getHeaderGroups());
-	const visibleLeafColumns = $derived(table.getVisibleLeafColumns());
-	const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
-	const hasGrowColumn = $derived(growColumn !== undefined);
-	const visibleColumnCount = $derived(visibleLeafColumns.length);
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	const tableColumnCount = $derived(visibleColumnCount + (isRowSelectionEnabled ? 1 : 0));
-	const renderedColumnCount = $derived(tableColumnCount + 1);
-	const headerGroupCount = $derived(headerGroups.length);
-	//	const allRowsSelectionState = $derived(
-	//		getAllRowsSelectionState(table, table.store.state.rowSelection)
-	//	);
-	//	const selectedRowCount = $derived(getSelectedRowCount(table, table.store.state.rowSelection));
-	//	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
-	const allRowsSelectionState = $derived<boolean | 'indeterminate'>(false);
-	const selectedRowCount = $derived(0);
-	const isColumnResizing = $derived(false);
-</script>
-
-<div
-	class={cn(
-		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
-		className
-	)}
-	{...rest}
->
-	{#if isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-    <div class="min-h-0 flex-1 overflow-auto">
-    	<table
-    		class="table-fixed border-separate border-spacing-0 text-sm"
-    		style={tableSizeStyle(table, isRowSelectionEnabled)}
-    	>
-    		<colgroup>
-    			{#if isRowSelectionEnabled}
-    				<col style={selectionColumnSizeStyle()} />
-    			{/if}
-    			{#each visibleLeafColumns as column (column.id)}
-    				<col
-    					style={getColumnMeta(column.columnDef)?.grow
-    						? undefined
-    						: columnSizeStyle(column.getSize())}
-    				/>
-    			{/each}
-    			{#if !hasGrowColumn}
-    				<col />
-    			{/if}
-    		</colgroup>
-    		{#if caption}
-    			<caption class="sr-only">{caption}</caption>
-    		{/if}
-    		<DataTableHead
-    			{table}
-    			{headerGroups}
-    			{headerGroupCount}
-    			{isRowSelectionEnabled}
-    			{isMultiRowSelectionEnabled}
-    			{allRowsSelectionState}
-    			{hasGrowColumn}
-    		/>
-    		<tbody>
-    			{#each rowModel.rows as row (row.id)}
-    				{@const rowSelected = getRowSelectionState(table, table.store.state.rowSelection, row.id)}
-    				<tr
-    					class={cn(
-    						'group/row',
-    						'[--row-bg:var(--compote-surface-1)]',
-    						'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
-    						rowSelected &&
-    							'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
-    					)}
-    					onclick={(event) => onRowClick?.({ row: row.original, event })}
-    					ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
-    				>
-    					{#if isRowSelectionEnabled}
-    						<td
-    							class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
-    							style="position: sticky; left: 0; z-index: 1"
-    						>
-    							<Checkbox
-    								size="sm"
-    								aria-label="Select row"
-    								class="mx-auto size-4"
-    								checked={rowSelected}
-    								disabled={!row.getCanSelect()}
-    								onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
-    							/>
-    						</td>
-    					{/if}
-    					{#each row.getVisibleCells() as cell (cell.id)}
-    						{@const columnDef = getColumnMeta(cell.column.columnDef)}
-    						<td
-    							class={cn(
-    								'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
-    								alignClass(columnDef?.align),
-    								cell.column.getIsPinned() && 'bg-(--row-bg)'
-    							)}
-    							style={getPinningStyle(cell.column, false, isRowSelectionEnabled)}
-    						>
-    							{#if columnDef?.type === 'boolean'}
-    								{@const value = getBooleanCellValue(cell.getValue())}
-    								{#if value === true}
-    									<span
-    										class="inline-flex size-5 items-center justify-center text-success"
-    										role="img"
-    										aria-label="Yes"
-    									>
-    										<PhCheck class="size-4" />
-    									</span>
-    								{:else if value === false}
-    									<span
-    										class="inline-flex size-5 items-center justify-center text-danger"
-    										role="img"
-    										aria-label="No"
-    									>
-    										<PhX class="size-4" />
-    									</span>
-    								{:else}
-    									-
-    								{/if}
-    							{:else if columnDef?.type === 'url'}
-    								{@const value = getUrlCellValue(cell.getValue())}
-    								{#if value}
-    									<button
-    										type="button"
-    										class={cn(
-    											'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
-    											justifyClass(columnDef.align)
-    										)}
-    										onclick={() => openUrlCell(value)}
-    									>
-    										<PhArrowSquareOut class="size-3.5 shrink-0" />
-    									</button>
-    								{:else}
-    									-
-    								{/if}
-    							{:else}
-    								<FlexRender {cell} />
-    							{/if}
-    						</td>
-    					{/each}
-    					{#if !hasGrowColumn}
-    						<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
-    						></td>
-    					{/if}
-    				</tr>
-    			{:else}
-    				<tr>
-    					<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
-    						{emptyMessage}
-    					</td>
-    				</tr>
-    			{/each}
-    		</tbody>
-    	</table>
-    </div>
-
-    <div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-    	{#if isRowSelectionEnabled}
-    		{selectedRowCount} of {rowModel.rows.length} rows selected
-    	{:else}
-    		{rowModel.rows.length} rows
-    	{/if}
-    </div>
-
-</div>

package/dist/components/data-table/index.ts.md

@@ -1,22 +0,0 @@
-export { createDataTableColumnHelper } from './column-helper';
-export { createTable } from './create-table';
-export { default as Root } from './data-table.svelte';
-export { default as Toolbar } from './data-table-toolbar.svelte';
-export { default as Title } from './data-table-title.svelte';
-export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
-export { default as ColumnFilter } from './data-table-column-filter.svelte';
-export type { CreateDataTableOptions, DataTableFeatures, DataTableInstance } from './create-table';
-export type {
-DataTableAlign,
-DataTableAccessorFnColumn,
-DataTableAccessorKeyColumn,
-DataTableColumn,
-DataTableColumnBase,
-DataTableColumnOptions,
-DataTableColumnType,
-DataTableCellPropsResolver,
-DataTableCellRenderProps,
-DataTableGroupColumn,
-DataTableLeafColumnBase,
-DataTableLeafColumn
-} from './types';