svelte-tably 1.0.0-next.10 → 1.0.0-next.11

package/README.md

@@ -16,7 +16,7 @@ A high performant dynamic table
 - [x] Virtual elements
 - [x] sorting
 - [x] select
-- [ ] filtering
+- [x] filtering
 - [ ] orderable table
 - [ ] row context-menu
 - [ ] dropout section

package/dist/Column.svelte

@@ -80,6 +80,12 @@
 		*/
 		resizeable?: boolean
 
+		/**
+		 * 
+		 * @example (value) => value.includes(search)
+		*/
+		filter?: (value: V) => boolean
+
 		/**
 		 * Optional: Provide the table it is a part of
 		*/
@@ -93,6 +99,7 @@
 		statusbar?: C['statusbar']
 
 		fixed?: boolean
+		filter?: C['filter']
 
 		/** Default options for initial table */
 		defaults: {
@@ -133,6 +140,8 @@
 		value,
 		sort,
 
+		filter,
+
 		table
 	}: ColumnProps<T, V> = $props()
 
@@ -142,6 +151,7 @@
 		row,
 		statusbar,
 		fixed,
+		filter,
 		defaults: {
 			sticky,
 			sort: sortby,

package/dist/Column.svelte.d.ts

@@ -62,6 +62,11 @@ export interface ColumnProps<T, V> {
      * @default true
     */
     resizeable?: boolean;
+    /**
+     *
+     * @example (value) => value.includes(search)
+    */
+    filter?: (value: V) => boolean;
     /**
      * Optional: Provide the table it is a part of
     */
@@ -73,6 +78,7 @@ export interface ColumnState<T = unknown, V = unknown, C extends ColumnProps<T,
     row: C['row'];
     statusbar?: C['statusbar'];
     fixed?: boolean;
+    filter?: C['filter'];
     /** Default options for initial table */
     defaults: {
         sticky?: boolean;

package/dist/Table.svelte

@@ -60,6 +60,7 @@
 	import { fly } from 'svelte/transition'
 	import { sineInOut } from 'svelte/easing'
 	import { on } from 'svelte/events'
+	import { Trigger } from './trigger.svelte.js'
 
 	type T = $$Generic<Record<PropertyKey, unknown>>
 
@@ -89,6 +90,8 @@
 		 */
 		resizeable?: boolean
 
+		filters?: ((item: T) => boolean)[]
+
 		selected?: T[]
 		select?:
 			| boolean
@@ -151,20 +154,35 @@
 		id = Array.from({ length: 12 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join(''),
 		href,
 		resizeable = true,
-		select
+		select,
+		filters: _filters = []
 	}: Props = $props()
 
 	let mounted = $state(false)
 	onMount(() => (mounted = true))
 
-	const data = $derived([..._data])
+	let cols: TableState<T>['columns'] = $state({})
+
+	let sortedData = $state([]) as T[]
+	let data = $state([]) as T[]
+	$effect(() => {
+		const filters = [..._filters] as ((item: T) => boolean)[]
+		for(const key in cols) {
+			const filter = table.columns[key].filter
+			const valueOf = table.columns[key].options.value
+			if(filter && valueOf) {
+				filters.push((item) => filter(valueOf(item)))
+			}
+		}
+
+		data = filters.length === 0 ? [...sortedData] : sortedData.filter((value) => filters.every((filter) => filter(value)))
+	})
 
 	const elements = $state({}) as Record<
 		'headers' | 'statusbar' | 'rows' | 'virtualTop' | 'virtualBottom' | 'selects',
 		HTMLElement
 	>
-
-	let cols: TableState<T>['columns'] = $state({})
+	
 	let positions: TableState<T>['positions'] = $state({
 		fixed: [],
 		sticky: [],
@@ -226,32 +244,57 @@
 	// #region Virtualization
 	let scrollTop = $state(0)
 	let viewportHeight = $state(0)
-
+	let topIndex = 0
 	let heightPerItem = $state(8)
+	let virtualTop = $state(0)
+	let virtualBottom = $state(0)
+	/** The area of data being rendered */
+	let area = $state([]) as T[]
 
 	const spacing = () => viewportHeight / 2
 
-	let virtualTop = $derived.by(() => {
-		let result = Math.max(scrollTop - spacing(), 0)
-		result -= result % heightPerItem
-		return result
-	})
-	let virtualBottom = $derived.by(() => {
-		let result = heightPerItem * data.length - virtualTop - spacing() * 4
-		result = Math.max(result, 0)
-		return result
+	let renderItemLength = $derived(Math.ceil(Math.max(30, (viewportHeight / heightPerItem) * 2)))
+
+	$effect(() => {
+		data
+		untrack(calculateHeightPerItem)
 	})
 
-	let renderItemLength = $derived(Math.ceil(Math.max(30, (viewportHeight / heightPerItem) * 2)))
+	let waitAnimationFrame = false
 
-	/** The area of data being rendered */
-	let area = $derived.by(() => {
+	$effect(() => {
+		scrollTop
+		heightPerItem
+		data.length
+		data
+		untrack(() => {
+			if(!waitAnimationFrame) {
+				setTimeout(() => {
+					waitAnimationFrame = false
+
+					virtualTop = Math.max(scrollTop - spacing(), 0)
+					virtualTop -= virtualTop % heightPerItem
+					
+					virtualBottom = heightPerItem * data.length - virtualTop - spacing() * 4
+					virtualBottom = Math.max(virtualBottom, 0)
+				}, 1000 / 60)
+			}
+			waitAnimationFrame = true
+		})
+	})
+	
+	$effect(() => {
 		table.sortReverse
 		table.sortby
-		const index = virtualTop / heightPerItem || 0
-		const end = index + renderItemLength
-		const result = data.slice(index, end)
-		return result
+		heightPerItem
+		virtualTop
+		data.length
+		data
+		untrack(() => {
+			topIndex = Math.round(virtualTop / heightPerItem || 0)
+			const end = topIndex + renderItemLength
+			area = data.slice(topIndex, end)
+		})
 	})
 
 	function calculateHeightPerItem() {
@@ -260,22 +303,20 @@
 			return
 		}
 		tick().then(() => {
-			const firstRow = elements.rows.children[0].getBoundingClientRect().top
+			if(elements.rows.children.length === 0) return
+			const firstRow = elements.rows.children[0]?.getBoundingClientRect().top
 			const lastRow =
 				elements.rows.children[elements.rows.children.length - 1].getBoundingClientRect().bottom
 			heightPerItem = (lastRow - firstRow) / area.length
 		})
 	}
 
-	$effect(() => {
-		data
-		untrack(calculateHeightPerItem)
-	})
+	
 	// #endregion
 	// * --- Virtualization --- *
-
 	
-
+	// * --- Sorting --- *
+	// #region sorting
 	function sortBy(column: string) {
 		const { sorting, value } = table.columns[column]!.options
 		if(!sorting || !value) return
@@ -293,26 +334,34 @@
 	}
 
 	function sortTable() {
-		if (!table.sortby) return
+		sortedData = [..._data]
+		if (!table.sortby) {
+			return
+		}
 		const column = table.columns[table.sortby]
 		let { sorting, value } = column.options
-		if(!sorting || !value) return
+		if(!sorting || !value) {
+			return
+		}
 		if(sorting === true) {
 			sorting = (a, b) => String(a).localeCompare(String(b))
 		}
 		if(table.sortReverse) {
-			data.sort((a, b) => sorting(value(b), value(a)))
+			sortedData.sort((a, b) => sorting(value(b), value(a)))
 		} else {
-			data.sort((a, b) => sorting(value(a), value(b)))
+			sortedData.sort((a, b) => sorting(value(a), value(b)))
 		}
 	}
 
 	$effect.pre(() => {
-		data
+		_data
+		_data.length
 		table.sortby
 		table.sortReverse
 		untrack(sortTable)
 	})
+	// #endregion
+	// * --- Sorting --- *
 
 	const panelTween = new PanelTween(() => panel, 24)
 
@@ -523,16 +572,16 @@
 	<tbody class="content" bind:this={elements.rows} onscrollcapture={onscroll} bind:clientHeight={viewportHeight}>
 		{#each area as item, i (item)}
 			{@const props = table.href ? { href: table.href(item) } : {}}
-			{@const index = data.indexOf(item) + 1}
+			{@const index = i + topIndex}
 			<svelte:element
 				this={table.href ? 'a' : 'tr'}
+				aria-rowindex="{index+1}"
 				class="row"
 				class:hover={hoveredRow === item}
 				class:selected={table.selected?.includes(item)}
 				class:first={i === 0}
 				class:last={i === area.length - 1}
 				{...props}
-				aria-rowindex={index}
 				onpointerenter={() => (hoveredRow = item)}
 				onpointerleave={() => (hoveredRow = null)}
 			>
@@ -544,7 +593,7 @@
 							item,
 							{
 								get index() {
-									return index - 1
+									return index
 								},
 								get value() {
 									return col.options.value ? col.options.value(item) : undefined
@@ -556,9 +605,9 @@
 									return table.selected?.includes(item)
 								},
 								set selected(value) {
-									value ?
-										table.selected!.push(item)
-									:	table.selected!.splice(table.selected!.indexOf(item), 1)
+									value 
+										? table.selected!.push(item)
+										: table.selected!.splice(table.selected!.indexOf(item), 1)
 								}
 							}
 						]
@@ -623,7 +672,7 @@
 				<div class="__fixed">
 					{@render headerSnippet({
 						get isSelected() {
-							return table.data.length === table.selected?.length
+							return table.data.length === table.selected?.length && table.data.length > 0
 						},
 						set isSelected(value) {
 							if (value) {

package/dist/Table.svelte.d.ts

@@ -59,6 +59,7 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
          * @default true
          */
         resizeable?: boolean;
+        filters?: ((item: T) => boolean)[] | undefined;
         selected?: T[] | undefined;
         select?: boolean | {
             /**
@@ -85,13 +86,7 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     events(): {};
     slots(): {};
     bindings(): "selected" | "panel";
-    exports(): {
-        selected: T[];
-        positions: TableState<T_1>["positions"];
-        data: T[];
-        href: ((item: T) => string) | undefined;
-        columns: Record<string, ColumnState<T, unknown, ColumnProps<T, unknown>>>;
-    };
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T extends Record<PropertyKey, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.10",
+	"version": "1.0.0-next.11",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {