@isoftdata/svelte-table 2.11.1 → 2.12.0

package/dist/Table.svelte

@@ -1,1165 +1,1186 @@
-<script module>
-	import { getBootstrapCdnVersion } from '@isoftdata/utility-bootstrap'
-	let bs5 = $state(false)
-	try {
-		bs5 = getBootstrapCdnVersion() === 5
-	} catch (e) {
-		onMount(() => {
-			bs5 = getBootstrapCdnVersion() === 5
-		})
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="R extends UuidRowProps"
->
-	import type { Snippet } from 'svelte'
-
-	import { ColumnInfoRunicStore } from './column-info-store.svelte'
-
-	import type { i18n } from 'i18next'
-	import type { Get } from 'type-fest'
-	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'
-
-	import Pagination from './Pagination.svelte'
-	import Td from './Td.svelte'
-	import Input from '@isoftdata/svelte-input'
-	import ContextMenu, { DropdownItem } from '@isoftdata/svelte-context-menu'
-	import { v4 as uuid } from '@lukeed/uuid'
-	import { format as formatCurrency } from '@isoftdata/utility-currency'
-	import { setContext, tick, onMount, getContext, untrack } from 'svelte'
-	import { on } from 'svelte/events'
-	import naturalCompare from 'natural-compare-lite'
-	import type { HTMLTableAttributes, ClassValue } from 'svelte/elements'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-	import Icon from '@isoftdata/svelte-icon'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	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: 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
-	type Column = GenericColumn<R & {}>
-
-	interface Props extends Omit<HTMLTableAttributes, 'children' | `aria-${string}` | `bind:${string}` | `on:${string}`> {
-		filterEnabled?: boolean
-		columns: Array<Column>
-		tableId?: string
-		rows: Array<R>
-		sortDirection?: SortDirection
-		sortColumn?: Column | undefined
-		class?: ClassValue
-		perPageCount?: number
-		currentPageNumber?: number
-		showFooter?: boolean
-		footers?: Array<FooterValue>
-		lazySort?: boolean //when true, the table can only be resorted when the user clicks on a column header(not real time as data changes)
-		idProp?: K | 'uuid' //required for lazy sorting.
-		previousSortOrder?: Array<IndexedRow & { order: number }>
-		filterProps?: Array<KeyPath> | false
-		filter?: string
-		filterLabel?: string
-		filterPlaceholder?: string
-		filterDisabled?: boolean
-		filterReadonly?: boolean
-		filterLazy?: boolean | number
-		showFilterLabel?: boolean
-		headerRowClass?: ClassValue
-		headerColumnClass?: ClassValue
-		filterColumnClass?: ClassValue
-		columnHidingEnabled?: boolean
-		selectionEnabled?: boolean
-		// Array<number> | Array<string> | Array<R[K]> ???
-		selectedRowIds?: Array<GetIndexedRowProperty>
-		rowSelectionIdProp?: KeyPath | 'uuid'
-		rowSelectionRequiresModKey?: boolean
-		selectionMode?: 'SINGLE' | 'RANGE' | null
-		multiSelectEnabled?: boolean
-		lastClickedIdForRange?: GetIndexedRowProperty | undefined
-		totalItemsCount?: number
-		stickyHeader?: boolean
-		responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl'
-		size?: 'sm' | ''
-		striped?: boolean
-		/** When true, enables tree-specific features. Required if you want to use `TreeRow`s. */
-		tree?: boolean
-		bordered?: boolean
-		hover?: boolean
-		previousSortColumn?: Column | undefined
-		previousSortDirection?: SortDirection | undefined
-		parentClass?: ClassValue
-		parentStyle?: string
-		hideButtonClass?: ClassValue
-		columnResizingEnabled?: boolean
-		columnPinningEnabled?: boolean
-		/** If specified, where to serialize the columnInfo store */
-		localStorageKey?: string | undefined
-		columnClickedMethod?: typeof defaultColumnClicked
-		filterMethod?: typeof defaultFilter
-		rowMatchesFilterMethod?: typeof defaultRowMatchesFilter
-		filteredRows?: Array<IndexedRow>
-		sortedRows?: Array<IndexedRow>
-		currentPageRows?: Array<IndexedRow>
-		// snippets
-		header?: Snippet
-		body?: Snippet<[{ rows: Array<R & { originalIndex: number; uuid: string }>; visibleColumnsCount: number }]>
-		children?: Snippet<[{ row: R & { originalIndex: number; uuid: string }; index: number }]>
-		noRows?: Snippet<[{ visibleColumnsCount: number }]>
-		footerRow?: Snippet<[{ footers: Array<FooterValue> }]>
-		// callbacks
-		pageChange?: (context: { pageNumber: number }) => void
-		columnResizeEnd?: (context: { column: Column }) => void
-	}
-
-	const uid = $props.id()
-
-	let {
-		filterEnabled = false,
-		columns,
-		tableId = uid,
-		rows,
-		sortDirection = $bindable('ASC'),
-		sortColumn = $bindable(undefined),
-		class: tableClass = '',
-		perPageCount = 0,
-		currentPageNumber = $bindable(1),
-		showFooter = false,
-		lazySort = false,
-		idProp = 'uuid',
-		previousSortOrder = $bindable([]),
-		filterProps = false,
-		filter = $bindable(''),
-		filterLabel = translate('common:filter', 'Filter'),
-		filterPlaceholder = translate('common:filter', 'Filter'),
-		filterDisabled = false,
-		filterReadonly = false,
-		filterLazy = false,
-		showFilterLabel = false,
-		headerRowClass = bs5 ? 'row' : 'form-row',
-		headerColumnClass = 'col',
-		filterColumnClass = 'col-lg-2 col-md-4 col-sm-6 align-self-end',
-		columnHidingEnabled = false,
-		selectionEnabled = false,
-		selectedRowIds = $bindable([]),
-		rowSelectionIdProp = 'uuid',
-		rowSelectionRequiresModKey = false,
-		selectionMode = $bindable(null),
-		multiSelectEnabled = true,
-		lastClickedIdForRange = $bindable(undefined),
-		totalItemsCount = 0,
-		stickyHeader = false,
-		responsive = false,
-		size = 'sm',
-		striped = true,
-		tree = false,
-		bordered = true,
-		hover = true,
-		previousSortColumn = $bindable(undefined),
-		previousSortDirection = $bindable(undefined),
-		parentClass = '',
-		parentStyle = '',
-		hideButtonClass = '',
-		columnResizingEnabled = false,
-		columnPinningEnabled = false,
-		localStorageKey = undefined,
-		columnClickedMethod = defaultColumnClicked,
-		filterMethod = defaultFilter,
-		rowMatchesFilterMethod = defaultRowMatchesFilter,
-		filteredRows = $bindable(filterMethod('', rows, columns)),
-		sortedRows = $bindable(filteredRows),
-		currentPageRows = $bindable(sortedRows.slice(0, perPageCount)),
-		// snippets
-		header,
-		body,
-		children,
-		noRows,
-		footerRow,
-		// callbacks
-		pageChange,
-		columnResizeEnd,
-		...rest
-	}: Props = $props()
-
-	let lastPageNumber: number = $state(1)
-	let paginationComponent: Pagination<IndexedRow> | undefined = $state()
-	let contextMenu: ContextMenu | undefined = $state()
-	let contextMenuColumn: Column | undefined = $state()
-	let columnResizingIsActive: boolean = $state(false)
-	/** Set to true after getting initial table widths when resizing enabled*/
-	let useFixedLayout = $state(false)
-	let tableParent: HTMLDivElement | undefined = $state()
-
-	// Do the initial sort if they specified a default sort column
-	// svelte-ignore state_referenced_locally
-	const defaultSortColumn = columns.find(column => column.defaultSortColumn)
-	if (defaultSortColumn) {
-		sortColumn = defaultSortColumn
-		sortDirection = defaultSortColumn.defaultSortDirection || 'ASC'
-
-		doSort({
-			rows: filteredRows,
-			sortColumn,
-			sortDirection,
-			sameSortOrder: false,
-		})
-	}
-
-	// Need to track which rows are expanded so when the rows reorder, they correctly keep that state.
-	const expandedRows = writable<Record<number | string, boolean>>({})
-	// svelte-ignore state_referenced_locally
-	if (tree) {
-		setContext('expandedRows', expandedRows)
-	}
-
-	// TODO: bad things will happen if we update any of our apps to use Runes for the store if we don't account for that here
-	const session = getContext<Writable<{ userAccountId?: number }> | undefined>('session')
-	// This will be accessible on the component instance, ie `const columnInfo = $derived(table?.columnInfo)` if you need it
-	export const columnInfo = new ColumnInfoRunicStore<R>(() => columns, {
-		// svelte-ignore state_referenced_locally
-		key: localStorageKey,
-		userAccountId: session && $session ? $session.userAccountId : undefined,
-	})
-	// Set as context so we can retrieve it in the Td component
-	setContext('columnInfo', columnInfo)
-	// Set as context so we can retrieve it in the TreeRow component
-	const selectedRowIdsStore = writable(selectedRowIds)
-	setContext('selectedRowIds', selectedRowIdsStore)
-	// svelte-ignore state_referenced_locally
-	setContext('idProp', idProp)
-	// svelte-ignore state_referenced_locally
-	setContext('columnResizingEnabled', writable(columnResizingEnabled))
-	setContext('bs5', bs5)
-
-	// #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)
-		}
-
-		doSort({
-			rows: filteredRows,
-			sortColumn: clickedColumn,
-			sortDirection,
-			sameSortOrder: false,
-		})
-	}
-
-	function defaultFilter(filter: string, rows: R[], columns: Column[]): IndexedRow[] {
-		const columnProps = columns
-			?.map(({ property }) => property)
-			.filter((property): property is KeyPath => !isArbitraryProperty(property))
-
-		if (filterEnabled) {
-			const props = filterProps || columnProps
-			return getFilterMatches(filter, rows, props)
-		}
-
-		return rows.map((row, index): IndexedRow => ({ ...row, originalIndex: index, uuid: row.uuid || uuid() }))
-	}
-
-	/** In normal mode, returns all rows matching the filter.
-	 *
-	 * In tree mode, shows all children if parent matches, or shows matching children and their children
-	 */
-	function getFilterMatches(filter: string, theRows: Array<R>, props: KeyPath[]) {
-		return theRows.reduce((rows, row, index): IndexedRow[] => {
-			if (rowMatchesFilterMethod(filter, row, props)) {
-				rows.push({ ...row, originalIndex: index, uuid: 'uuid' in row ? (row.uuid as string) : uuid() })
-			} else if (tree && Array.isArray(row.children) && row.children.length) {
-				const children = getFilterMatches(filter, row.children, props)
-				if (children.length) {
-					rows.push({ ...row, children, originalIndex: index, uuid: 'uuid' in row ? (row.uuid as string) : uuid() })
-				}
-			}
-
-			return rows
-		}, new Array<IndexedRow>())
-	}
-
-	export function defaultRowMatchesFilter(filter: string, row: R, props: Array<RowProperties<R>>) {
-		return (
-			!filter ||
-			props.some(prop => {
-				const value = getNestedProperty(row, prop)
-				if (typeof value === 'string' || typeof value === 'number') {
-					return value.toString().toUpperCase().indexOf(filter.toUpperCase()) > -1
-				}
-				return false
-			})
-		)
-	}
-
-	export function getNestedProperty(
-		row: R & { uuid: string },
-		path: KeyPath | 'uuid',
-		defaultValue?: string | number,
-	): GetIndexedRowProperty
-	export function getNestedProperty(row: R, path: KeyPath, defaultValue?: string | number): GetRowProperty
-	export function getNestedProperty(
-		row: R | (R & { uuid: string }),
-		path: KeyPath | 'uuid',
-		defaultValue?: string | number,
-	): GetRowProperty | GetIndexedRowProperty {
-		if (!path) {
-			return defaultValue as GetRowProperty
-		}
-
-		if (row[path]) {
-			return row[path] as GetRowProperty
-		}
-
-		const val =
-			path
-				.split('[')
-				// TODO figure out if we can do this less evilly
-				.reduce((obj, prop) => (obj as any)?.[prop.replace(/\]/g, '')], row as any) ?? defaultValue
-		return val
-	}
-
-	async function columnClickHandler(clickedColumn: Column) {
-		if (clickedColumn.sortType === false || columnResizingIsActive || isArbitraryProperty(clickedColumn.property)) {
-			return
-		}
-		sortDirection = sortDirection === 'ASC' && clickedColumn.property === sortColumn?.property ? 'DESC' : 'ASC'
-
-		columnClickedMethod(clickedColumn, sortDirection)
-
-		sortColumn = clickedColumn
-		await tick()
-	}
-
-	export function expandRow(rowId: string | number, expanded = true) {
-		if (tree) {
-			$expandedRows[rowId] = expanded
-		} else {
-			console.warn('expandRow should only be used when the `tree` prop is set to true on the Table component.')
-		}
-	}
-
-	export function rowIsSelected(
-		row: IndexedRow,
-		rowSelectionIdProp: KeyPath | 'uuid',
-		selectedRowIds: Array<GetIndexedRowProperty>,
-	) {
-		const selectionId = getNestedProperty(row, rowSelectionIdProp, row.uuid)
-		return selectedRowIds.includes(selectionId)
-	}
-
-	export function rowClick(row: IndexedRow) {
-		if (!selectionEnabled || !rowSelectionIdProp) {
-			return
-		}
-		const clickedId = getNestedProperty(row, rowSelectionIdProp || 'uuid')
-
-		const selectedIds = selectedRowIds
-
-		let newSelectedIds: Array<GetIndexedRowProperty> = []
-
-		if (!selectionMode && !rowSelectionRequiresModKey) {
-			selectionMode = 'SINGLE'
-		}
-
-		if (selectionMode === 'SINGLE') {
-			newSelectedIds = selectedIds
-			const foundInExistingSelections = selectedIds.some(id => id === clickedId)
-
-			if (foundInExistingSelections) {
-				newSelectedIds = newSelectedIds.filter(id => id !== clickedId)
-			} else if (multiSelectEnabled) {
-				newSelectedIds = newSelectedIds.concat(clickedId)
-			} else {
-				newSelectedIds = [clickedId]
-			}
-		} else if (selectionMode === 'RANGE') {
-			if (selectedIds.length < 1) {
-				newSelectedIds = [clickedId]
-			} else {
-				newSelectedIds = selectedIds
-				const clickedItemIndex = sortedRows.findIndex(item => {
-					return item[rowSelectionIdProp] === clickedId
-				})
-
-				const lastSelectedIndex = sortedRows.findIndex(item => {
-					return item[rowSelectionIdProp] === lastClickedIdForRange
-				})
-
-				let selectionDirection: 'UP' | 'DOWN' | undefined
-
-				if (lastSelectedIndex > clickedItemIndex) {
-					selectionDirection = 'UP'
-				} else if (lastSelectedIndex < clickedItemIndex) {
-					selectionDirection = 'DOWN'
-				}
-
-				if (selectionDirection) {
-					sortedRows.forEach((item, index) => {
-						if (selectionDirection === 'UP' && index <= lastSelectedIndex && index >= clickedItemIndex) {
-							newSelectedIds = newSelectedIds.concat(getNestedProperty(item, rowSelectionIdProp))
-						} else if (selectionDirection === 'DOWN' && index >= lastSelectedIndex && index <= clickedItemIndex) {
-							newSelectedIds = newSelectedIds.concat(getNestedProperty(item, rowSelectionIdProp))
-						}
-					})
-				}
-			}
-		} else {
-			return
-		}
-
-		const clickedIdWasAdded = newSelectedIds.find(id => id === clickedId)
-
-		let lastClickedId: GetIndexedRowProperty | undefined
-
-		if (newSelectedIds.length === 0) {
-			lastClickedId = undefined
-		} else if (selectionMode === 'SINGLE' && clickedIdWasAdded) {
-			lastClickedId = clickedId
-		} else {
-			lastClickedId = lastClickedIdForRange
-		}
-
-		selectedRowIds = [...new Set(newSelectedIds)]
-		lastClickedIdForRange = lastClickedId
-	}
-	export function setPageVisibleByItemIndex(index: number) {
-		if (index > -1) {
-			paginationComponent?.setPageVisibleByItemIndex(index)
-		}
-	}
-	export function setPageVisibleByItemId({ id, keyName }: { id: number | string; keyName: K }) {
-		const index = sortedRows.findIndex(item => item[keyName] == id)
-
-		if (index > -1) {
-			paginationComponent?.setPageVisibleByItemIndex(index)
-		}
-	}
-	/**
-	 * Sorts the rows in the table. `rows` should be pre-filtered, and defaults to `filteredRows` if omitted
-	 */
-	export function doSort({
-		rows = filteredRows,
-		sortColumn,
-		sortDirection,
-		sameSortOrder,
-	}: {
-		/** Defaults to `filteredRows` if omitted */
-		rows?: Array<IndexedRow>
-		sortColumn: Column | undefined
-		sortDirection: SortDirection
-		sameSortOrder: boolean
-	}) {
-		const keepSameSortOrder = !!(lazySort && sameSortOrder && idProp)
-		const hasPreviousSort = previousSortColumn && previousSortOrder.length > 0
-
-		let sortProp: KeyPath
-		if (
-			keepSameSortOrder &&
-			hasPreviousSort &&
-			previousSortColumn &&
-			idProp &&
-			!isArbitraryProperty(previousSortColumn.property)
-		) {
-			sortColumn = previousSortColumn
-			sortProp = previousSortColumn.property
-			sortDirection = 'ASC' //force ASC for keeping the same order because we defined the order in previousSortOrder
-
-			rows = rows.map(row => {
-				const foundItem = previousSortOrder.find(
-					previousSortOrderRow => !!idProp && previousSortOrderRow[idProp] === row[idProp],
-				)
-
-				return { ...row, order: foundItem ? foundItem.order : 0 }
-			})
-		} else if (sortColumn?.property && !isArbitraryProperty(sortColumn.property)) {
-			sortProp = sortColumn.property
-		} else {
-			// no sort property, can't sort
-			sortedRows = rows
-			return
-		}
-
-		function doTheSort(theRows: Array<IndexedRow>): Array<IndexedRow> {
-			if (tree) {
-				return theRows
-					.slice()
-					.map(row => {
-						if (Array.isArray(row.children)) {
-							return {
-								...row,
-								children: doTheSort(row.children),
-							}
-						}
-						return row
-					})
-					.sort((a: IndexedRow, b: IndexedRow) =>
-						sortColumn?.sortType === 'ALPHA_NUM' ? alphaNumSort(a, b) : standardSort(a, b),
-					)
-			}
-			return theRows.slice().sort(sortColumn?.sortType === 'ALPHA_NUM' ? alphaNumSort : standardSort)
-		}
-
-		const theSortedRows = doTheSort(rows)
-
-		previousSortOrder = theSortedRows.map((row, index) => ({
-			...row,
-			order: index,
-		}))
-		previousSortDirection = sortDirection
-		previousSortColumn = sortColumn
-		sortedRows = theSortedRows
-		return
-
-		function standardSort(a: R, b: R) {
-			let aValue: Get<R, KeyPath> | string = getNestedProperty(a, sortProp, '')
-			let bValue: Get<R, KeyPath> | string = getNestedProperty(b, sortProp, '')
-
-			if (typeof aValue === 'string') {
-				aValue = aValue.toUpperCase()
-			}
-			if (typeof bValue === 'string') {
-				bValue = bValue.toUpperCase()
-			}
-
-			if (aValue < bValue) {
-				return sortDirection === 'ASC' ? -1 : 1
-			}
-			if (aValue > bValue) {
-				return sortDirection === 'ASC' ? 1 : -1
-			}
-
-			return 0
-		}
-
-		function alphaNumSort(a: R, b: R) {
-			const aValue = getNestedProperty(a, sortProp, '')
-			const bValue = getNestedProperty(b, sortProp, '')
-			let compareResults = 0
-			if (
-				(typeof aValue === 'number' || typeof aValue === 'string') &&
-				(typeof bValue === 'number' || typeof bValue === 'string')
-			) {
-				compareResults = naturalCompare(aValue.toString(), bValue.toString())
-			} else if (typeof aValue === 'number' || typeof aValue === 'string') {
-				compareResults = 1
-			} else if (typeof bValue === 'number' || typeof bValue === 'string') {
-				compareResults = -1
-			}
-
-			return sortDirection === 'ASC' ? compareResults : compareResults * -1
-		}
-	}
-
-	export function setColumnVisibility(columnProperties: Array<ColumnProperty> | ColumnProperty, visible: boolean) {
-		if (!Array.isArray(columnProperties)) {
-			columnProperties = [columnProperties]
-		}
-
-		try {
-			untrack(() => {
-				columnInfo.updateColumns(
-					columnProperties.map((property): { property: ColumnProperty; visible: boolean } => ({
-						property,
-						visible,
-					})),
-				)
-			})
-		} catch (err) {
-			console.error(`Error setting column visibility for columns ${JSON.stringify(columnProperties)}`, err)
-		}
-	}
-
-	/** 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<ColumnProperty> | ColumnProperty,
-		getVisible: () => boolean,
-	) {
-		$effect(() => {
-			const visible = getVisible()
-			setColumnVisibility(columnProperties, visible)
-		})
-	}
-
-	function hideColumn(column: Column) {
-		if (column) {
-			columnInfo.updateColumn(column.property, { visible: false })
-		}
-		contextMenuColumn = undefined
-	}
-
-	function showColumn(column: Column) {
-		if (column) {
-			columnInfo.updateColumn(column.property, { visible: true })
-		}
-		contextMenuColumn = undefined
-	}
-
-	function pinUnpinColumn(column: Column) {
-		columnInfo.updateColumn(column.property, { pinned: !column.pinned })
-	}
-
-	function contextMenuHandler(event: MouseEvent, column: string) {
-		if ((columnHidingEnabled || columnResizingEnabled || columnPinningEnabled) && !event.ctrlKey) {
-			event.preventDefault()
-			contextMenuColumn = columnInfo.current[column]
-			return contextMenu?.open(event, `col-${tableId}-${CSS.escape(column)}`)
-		}
-		return Promise.resolve()
-	}
-	// #endregion
-	// #region Tree-specific functions
-
-	// #endregion
-
-	function onColumnMouseDown(event: MouseEvent, column: Column) {
-		event.stopPropagation()
-		if (!event.target || !(event.target instanceof HTMLDivElement)) {
-			return
-		}
-
-		const htmlColumn = tableParent?.querySelector<HTMLTableCellElement>(
-			`#col-${tableId}-${CSS.escape(column.property)}`,
-		)
-		const columnIndex = columns.findIndex(col => col.property === column.property)
-		if (!htmlColumn || columnIndex === -1) {
-			return
-		}
-
-		const mouseDownPageX = event.pageX
-		const mouseDownColumnWidth = htmlColumn.offsetWidth
-
-		event.target.classList.add('resizing')
-		columnResizingIsActive = true
-
-		const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-			const widthDifference = mouseMoveEvent.pageX - mouseDownPageX
-			const newWidth = `${mouseDownColumnWidth + widthDifference}px`
-			htmlColumn.style.width = column.minWidth ? `max(${newWidth}, ${column.minWidth})` : newWidth
-		}
-
-		const mouseUpHandler = () => {
-			if (!(event.target instanceof HTMLDivElement)) {
-				return
-			}
-			event.target.classList.remove('resizing')
-			columnInfo.updateColumn(column.property, { userWidth: htmlColumn.style.width })
-
-			removeMouseMoveListener?.()
-			removeMouseUpListener?.()
-			columnResizeEnd?.({ column: columns[columnIndex] })
-			// We want to ensure the user's mouseup event doesn't trigger a click event on the column header
-			setTimeout(() => (columnResizingIsActive = false), 50)
-		}
-
-		const removeMouseMoveListener = tableParent ? on(tableParent, 'mousemove', mouseMoveHandler) : undefined
-		const removeMouseUpListener = tableParent ? on(tableParent, 'mouseup', mouseUpHandler) : undefined
-	}
-
-	async function setDefaultColumnWidths() {
-		useFixedLayout = false
-		await tick()
-		if (columnResizingEnabled) {
-			columnInfo.updateColumns(
-				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
-					const explicitWidth = thisColumnInfo?.width
-
-					return {
-						property: column.property,
-						userWidth: prevUserWidth ?? explicitWidth ?? getColumnThWidth(column.property),
-					}
-				}),
-			)
-			useFixedLayout = true
-		}
-	}
-
-	function getColumnThWidth(property: string) {
-		const thWidth =
-			tableParent?.querySelector<HTMLTableCellElement>(`#col-${tableId}-${CSS.escape(property)}`)?.offsetWidth ?? 25
-		return `${thWidth}px`
-	}
-	// #region Computed
-	$effect(() => {
-		selectedRowIdsStore.set(selectedRowIds)
-	})
-
-	$effect(() => {
-		filteredRows = filterMethod(filter, rows, columns)
-		// Should only run when filter/rows/columns changes since everything else is untracked
-		untrack(() =>
-			doSort({
-				rows: filteredRows && Array.isArray(filteredRows) ? filteredRows : [],
-				sortColumn: sortColumn,
-				sortDirection: sortDirection,
-				sameSortOrder: true,
-			}),
-		)
-	})
-
-	const responsiveClass = $derived(
-		responsive === true ? 'table-responsive' : !!responsive ? `table-responsive-${responsive}` : '',
-	)
-	/** Includes information computed by the columnInfo store, including what we serialize to localstorage */
-	const computedColumns = $derived(columnInfo.columns)
-	const visibleColumns = $derived(computedColumns.filter(column => column.unhidable || column.visible))
-	const hiddenColumns = $derived(computedColumns.filter(column => !column.unhidable && !column.visible))
-	const showPagination = $derived((perPageCount && rows.length > perPageCount) || totalItemsCount > perPageCount)
-
-	const footers = $derived(
-		columns.map(column => {
-			if (column.footer && showFooter) {
-				const property = column.footer.altProperty ? column.footer.altProperty : column.property
-				const mathFunctions = ['AVG', 'SUM']
-
-				let columnValues: Array<number | GetRowProperty> = rows.map(row => {
-					const value = isArbitraryProperty(property)
-						? ('' as Get<R, RowProperties<R>>)
-						: getNestedProperty(row, property)
-					if (
-						column.footer?.fn &&
-						typeof column.footer.fn === 'string' &&
-						mathFunctions.includes(column.footer.fn) &&
-						typeof value === 'string'
-					) {
-						return parseFloat(value) || 0
-					}
-					return value
-				})
-
-				if (column.footer.requiredValue) {
-					columnValues = columnValues.filter(value => value === column.footer?.requiredValue)
-				}
-
-				let value: FooterReducerValue<R>
-
-				function sum(sum: number, val: unknown): number {
-					if (typeof val === 'number') {
-						return sum + val
-					}
-
-					if (typeof val === 'string') {
-						const parsedVal = parseFloat(val)
-						if (isNaN(parsedVal)) {
-							return sum
-						}
-						return sum + parsedVal
-					}
-
-					return sum
-				}
-
-				switch (column.footer.fn) {
-					case 'COUNT':
-						value = columnValues.length
-						break
-					case 'AVG':
-						value = (columnValues.reduce(sum, 0) / columnValues.length).toFixed(2)
-						break
-					case 'SUM':
-						value = columnValues.reduce(sum, 0)
-						break
-					default:
-						if (typeof column.footer.fn === 'function') {
-							value = columnValues.reduce(column.footer.fn, column.footer.initialValue)
-						} else {
-							value = ''
-						}
-						break
-				}
-
-				return {
-					property: column.property,
-					value:
-						column.footer.formatCurrency && (typeof value === 'string' || typeof value === 'number')
-							? formatCurrency(value)
-							: value,
-				}
-			}
-			return {
-				property: column.property,
-				value: '',
-			}
-		}),
-	)
-	//#endregion
-	onMount(() => {
-		setDefaultColumnWidths()
-	})
-</script>
-
-{#if filterEnabled}
-	<div class={headerRowClass}>
-		<div class={headerColumnClass}>
-			{@render header?.()}
-		</div>
-		<div class={filterColumnClass}>
-			<Input
-				label={filterLabel}
-				showLabel={showFilterLabel}
-				bind:value={filter}
-				placeholder={filterPlaceholder}
-				disabled={filterDisabled}
-				readonly={filterReadonly || null}
-				lazy={filterLazy}
-			/>
-			<!-- || null is so svelte doesn't include readonly when it's falsy, probably a result of it being `restProps`'d on the input -->
-		</div>
-	</div>
-{/if}
-
-<!-- webkit-user-select: none; here fixes an issue in Safari where text selection of the column headers would happen while resizing the columns -->
-<div
-	class={[parentClass, responsiveClass]}
-	style={parentStyle}
-	class:mb-3={showPagination}
-	style:user-select={columnResizingIsActive ? 'none' : undefined}
-	style:-webkit-user-select={columnResizingIsActive ? 'none' : undefined}
-	style:cursor={columnResizingIsActive ? 'col-resize' : undefined}
-	bind:this={tableParent}
->
-	<table
-		id={tableId}
-		class={['table mb-0', tableClass]}
-		class:table-sm={size === 'sm'}
-		class:table-layout-fixed={columnResizingEnabled && useFixedLayout}
-		class:sticky={stickyHeader}
-		class:table-striped={striped}
-		class:table-bordered={bordered}
-		class:table-hover={hover}
-		{...rest}
-	>
-		<thead>
-			<tr>
-				{#each visibleColumns as column, index}
-					{@const isSortColumn = sortColumn?.property === column.property}
-					{@const doEllipsis = column.ellipsis || columnResizingEnabled}
-
-					<th
-						id="col-{tableId}-{column.property}"
-						class={[
-							'unselectable',
-							column.class,
-							{
-								'cursor-pointer': column.sortType !== false && !isArbitraryProperty(column.property),
-								'd-print-none': column.hideForPrint,
-								'text-left': !bs5 && column.align === 'left',
-								'text-start': column.align === 'start' || (bs5 && column.align === 'left'),
-								'text-right': !bs5 && (column.align === 'right' || column.numeric),
-								'text-end': column.align === 'end' || (bs5 && (column.align === 'right' || column.numeric)),
-								'text-center': column.align === 'center',
-								'text-truncate': doEllipsis,
-								'bg-white': !bs5 && stickyHeader,
-								'table-secondary': column.pinned,
-								'text-nowrap': !column.wrap,
-								pinned: column.pinned,
-							},
-						]}
-						title={column.title ?? column.name}
-						style:width={column.userWidth ?? column.width}
-						style:min-width={column.minWidth}
-						style:--pinned-column-offset={column.pinned ? columnInfo.getPinnedColumnOffset(column.property) : undefined}
-						data-sort-specified={isSortColumn ? sortDirection : ''}
-						onclick={() => columnClickHandler(column)}
-						oncontextmenu={event => contextMenuHandler(event, column.property)}
-					>
-						<span
-							class="text-truncate d-inline-block"
-							style="vertical-align: bottom;"
-							style:max-width={doEllipsis && isSortColumn ? 'calc(100% - 20px)' : '100%'}
-						>
-							{@render columnNameAndIcon(column)}
-						</span>
-						<!-- I wonder how to make everything after this move to the right...? -->
-						{#if isSortColumn}
-							{sortDirection === 'ASC' ? '▲' : '▼'}
-						{/if}
-						{#if column.pinned}
-							<Icon
-								class=""
-								icon="thumbtack-angle"
-							/>
-						{/if}
-						{#if columnResizingEnabled && visibleColumns.length - 1 !== index}
-							<!-- I think setting the role and aria-orientation attributes is the best we can do here -->
-							<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-							<!-- svelte-ignore a11y_click_events_have_key_events -->
-							<div
-								id="col-resizer-{tableId}-{column.property}"
-								tabindex={0}
-								role="separator"
-								aria-orientation="horizontal"
-								class="resizer"
-								style="height: 100%;"
-								onmousedown={e => onColumnMouseDown(e, column)}
-							>
-								&nbsp;
-							</div>
-						{/if}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody class:unselectable={selectionMode === 'RANGE'}>
-			{#snippet tableRow(row: R & { originalIndex: number; uuid: string }, index: number)}
-				{#if children}
-					{@render children({ row, index })}
-				{:else}
-					<tr
-						class:table-primary={rowIsSelected(row, rowSelectionIdProp, selectedRowIds)}
-						onclick={() => rowClick(row)}
-					>
-						{#each computedColumns as column (column.property)}
-							<Td
-								align={column.align}
-								property={column.property}
-							>
-								{isArbitraryProperty(column.property)
-									? ''
-									: column.formatter
-										? column.formatter(getNestedProperty(row, column.property, ''))
-										: getNestedProperty(row, column.property, '')}
-							</Td>
-						{/each}
-					</tr>
-				{/if}
-			{/snippet}
-			{#if body}
-				{@render body?.({ rows: currentPageRows, visibleColumnsCount: visibleColumns.length })}
-			{:else if !currentPageRows.length}
-				{@render noRows?.({ visibleColumnsCount: visibleColumns.length })}
-				<!--
-					Only key the #each if the idProp is in the original row.
-					Otherwise, the table will re-render all rows if idProp is 'uuid' and your original row doesn't have one
-				-->
-			{:else if idProp in (rows[currentPageRows[0]?.originalIndex] ?? {})}
-				{#each currentPageRows as row, index (row[idProp])}
-					{@render tableRow(row, index)}
-				{/each}
-			{:else}
-				{#each currentPageRows as row, index}
-					{@render tableRow(row, index)}
-				{/each}
-			{/if}
-		</tbody>
-		{#if showFooter && footers}
-			<tfoot class="font-weight-bold fw-bold">
-				<tr class="table-secondary">
-					{#if footerRow}
-						{@render footerRow({ footers })}
-					{:else}
-						{#each footers as { property, value } (property)}
-							<Td
-								{property}
-								tagName="th">{value ?? ''}</Td
-							>
-						{/each}
-					{/if}
-				</tr>
-			</tfoot>
-		{/if}
-	</table>
-</div>
-
-<Pagination
-	{perPageCount}
-	{totalItemsCount}
-	items={sortedRows}
-	bind:currentPageItems={() => untrack(() => currentPageRows), items => (currentPageRows = items)}
-	bind:currentPageNumber
-	bind:lastPageNumber
-	{pageChange}
-	bind:this={paginationComponent}
-/>
-
-<ContextMenu
-	id="hide-column-context-menu"
-	bind:this={contextMenu}
->
-	{#if columnPinningEnabled}
-		{@const isPinned = !!contextMenuColumn?.pinned}
-		<DropdownItem
-			icon={isPinned ? 'thumbtack-angle-slash' : 'thumbtack-angle'}
-			title={isPinned
-				? translate('common:tableUnpinColumnTitle', 'Unpinning this column will make it scroll normally')
-				: translate(
-						'common:tablePinColumnTitle',
-						'Pinning this column will keep it visible as you scroll to the right',
-					)}
-			onclick={() => {
-				if (contextMenuColumn) {
-					pinUnpinColumn(contextMenuColumn)
-				}
-			}}
-			>{#if contextMenuColumn?.name}
-				{isPinned
-					? translate('common:tableUnpinColumnName', 'Unpin {{name}}', { name: contextMenuColumn.name })
-					: translate('common:tablePinColumnName', 'Pin {{name}}', { name: contextMenuColumn.name })}
-			{:else}
-				{isPinned ? translate('common:tableUnpinColumn', 'Unpin') : translate('common:tablePinColumn', 'Pin')}
-				{#if contextMenuColumn?.icon}
-					<Icon icon={contextMenuColumn.icon}></Icon>
-				{/if}
-			{/if}
-		</DropdownItem>
-
-		{#if columnHidingEnabled || columnResizingEnabled}
-			<div class="dropdown-divider"></div>
-		{/if}
-	{/if}
-
-	{#if columnHidingEnabled}
-		<DropdownItem
-			class={hideButtonClass}
-			disabled={contextMenuColumn?.unhidable}
-			onclick={() => contextMenuColumn && hideColumn(contextMenuColumn)}
-		>
-			<Icon icon="eye-slash"></Icon>
-			{#if contextMenuColumn?.name}
-				{translate('common:tableHideColumn', 'Hide {{- columnName}}', { columnName: contextMenuColumn.name })}
-			{:else if contextMenuColumn?.icon}
-				{translate('common:hide', 'Hide')}
-
-				<Icon
-					prefix={contextMenuColumn.iconPrefix}
-					icon={contextMenuColumn.icon}
-				></Icon>
-			{/if}
-		</DropdownItem>
-
-		{#if hiddenColumns.length > 0}
-			<div class="dropdown-divider"></div>
-			<h5 class="dropdown-header">
-				<Icon icon="eye"></Icon>
-				{translate('common:tableShowColumns', 'Show Column')}
-			</h5>
-		{/if}
-		<div style="max-height: 300px; overflow-y: auto;">
-			{#each hiddenColumns as hiddenColumn (hiddenColumn.property)}
-				<DropdownItem onclick={() => showColumn(hiddenColumn)}>
-					{@render columnNameAndIcon(hiddenColumn)}
-				</DropdownItem>
-			{/each}
-		</div>
-
-		{#if columnResizingEnabled}
-			<div class="dropdown-divider"></div>
-		{/if}
-	{/if}
-
-	{#if columnResizingEnabled}
-		<DropdownItem
-			icon="broom"
-			onclick={() => {
-				columnInfo.updateColumns(
-					computedColumns.map(col => ({
-						property: col.property,
-						userWidth: undefined,
-					})),
-				)
-				setDefaultColumnWidths()
-			}}>{translate('common:tableResetColumnSizes', 'Reset Column Sizes')}</DropdownItem
-		>
-	{/if}
-</ContextMenu>
-
-{#snippet columnNameAndIcon(column: GenericColumn)}
-	<!-- Don't add any whitespace btwn these if blocks to keep the spaces correct -->
-	{#if column.icon && column.iconLeft}
-		<Icon
-			prefix={column.iconPrefix}
-			icon={column.icon}
-		/>{#if column.name}&nbsp;{/if}
-	{/if}{column.name}{#if column.icon && !column.iconLeft}
-		{#if column.name}&nbsp;{/if}<Icon
-			prefix={column.iconPrefix}
-			icon={column.icon}
-		/>
-	{/if}
-{/snippet}
-
-<style>
-	table.sticky {
-		position: relative;
-	}
-
-	table.sticky th {
-		position: sticky;
-		top: 0;
-		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
-	}
-
-	table.sticky > thead > tr > th {
-		z-index: 3;
-	}
-
-	/* Remove bottom margins created by form-groups in the table (BS4 only) */
-	table > tbody :global(.form-group) {
-		margin-bottom: 0%;
-	}
-
-	/* BS5 removed .form-group, which makes it a little trickier to target the label's parent div, but this should do it
-		- The Label component adds mb-3 to the parent div if the label is hidden or mb-1 if it's shown (unlikely if it's in a table)
-		- That div will have a .input-group, .form-control, or .form-select as a direct descendant
-	*/
-	table
-		> tbody
-		:global(
-			td div:where(.mb-3, .mb-1):not(.form-group):has(> :where(.input-group, .form-control, .form-select, .btn-group))
-		) {
-		margin-bottom: 0% !important;
-	}
-
-	.resizer {
-		position: absolute;
-		top: 0;
-		right: 0;
-		width: 10px;
-		cursor: col-resize;
-		user-select: none;
-	}
-	.resizer:hover,
-	.resizing {
-		border-right: 5px solid darkslategray;
-	}
-	.table-layout-fixed {
-		table-layout: fixed;
-	}
-
-	th.pinned {
-		position: sticky;
-		z-index: 11 !important;
-		left: var(--pinned-column-offset, -1);
-	}
-
-	.cursor-pointer {
-		cursor: pointer;
-	}
-</style>
+<script
+	module
+	lang="ts"
+>
+	import { getBootstrapCdnVersion } from '@isoftdata/utility-bootstrap'
+	let bs5 = $state(false)
+	try {
+		bs5 = getBootstrapCdnVersion() === 5
+	} catch {
+		onMount(() => {
+			bs5 = getBootstrapCdnVersion() === 5
+		})
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="R extends UuidRowProps"
+>
+	import type { Snippet } from 'svelte'
+
+	import { ColumnInfoRunicStore } from './column-info-store.svelte'
+
+	import type { i18n } from 'i18next'
+	import type { Get } from 'type-fest'
+	import {
+		type Column as GenericColumn,
+		type SortDirection,
+		type UuidRowProps,
+		type RowProperties,
+		type FooterReducerValue,
+		ARBITRARY_PROPERTY_PREFIX,
+		type ArbitraryProperty,
+		type ColumnInfo,
+	} from './'
+
+	import { writable, type Writable } from 'svelte/store'
+
+	import Pagination from './Pagination.svelte'
+	import Td from './Td.svelte'
+	import Input from '@isoftdata/svelte-input'
+	import ContextMenu, { DropdownItem } from '@isoftdata/svelte-context-menu'
+	import { v4 as uuid } from '@lukeed/uuid'
+	import { format as formatCurrency } from '@isoftdata/utility-currency'
+	import { setContext, tick, onMount, getContext, untrack } from 'svelte'
+	import { on } from 'svelte/events'
+	import naturalCompare from 'natural-compare-lite'
+	import type { HTMLTableAttributes, ClassValue } from 'svelte/elements'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	import Icon from '@isoftdata/svelte-icon'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	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: 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
+	type Column = GenericColumn<R & {}>
+
+	interface Props extends Omit<HTMLTableAttributes, 'children' | `aria-${string}` | `bind:${string}` | `on:${string}`> {
+		filterEnabled?: boolean
+		columns: Array<Column>
+		tableId?: string
+		rows: Array<R>
+		sortDirection?: SortDirection
+		sortColumn?: Column | undefined
+		class?: ClassValue
+		perPageCount?: number
+		currentPageNumber?: number
+		showFooter?: boolean
+		footers?: Array<FooterValue>
+		lazySort?: boolean //when true, the table can only be resorted when the user clicks on a column header(not real time as data changes)
+		idProp?: K | 'uuid' //required for lazy sorting.
+		previousSortOrder?: Array<IndexedRow & { order: number }>
+		filterProps?: Array<KeyPath> | false
+		filter?: string
+		filterLabel?: string
+		filterPlaceholder?: string
+		filterDisabled?: boolean
+		filterReadonly?: boolean
+		filterLazy?: boolean | number
+		showFilterLabel?: boolean
+		headerRowClass?: ClassValue
+		headerColumnClass?: ClassValue
+		filterColumnClass?: ClassValue
+		columnHidingEnabled?: boolean
+		selectionEnabled?: boolean
+		// Array<number> | Array<string> | Array<R[K]> ???
+		selectedRowIds?: Array<GetIndexedRowProperty>
+		rowSelectionIdProp?: RowProperties<IndexedRow>
+		rowSelectionRequiresModKey?: boolean
+		selectionMode?: 'SINGLE' | 'RANGE' | null
+		multiSelectEnabled?: boolean
+		lastClickedIdForRange?: GetIndexedRowProperty | undefined
+		totalItemsCount?: number
+		stickyHeader?: boolean
+		responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+		size?: 'xs' | 'sm' | ''
+		striped?: boolean
+		/** When true, enables tree-specific features. Required if you want to use `TreeRow`s. */
+		tree?: boolean
+		bordered?: boolean
+		hover?: boolean
+		previousSortColumn?: Column | undefined
+		previousSortDirection?: SortDirection | undefined
+		parentClass?: ClassValue
+		parentStyle?: string
+		hideButtonClass?: ClassValue
+		columnResizingEnabled?: boolean
+		columnPinningEnabled?: boolean
+		/** If specified, where to serialize the columnInfo store */
+		localStorageKey?: string | undefined
+		columnClickedMethod?: typeof defaultColumnClicked
+		filterMethod?: typeof defaultFilter
+		rowMatchesFilterMethod?: typeof defaultRowMatchesFilter
+		filteredRows?: Array<IndexedRow>
+		sortedRows?: Array<IndexedRow>
+		currentPageRows?: Array<IndexedRow>
+		// snippets
+		header?: Snippet
+		body?: Snippet<[{ rows: Array<R & { originalIndex: number; uuid: string }>; visibleColumnsCount: number }]>
+		children?: Snippet<[{ row: R & { originalIndex: number; uuid: string }; index: number }]>
+		noRows?: Snippet<[{ visibleColumnsCount: number }]>
+		footerRow?: Snippet<[{ footers: Array<FooterValue> }]>
+		// callbacks
+		pageChange?: (context: { pageNumber: number }) => void
+		columnResizeEnd?: (context: { column: Column }) => void
+	}
+
+	const uid = $props.id()
+
+	let {
+		filterEnabled = false,
+		columns,
+		tableId = uid,
+		rows,
+		sortDirection = $bindable('ASC'),
+		sortColumn = $bindable(undefined),
+		class: tableClass = '',
+		perPageCount = 0,
+		currentPageNumber = $bindable(1),
+		showFooter = false,
+		lazySort = false,
+		idProp = 'uuid',
+		previousSortOrder = $bindable([]),
+		filterProps = false,
+		filter = $bindable(''),
+		filterLabel = translate('common:filter', 'Filter'),
+		filterPlaceholder = translate('common:filter', 'Filter'),
+		filterDisabled = false,
+		filterReadonly = false,
+		filterLazy = false,
+		showFilterLabel = false,
+		headerRowClass = bs5 ? 'row' : 'form-row',
+		headerColumnClass = 'col',
+		filterColumnClass = 'col-lg-2 col-md-4 col-sm-6 align-self-end',
+		columnHidingEnabled = false,
+		selectionEnabled = false,
+		selectedRowIds = $bindable([]),
+		rowSelectionIdProp = 'uuid' as RowProperties<IndexedRow>,
+		rowSelectionRequiresModKey = false,
+		selectionMode = $bindable(null),
+		multiSelectEnabled = true,
+		lastClickedIdForRange = $bindable(undefined),
+		totalItemsCount = 0,
+		stickyHeader = false,
+		responsive = false,
+		size = 'sm',
+		striped = true,
+		tree = false,
+		bordered = true,
+		hover = true,
+		previousSortColumn = $bindable(undefined),
+		previousSortDirection = $bindable(undefined),
+		parentClass = '',
+		parentStyle = '',
+		hideButtonClass = '',
+		columnResizingEnabled = false,
+		columnPinningEnabled = false,
+		localStorageKey = undefined,
+		columnClickedMethod = defaultColumnClicked,
+		filterMethod = defaultFilter,
+		rowMatchesFilterMethod = defaultRowMatchesFilter,
+		filteredRows = $bindable(filterMethod('', rows, columns)),
+		sortedRows = $bindable(filteredRows),
+		currentPageRows = $bindable(sortedRows.slice(0, perPageCount)),
+		// snippets
+		header,
+		body,
+		children,
+		noRows,
+		footerRow,
+		// callbacks
+		pageChange,
+		columnResizeEnd,
+		...rest
+	}: Props = $props()
+
+	let lastPageNumber: number = $state(1)
+	let paginationComponent: Pagination<IndexedRow> | undefined = $state()
+	let contextMenu: ContextMenu | undefined = $state()
+	let contextMenuColumn: Column | undefined = $state()
+	let columnResizingIsActive: boolean = $state(false)
+	/** Set to true after getting initial table widths when resizing enabled*/
+	let useFixedLayout = $state(false)
+	let tableParent: HTMLDivElement | undefined = $state()
+
+	// Do the initial sort if they specified a default sort column
+	// svelte-ignore state_referenced_locally
+	const defaultSortColumn = columns.find(column => column.defaultSortColumn)
+	if (defaultSortColumn) {
+		sortColumn = defaultSortColumn
+		sortDirection = defaultSortColumn.defaultSortDirection || 'ASC'
+
+		doSort({
+			rows: filteredRows,
+			sortColumn,
+			sortDirection,
+			sameSortOrder: false,
+		})
+	}
+
+	// Need to track which rows are expanded so when the rows reorder, they correctly keep that state.
+	const expandedRows = writable<Record<number | string, boolean>>({})
+	// svelte-ignore state_referenced_locally
+	if (tree) {
+		setContext('expandedRows', expandedRows)
+	}
+
+	// TODO: bad things will happen if we update any of our apps to use Runes for the store if we don't account for that here
+	const session = getContext<Writable<{ userAccountId?: number }> | undefined>('session')
+	// This will be accessible on the component instance, ie `const columnInfo = $derived(table?.columnInfo)` if you need it
+	export const columnInfo = new ColumnInfoRunicStore<R>(() => columns, {
+		// eslint-disable-next-line svelte/no-unused-svelte-ignore
+		// svelte-ignore state_referenced_locally
+		key: localStorageKey,
+		userAccountId: session && $session ? $session.userAccountId : undefined,
+	})
+	// Set as context so we can retrieve it in the Td component
+	setContext('columnInfo', columnInfo)
+	// Set as context so we can retrieve it in the TreeRow component
+	const selectedRowIdsStore = writable(selectedRowIds)
+	setContext('selectedRowIds', selectedRowIdsStore)
+	// svelte-ignore state_referenced_locally
+	setContext('idProp', idProp)
+	// svelte-ignore state_referenced_locally
+	setContext('columnResizingEnabled', writable(columnResizingEnabled))
+	setContext('bs5', bs5)
+
+	// #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)
+		}
+
+		doSort({
+			rows: filteredRows,
+			sortColumn: clickedColumn,
+			sortDirection,
+			sameSortOrder: false,
+		})
+	}
+
+	function defaultFilter(filter: string, rows: Array<R>, columns: Array<Column>): Array<IndexedRow> {
+		const columnProps = columns
+			?.map(({ property }) => property)
+			.filter((property): property is KeyPath => !isArbitraryProperty(property))
+
+		if (filterEnabled) {
+			const props = filterProps || columnProps
+			return getFilterMatches(filter, rows, props)
+		}
+
+		return rows.map((row, index): IndexedRow => ({ ...row, originalIndex: index, uuid: row.uuid || uuid() }))
+	}
+
+	/** In normal mode, returns all rows matching the filter.
+	 *
+	 * In tree mode, shows all children if parent matches, or shows matching children and their children
+	 */
+	function getFilterMatches(filter: string, theRows: Array<R>, props: Array<KeyPath>) {
+		return theRows.reduce((rows, row, index): Array<IndexedRow> => {
+			if (rowMatchesFilterMethod(filter, row, props)) {
+				rows.push({ ...row, originalIndex: index, uuid: 'uuid' in row ? (row.uuid as string) : uuid() })
+			} else if (tree && Array.isArray(row.children) && row.children.length) {
+				const children = getFilterMatches(filter, row.children, props)
+				if (children.length) {
+					rows.push({ ...row, children, originalIndex: index, uuid: 'uuid' in row ? (row.uuid as string) : uuid() })
+				}
+			}
+
+			return rows
+		}, new Array<IndexedRow>())
+	}
+
+	export function defaultRowMatchesFilter(filter: string, row: R, props: Array<RowProperties<R>>) {
+		return (
+			!filter ||
+			props.some(prop => {
+				const value = getNestedProperty(row, prop)
+				if (typeof value === 'string' || typeof value === 'number') {
+					return value.toString().toUpperCase().indexOf(filter.toUpperCase()) > -1
+				}
+				return false
+			})
+		)
+	}
+
+	export function getNestedProperty<Row extends R, K extends RowProperties<Row>>(
+		row: Row,
+		path: K,
+		defaultValue?: string | number,
+	): Get<Row, K> {
+		if (!path) {
+			return defaultValue as Get<Row, K>
+		}
+
+		if (row[path]) {
+			return row[path] as Get<Row, K>
+		}
+
+		const val =
+			path
+				.split('[')
+				// TODO figure out if we can do this less evilly
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				.reduce((obj, prop) => (obj as any)?.[prop.replace(/\]/g, '')], row as any) ?? defaultValue
+		return val
+	}
+
+	async function columnClickHandler(clickedColumn: Column) {
+		if (clickedColumn.sortType === false || columnResizingIsActive || isArbitraryProperty(clickedColumn.property)) {
+			return
+		}
+		sortDirection = sortDirection === 'ASC' && clickedColumn.property === sortColumn?.property ? 'DESC' : 'ASC'
+
+		columnClickedMethod(clickedColumn, sortDirection)
+
+		sortColumn = clickedColumn
+		await tick()
+	}
+
+	export function expandRow(rowId: string | number, expanded = true) {
+		if (tree) {
+			$expandedRows[rowId] = expanded
+		} else {
+			console.warn('expandRow should only be used when the `tree` prop is set to true on the Table component.')
+		}
+	}
+
+	export function rowIsSelected(
+		row: IndexedRow,
+		rowSelectionIdProp: RowProperties<IndexedRow>,
+		selectedRowIds: Array<GetIndexedRowProperty>,
+	) {
+		const selectionId = getNestedProperty(row, rowSelectionIdProp, row.uuid)
+		return selectedRowIds.includes(selectionId)
+	}
+
+	export function rowClick(row: IndexedRow) {
+		if (!selectionEnabled || !rowSelectionIdProp) {
+			return
+		}
+		const clickedId = getNestedProperty(row, rowSelectionIdProp)
+
+		const selectedIds = selectedRowIds
+
+		let newSelectedIds: Array<GetIndexedRowProperty> = []
+
+		if (!selectionMode && !rowSelectionRequiresModKey) {
+			selectionMode = 'SINGLE'
+		}
+
+		if (selectionMode === 'SINGLE') {
+			newSelectedIds = selectedIds
+			const foundInExistingSelections = selectedIds.some(id => id === clickedId)
+
+			if (foundInExistingSelections) {
+				newSelectedIds = newSelectedIds.filter(id => id !== clickedId)
+			} else if (multiSelectEnabled) {
+				newSelectedIds = newSelectedIds.concat(clickedId)
+			} else {
+				newSelectedIds = [clickedId]
+			}
+		} else if (selectionMode === 'RANGE') {
+			if (selectedIds.length < 1) {
+				newSelectedIds = [clickedId]
+			} else {
+				newSelectedIds = selectedIds
+				const clickedItemIndex = sortedRows.findIndex(item => {
+					return item[rowSelectionIdProp] === clickedId
+				})
+
+				const lastSelectedIndex = sortedRows.findIndex(item => {
+					return item[rowSelectionIdProp] === lastClickedIdForRange
+				})
+
+				let selectionDirection: 'UP' | 'DOWN' | undefined
+
+				if (lastSelectedIndex > clickedItemIndex) {
+					selectionDirection = 'UP'
+				} else if (lastSelectedIndex < clickedItemIndex) {
+					selectionDirection = 'DOWN'
+				}
+
+				if (selectionDirection) {
+					sortedRows.forEach((item, index) => {
+						const id = getNestedProperty(item, rowSelectionIdProp)
+						if (selectionDirection === 'UP' && index <= lastSelectedIndex && index >= clickedItemIndex) {
+							newSelectedIds = newSelectedIds.concat(id)
+						} else if (selectionDirection === 'DOWN' && index >= lastSelectedIndex && index <= clickedItemIndex) {
+							newSelectedIds = newSelectedIds.concat(id)
+						}
+					})
+				}
+			}
+		} else {
+			return
+		}
+
+		const clickedIdWasAdded = newSelectedIds.find(id => id === clickedId)
+
+		let lastClickedId: GetIndexedRowProperty | undefined
+
+		if (newSelectedIds.length === 0) {
+			lastClickedId = undefined
+		} else if (selectionMode === 'SINGLE' && clickedIdWasAdded) {
+			lastClickedId = clickedId
+		} else {
+			lastClickedId = lastClickedIdForRange
+		}
+
+		selectedRowIds = [...new Set(newSelectedIds)]
+		lastClickedIdForRange = lastClickedId
+	}
+	export function setPageVisibleByItemIndex(index: number) {
+		if (index > -1) {
+			paginationComponent?.setPageVisibleByItemIndex(index)
+		}
+	}
+	export function setPageVisibleByItemId({ id, keyName }: { id: number | string; keyName: K }) {
+		const index = sortedRows.findIndex(item => item[keyName] == id)
+
+		if (index > -1) {
+			paginationComponent?.setPageVisibleByItemIndex(index)
+		}
+	}
+	/**
+	 * Sorts the rows in the table. `rows` should be pre-filtered, and defaults to `filteredRows` if omitted
+	 */
+	export function doSort({
+		rows = filteredRows,
+		sortColumn,
+		sortDirection,
+		sameSortOrder,
+	}: {
+		/** Defaults to `filteredRows` if omitted */
+		rows?: Array<IndexedRow>
+		sortColumn: Column | undefined
+		sortDirection: SortDirection
+		sameSortOrder: boolean
+	}) {
+		const keepSameSortOrder = !!(lazySort && sameSortOrder && idProp)
+		const hasPreviousSort = previousSortColumn && previousSortOrder.length > 0
+
+		let sortProp: KeyPath
+		if (
+			keepSameSortOrder &&
+			hasPreviousSort &&
+			previousSortColumn &&
+			idProp &&
+			!isArbitraryProperty(previousSortColumn.property)
+		) {
+			sortColumn = previousSortColumn
+			sortProp = previousSortColumn.property
+			sortDirection = 'ASC' //force ASC for keeping the same order because we defined the order in previousSortOrder
+
+			rows = rows.map(row => {
+				const foundItem = previousSortOrder.find(
+					previousSortOrderRow => !!idProp && previousSortOrderRow[idProp] === row[idProp],
+				)
+
+				return { ...row, order: foundItem ? foundItem.order : 0 }
+			})
+		} else if (sortColumn?.property && !isArbitraryProperty(sortColumn.property)) {
+			sortProp = sortColumn.property
+		} else {
+			// no sort property, can't sort
+			sortedRows = rows
+			return
+		}
+
+		function doTheSort(theRows: Array<IndexedRow>): Array<IndexedRow> {
+			if (tree) {
+				return theRows
+					.slice()
+					.map(row => {
+						if (Array.isArray(row.children)) {
+							return {
+								...row,
+								children: doTheSort(row.children),
+							}
+						}
+						return row
+					})
+					.sort((a: IndexedRow, b: IndexedRow) =>
+						sortColumn?.sortType === 'ALPHA_NUM' ? alphaNumSort(a, b) : standardSort(a, b),
+					)
+			}
+			return theRows.slice().sort(sortColumn?.sortType === 'ALPHA_NUM' ? alphaNumSort : standardSort)
+		}
+
+		const theSortedRows = doTheSort(rows)
+
+		previousSortOrder = theSortedRows.map((row, index) => ({
+			...row,
+			order: index,
+		}))
+		previousSortDirection = sortDirection
+		previousSortColumn = sortColumn
+		sortedRows = theSortedRows
+
+		function standardSort(a: R, b: R) {
+			let aValue: Get<R, KeyPath> | string = getNestedProperty(a, sortProp, '')
+			let bValue: Get<R, KeyPath> | string = getNestedProperty(b, sortProp, '')
+
+			if (typeof aValue === 'string') {
+				aValue = aValue.toUpperCase()
+			}
+			if (typeof bValue === 'string') {
+				bValue = bValue.toUpperCase()
+			}
+
+			if (aValue < bValue) {
+				return sortDirection === 'ASC' ? -1 : 1
+			}
+			if (aValue > bValue) {
+				return sortDirection === 'ASC' ? 1 : -1
+			}
+
+			return 0
+		}
+
+		function alphaNumSort(a: R, b: R) {
+			const aValue = getNestedProperty(a, sortProp, '')
+			const bValue = getNestedProperty(b, sortProp, '')
+			let compareResults = 0
+			if (
+				(typeof aValue === 'number' || typeof aValue === 'string') &&
+				(typeof bValue === 'number' || typeof bValue === 'string')
+			) {
+				compareResults = naturalCompare(aValue.toString(), bValue.toString())
+			} else if (typeof aValue === 'number' || typeof aValue === 'string') {
+				compareResults = 1
+			} else if (typeof bValue === 'number' || typeof bValue === 'string') {
+				compareResults = -1
+			}
+
+			return sortDirection === 'ASC' ? compareResults : compareResults * -1
+		}
+	}
+
+	export function setColumnVisibility(columnProperties: Array<ColumnProperty> | ColumnProperty, visible: boolean) {
+		if (!Array.isArray(columnProperties)) {
+			columnProperties = [columnProperties]
+		}
+
+		try {
+			untrack(() => {
+				columnInfo.updateColumns(
+					columnProperties.map((property): { property: ColumnProperty; visible: boolean } => ({
+						property,
+						visible,
+					})),
+				)
+			})
+		} catch (err) {
+			console.error(`Error setting column visibility for columns ${JSON.stringify(columnProperties)}`, err)
+		}
+	}
+
+	/** 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<ColumnProperty> | ColumnProperty,
+		getVisible: () => boolean,
+	) {
+		$effect(() => {
+			const visible = getVisible()
+			setColumnVisibility(columnProperties, visible)
+		})
+	}
+
+	function hideColumn(column: Column) {
+		if (column) {
+			columnInfo.updateColumn(column.property, { visible: false })
+		}
+		contextMenuColumn = undefined
+	}
+
+	function showColumn(column: Column) {
+		if (column) {
+			columnInfo.updateColumn(column.property, { visible: true })
+		}
+		contextMenuColumn = undefined
+	}
+
+	function pinUnpinColumn(column: Column) {
+		columnInfo.updateColumn(column.property, { pinned: !column.pinned })
+	}
+
+	function contextMenuHandler(event: MouseEvent, column: string) {
+		if ((columnHidingEnabled || columnResizingEnabled || columnPinningEnabled) && !event.ctrlKey) {
+			event.preventDefault()
+			contextMenuColumn = columnInfo.current[column]
+			return contextMenu?.open(event, `col-${tableId}-${CSS.escape(column)}`)
+		}
+		return Promise.resolve()
+	}
+	// #endregion
+	// #region Tree-specific functions
+
+	// #endregion
+
+	function onColumnMouseDown(event: MouseEvent, column: Column) {
+		event.stopPropagation()
+		if (!event.target || !(event.target instanceof HTMLDivElement)) {
+			return
+		}
+
+		const htmlColumn = tableParent?.querySelector<HTMLTableCellElement>(
+			`#col-${tableId}-${CSS.escape(column.property)}`,
+		)
+		const columnIndex = columns.findIndex(col => col.property === column.property)
+		if (!htmlColumn || columnIndex === -1) {
+			return
+		}
+
+		const mouseDownPageX = event.pageX
+		const mouseDownColumnWidth = htmlColumn.offsetWidth
+
+		event.target.classList.add('resizing')
+		columnResizingIsActive = true
+
+		const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
+			const widthDifference = mouseMoveEvent.pageX - mouseDownPageX
+			const newWidth = `${mouseDownColumnWidth + widthDifference}px`
+			htmlColumn.style.width = column.minWidth ? `max(${newWidth}, ${column.minWidth})` : newWidth
+		}
+
+		const mouseUpHandler = () => {
+			if (!(event.target instanceof HTMLDivElement)) {
+				return
+			}
+			event.target.classList.remove('resizing')
+			columnInfo.updateColumn(column.property, { userWidth: htmlColumn.style.width })
+
+			removeMouseMoveListener?.()
+			removeMouseUpListener?.()
+			columnResizeEnd?.({ column: columns[columnIndex] })
+			// We want to ensure the user's mouseup event doesn't trigger a click event on the column header
+			setTimeout(() => (columnResizingIsActive = false), 50)
+		}
+
+		const removeMouseMoveListener = tableParent ? on(tableParent, 'mousemove', mouseMoveHandler) : undefined
+		const removeMouseUpListener = tableParent ? on(tableParent, 'mouseup', mouseUpHandler) : undefined
+	}
+
+	async function setDefaultColumnWidths() {
+		useFixedLayout = false
+		await tick()
+		if (columnResizingEnabled) {
+			columnInfo.updateColumns(
+				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
+					const explicitWidth = thisColumnInfo?.width
+
+					return {
+						property: column.property,
+						userWidth: prevUserWidth ?? explicitWidth ?? getColumnThWidth(column.property),
+					}
+				}),
+			)
+			useFixedLayout = true
+		}
+	}
+
+	function getColumnThWidth(property: string) {
+		const thWidth =
+			tableParent?.querySelector<HTMLTableCellElement>(`#col-${tableId}-${CSS.escape(property)}`)?.offsetWidth ?? 25
+		return `${thWidth}px`
+	}
+	// #region Computed
+	$effect(() => {
+		selectedRowIdsStore.set(selectedRowIds)
+	})
+
+	$effect(() => {
+		filteredRows = filterMethod(filter, rows, columns)
+		// Should only run when filter/rows/columns changes since everything else is untracked
+		untrack(() =>
+			doSort({
+				rows: filteredRows && Array.isArray(filteredRows) ? filteredRows : [],
+				sortColumn,
+				sortDirection,
+				sameSortOrder: true,
+			}),
+		)
+	})
+
+	const responsiveClass = $derived(
+		responsive === true ? 'table-responsive' : responsive ? `table-responsive-${responsive}` : '',
+	)
+	/** Includes information computed by the columnInfo store, including what we serialize to localstorage */
+	const computedColumns: Array<ColumnInfo<R>> = $derived(columnInfo.columns)
+	const visibleColumns: Array<ColumnInfo<R>> = $derived(
+		computedColumns.filter(column => column.unhidable || column.visible),
+	)
+	const hiddenColumns: Array<ColumnInfo<R>> = $derived(
+		computedColumns.filter(column => !column.unhidable && !column.visible),
+	)
+	const showPagination = $derived((perPageCount && rows.length > perPageCount) || totalItemsCount > perPageCount)
+
+	const footers = $derived(
+		columns.map(column => {
+			if (column.footer && showFooter) {
+				const property = column.footer.altProperty ? column.footer.altProperty : column.property
+				const mathFunctions = ['AVG', 'SUM']
+
+				let columnValues: Array<number | GetRowProperty> = rows.map(row => {
+					const value = isArbitraryProperty(property)
+						? ('' as Get<R, RowProperties<R>>)
+						: getNestedProperty(row, property)
+					if (
+						column.footer?.fn &&
+						typeof column.footer.fn === 'string' &&
+						mathFunctions.includes(column.footer.fn) &&
+						typeof value === 'string'
+					) {
+						return parseFloat(value) || 0
+					}
+					return value
+				})
+
+				if (column.footer.requiredValue) {
+					columnValues = columnValues.filter(value => value === column.footer?.requiredValue)
+				}
+
+				let value: FooterReducerValue<R>
+
+				function sum(sum: number, val: unknown): number {
+					if (typeof val === 'number') {
+						return sum + val
+					}
+
+					if (typeof val === 'string') {
+						const parsedVal = parseFloat(val)
+						if (isNaN(parsedVal)) {
+							return sum
+						}
+						return sum + parsedVal
+					}
+
+					return sum
+				}
+
+				switch (column.footer.fn) {
+					case 'COUNT':
+						value = columnValues.length
+						break
+					case 'AVG':
+						value = (columnValues.reduce(sum, 0) / columnValues.length).toFixed(2)
+						break
+					case 'SUM':
+						value = columnValues.reduce(sum, 0)
+						break
+					default:
+						if (typeof column.footer.fn === 'function') {
+							value = columnValues.reduce(column.footer.fn, column.footer.initialValue)
+						} else {
+							value = ''
+						}
+						break
+				}
+
+				return {
+					property: column.property,
+					value:
+						column.footer.formatCurrency && (typeof value === 'string' || typeof value === 'number')
+							? formatCurrency(value)
+							: value,
+				}
+			}
+			return {
+				property: column.property,
+				value: '',
+			}
+		}),
+	)
+	//#endregion
+	onMount(() => {
+		setDefaultColumnWidths()
+	})
+</script>
+
+{#if filterEnabled}
+	<div class={headerRowClass}>
+		<div class={headerColumnClass}>
+			{@render header?.()}
+		</div>
+		<div class={filterColumnClass}>
+			<Input
+				label={filterLabel}
+				showLabel={showFilterLabel}
+				bind:value={filter}
+				placeholder={filterPlaceholder}
+				disabled={filterDisabled}
+				readonly={filterReadonly || null}
+				lazy={filterLazy}
+			/>
+			<!-- || null is so svelte doesn't include readonly when it's falsy, probably a result of it being `restProps`'d on the input -->
+		</div>
+	</div>
+{/if}
+
+<!-- webkit-user-select: none; here fixes an issue in Safari where text selection of the column headers would happen while resizing the columns -->
+<div
+	class={[parentClass, responsiveClass]}
+	style={parentStyle}
+	class:mb-3={showPagination}
+	style:user-select={columnResizingIsActive ? 'none' : undefined}
+	style:-webkit-user-select={columnResizingIsActive ? 'none' : undefined}
+	style:cursor={columnResizingIsActive ? 'col-resize' : undefined}
+	bind:this={tableParent}
+>
+	<table
+		id={tableId}
+		class={['table mb-0', tableClass]}
+		class:table-sm={size === 'sm'}
+		class:table-xs={size === 'xs'}
+		class:table-layout-fixed={columnResizingEnabled && useFixedLayout}
+		class:sticky={stickyHeader}
+		class:table-striped={striped}
+		class:table-bordered={bordered}
+		class:table-hover={hover}
+		{...rest}
+	>
+		<thead>
+			<tr>
+				{#each visibleColumns as column, index (column.property)}
+					{@const isSortColumn = sortColumn?.property === column.property}
+					{@const doEllipsis = column.ellipsis || columnResizingEnabled}
+
+					<th
+						id="col-{tableId}-{column.property}"
+						class={[
+							'unselectable',
+							column.class,
+							{
+								'cursor-pointer': column.sortType !== false && !isArbitraryProperty(column.property),
+								'd-print-none': column.hideForPrint,
+								'text-left': !bs5 && column.align === 'left',
+								'text-start': column.align === 'start' || (bs5 && column.align === 'left'),
+								'text-right': !bs5 && (column.align === 'right' || column.numeric),
+								'text-end': column.align === 'end' || (bs5 && (column.align === 'right' || column.numeric)),
+								'text-center': column.align === 'center',
+								'text-truncate': doEllipsis,
+								'bg-white': !bs5 && stickyHeader,
+								'table-secondary': column.pinned,
+								'text-nowrap': !column.wrap,
+								pinned: column.pinned,
+							},
+						]}
+						title={column.title ?? column.name}
+						style:width={column.userWidth ?? column.width}
+						style:min-width={column.minWidth}
+						style:--pinned-column-offset={column.pinned ? columnInfo.getPinnedColumnOffset(column.property) : undefined}
+						data-sort-specified={isSortColumn ? sortDirection : ''}
+						onclick={() => columnClickHandler(column)}
+						oncontextmenu={event => contextMenuHandler(event, column.property)}
+					>
+						<span
+							class="text-truncate d-inline-block"
+							style="vertical-align: bottom;"
+							style:max-width={doEllipsis && isSortColumn ? 'calc(100% - 20px)' : '100%'}
+						>
+							{@render columnNameAndIcon(column)}
+						</span>
+						<!-- I wonder how to make everything after this move to the right...? -->
+						{#if isSortColumn}
+							{sortDirection === 'ASC' ? '▲' : '▼'}
+						{/if}
+						{#if column.pinned}
+							<Icon
+								class=""
+								icon="thumbtack-angle"
+							/>
+						{/if}
+						{#if columnResizingEnabled && visibleColumns.length - 1 !== index}
+							<!-- I think setting the role and aria-orientation attributes is the best we can do here -->
+							<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+							<div
+								id="col-resizer-{tableId}-{column.property}"
+								tabindex={0}
+								role="separator"
+								aria-orientation="horizontal"
+								class="resizer"
+								style="height: 100%;"
+								onmousedown={e => onColumnMouseDown(e, column)}
+							>
+								&nbsp;
+							</div>
+						{/if}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody class:unselectable={selectionMode === 'RANGE'}>
+			{#snippet tableRow(row: IndexedRow, index: number)}
+				{#if children}
+					{@render children({ row, index })}
+				{:else}
+					<tr
+						class:table-primary={rowIsSelected(row, rowSelectionIdProp, selectedRowIds)}
+						onclick={() => rowClick(row)}
+					>
+						{#each computedColumns as column (column.property)}
+							<Td
+								align={column.align}
+								property={column.property}
+							>
+								{isArbitraryProperty(column.property)
+									? ''
+									: column.formatter
+										? column.formatter(getNestedProperty<R, KeyPath>(row, column.property, ''))
+										: getNestedProperty<R, KeyPath>(row, column.property, '')}
+							</Td>
+						{/each}
+					</tr>
+				{/if}
+			{/snippet}
+			{#if body}
+				{@render body?.({ rows: currentPageRows, visibleColumnsCount: visibleColumns.length })}
+			{:else if !currentPageRows.length}
+				{@render noRows?.({ visibleColumnsCount: visibleColumns.length })}
+				<!--
+					Only key the #each if the idProp is in the original row.
+					Otherwise, the table will re-render all rows if idProp is 'uuid' and your original row doesn't have one
+				-->
+			{:else if idProp in (rows[currentPageRows[0]?.originalIndex] ?? {})}
+				{#each currentPageRows as row, index (row[idProp])}
+					{@render tableRow(row, index)}
+				{/each}
+			{:else}
+				<!-- eslint-disable-next-line svelte/require-each-key -->
+				{#each currentPageRows as row, index}
+					{@render tableRow(row, index)}
+				{/each}
+			{/if}
+		</tbody>
+		{#if showFooter && footers}
+			<tfoot class="font-weight-bold fw-bold">
+				<tr class="table-secondary">
+					{#if footerRow}
+						{@render footerRow({ footers })}
+					{:else}
+						{#each footers as { property, value } (property)}
+							<Td
+								{property}
+								tagName="th">{value ?? ''}</Td
+							>
+						{/each}
+					{/if}
+				</tr>
+			</tfoot>
+		{/if}
+	</table>
+</div>
+
+<Pagination
+	{perPageCount}
+	{totalItemsCount}
+	items={sortedRows}
+	bind:currentPageItems={() => untrack(() => currentPageRows), items => (currentPageRows = items)}
+	bind:currentPageNumber
+	bind:lastPageNumber
+	{pageChange}
+	bind:this={paginationComponent}
+/>
+
+<ContextMenu
+	id="hide-column-context-menu"
+	bind:this={contextMenu}
+>
+	{#if columnPinningEnabled}
+		{@const isPinned = !!contextMenuColumn?.pinned}
+		<DropdownItem
+			icon={isPinned ? 'thumbtack-angle-slash' : 'thumbtack-angle'}
+			title={isPinned
+				? translate('common:tableUnpinColumnTitle', 'Unpinning this column will make it scroll normally')
+				: translate(
+						'common:tablePinColumnTitle',
+						'Pinning this column will keep it visible as you scroll to the right',
+					)}
+			onclick={() => {
+				if (contextMenuColumn) {
+					pinUnpinColumn(contextMenuColumn)
+				}
+			}}
+			>{#if contextMenuColumn?.name}
+				{isPinned
+					? translate('common:tableUnpinColumnName', 'Unpin {{name}}', { name: contextMenuColumn.name })
+					: translate('common:tablePinColumnName', 'Pin {{name}}', { name: contextMenuColumn.name })}
+			{:else}
+				{isPinned ? translate('common:tableUnpinColumn', 'Unpin') : translate('common:tablePinColumn', 'Pin')}
+				{#if contextMenuColumn?.icon}
+					<Icon icon={contextMenuColumn.icon}></Icon>
+				{/if}
+			{/if}
+		</DropdownItem>
+
+		{#if columnHidingEnabled || columnResizingEnabled}
+			<div class="dropdown-divider"></div>
+		{/if}
+	{/if}
+
+	{#if columnHidingEnabled}
+		<DropdownItem
+			class={hideButtonClass}
+			disabled={contextMenuColumn?.unhidable}
+			onclick={() => contextMenuColumn && hideColumn(contextMenuColumn)}
+		>
+			<Icon icon="eye-slash"></Icon>
+			{#if contextMenuColumn?.name}
+				{translate('common:tableHideColumn', 'Hide {{- columnName}}', { columnName: contextMenuColumn.name })}
+			{:else if contextMenuColumn?.icon}
+				{translate('common:hide', 'Hide')}
+
+				<Icon
+					prefix={contextMenuColumn.iconPrefix}
+					icon={contextMenuColumn.icon}
+				></Icon>
+			{/if}
+		</DropdownItem>
+
+		{#if hiddenColumns.length > 0}
+			<div class="dropdown-divider"></div>
+			<h5 class="dropdown-header">
+				<Icon icon="eye"></Icon>
+				{translate('common:tableShowColumns', 'Show Column')}
+			</h5>
+		{/if}
+		<div style="max-height: 300px; overflow-y: auto;">
+			{#each hiddenColumns as hiddenColumn (hiddenColumn.property)}
+				<DropdownItem onclick={() => showColumn(hiddenColumn)}>
+					{@render columnNameAndIcon(hiddenColumn)}
+				</DropdownItem>
+			{/each}
+		</div>
+
+		{#if columnResizingEnabled}
+			<div class="dropdown-divider"></div>
+		{/if}
+	{/if}
+
+	{#if columnResizingEnabled}
+		<DropdownItem
+			icon="broom"
+			onclick={() => {
+				columnInfo.updateColumns(
+					computedColumns.map(col => ({
+						property: col.property,
+						userWidth: undefined,
+					})),
+				)
+				setDefaultColumnWidths()
+			}}>{translate('common:tableResetColumnSizes', 'Reset Column Sizes')}</DropdownItem
+		>
+	{/if}
+</ContextMenu>
+
+{#snippet columnNameAndIcon(column: Pick<GenericColumn, 'icon' | 'iconLeft' | 'iconPrefix' | 'name'>)}
+	<!-- Don't add any whitespace btwn these if blocks to keep the spaces correct -->
+	{#if column.icon && column.iconLeft}
+		<Icon
+			prefix={column.iconPrefix}
+			icon={column.icon}
+		/>{#if column.name}&nbsp;{/if}
+	{/if}{column.name}{#if column.icon && !column.iconLeft}
+		{#if column.name}&nbsp;{/if}<Icon
+			prefix={column.iconPrefix}
+			icon={column.icon}
+		/>
+	{/if}
+{/snippet}
+
+<style>
+	table.sticky {
+		position: relative;
+	}
+
+	table.sticky th {
+		position: sticky;
+		top: 0;
+		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
+	}
+
+	table.sticky > thead > tr > th {
+		z-index: 3;
+	}
+
+	/* Remove bottom margins created by form-groups in the table (BS4 only) */
+	table > tbody :global(.form-group) {
+		margin-bottom: 0%;
+	}
+
+	/* BS5 removed .form-group, which makes it a little trickier to target the label's parent div, but this should do it
+		- The Label component adds mb-3 to the parent div if the label is hidden or mb-1 if it's shown (unlikely if it's in a table)
+		- That div will have a .input-group, .form-control, or .form-select as a direct descendant
+	*/
+	table
+		> tbody
+		:global(
+			td div:where(.mb-3, .mb-1):not(.form-group):has(> :where(.input-group, .form-control, .form-select, .btn-group))
+		) {
+		margin-bottom: 0% !important;
+	}
+
+	.resizer {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 10px;
+		cursor: col-resize;
+		user-select: none;
+	}
+	.resizer:hover,
+	.resizing {
+		border-right: 5px solid darkslategray;
+	}
+	.table-layout-fixed {
+		table-layout: fixed;
+	}
+
+	th.pinned {
+		position: sticky;
+		z-index: 11 !important;
+		left: var(--pinned-column-offset, -1);
+	}
+
+	.cursor-pointer {
+		cursor: pointer;
+	}
+
+	table.table-xs {
+		--xs-padding: 0.125rem;
+	}
+
+	/* Copied from table-sm - reduce td padding */
+	* :global(.table-xs > :not(caption) > * > *) {
+		padding: var(--xs-padding) var(--xs-padding) !important;
+	}
+
+	/* Reduce form control padding. */
+	* :global(.table-xs :where(input, select, textarea)) {
+		padding: var(--xs-padding) 0.25rem !important;
+		/* Bootstrap sets a min width on form controls; Undo that so the lower padding works */
+		min-height: 0px;
+	}
+</style>