Sorting

			<script lang="ts">
	import { reactiveTable, reactiveSorting } from 'svelte-reactive-table';

	const data = [
		/* Your data array */
	];
	const columns = [
		/* Your column definitions */
	];

	// Create table instance with sorting plugin
	const table = reactiveTable(data, columns).use(
		reactiveSorting({
			// Optional: Initial column sorting state
			columnSortings: [{ key: 'name', direction: 'asc' }],
			// Optional: Enable multi-column sorting
			multiSort: false,
			// Optional: Custom comparator functions for specific columns
			comparators: {
				// Custom sorting for date columns
				createdAt: (a, b) => new Date(a).getTime() - new Date(b).getTime()
			}
		})
	);

	// Access sorting controls through plugins
	const { sorting } = table.plugins;
</script>
		

			<tbody>
	{#each table.rows as row}
		<tr>
			{#each row.cells as cell}
				<td>{cell.value}</td>
			{/each}
		</tr>
	{/each}
</tbody>
		

			<script>
	// Toggle sort direction for a column (asc → desc → none)
	function toggleSort(columnKey) {
		sorting.toggleSort(columnKey);
	}

	// Clear all sorting
	function clearSort() {
		sorting.clearSort();
	}

	// Get current sort direction for a column
	function getSortDirection(columnKey) {
		return sorting.getSortDirection(columnKey); // Returns 'asc', 'desc', or 'none'
	}
</script>
		

			<thead>
	<tr>
		{#each table.columns as column}
			<th click={() => sorting.toggleSort(column.accessor)}>
				{column.header}
				{#if sorting.getSortDirection(column.accessor) !== 'none'}
					{sorting.getSortDirection(column.accessor) === 'asc' ? '↑' : '↓'}
				{/if}
			</th>
		{/each}
	</tr>
</thead>
		

			const table = reactiveTable(data, columns)
	.use(reactiveSorting({
		multiSort: true
	}));
		

			const table = reactiveTable(data, columns)
	.use(reactiveSorting({
		comparators: {
			// Case-insensitive string comparison
			name: (a, b) => a.toLowerCase().localeCompare(b.toLowerCase()),

			// Date comparison (assuming ISO strings)
			createdAt: (a, b) => new Date(a).getTime() - new Date(b).getTime(),

			// Custom numeric sorting with null handling
			price: (a, b) => {
				if (a === null) return -1;
				if (b === null) return 1;
				return a - b;
			}
		}
	}));