v0.4.1
GitHub

Sorting Examples

The sorting feature in svelte-reactive-table provides powerful ways to organize your data. This page demonstrates both single-column and multi-column sorting options.

Basic Sorting

This example shows basic sorting functionality with only one sortable column at a time:

  • Click on column headers to sort in ascending/descending order
  • Only one column can be active for sorting at a time
  • Visual indicators show current sort direction
  • Option to clear sorting and return to default order

Click on column headers to sort. Only one column can be sorted at a time.
3Diana Prince5000Themyscira
10Joker40Gotham City
1Bruce Wayne35Gotham City
6Arthur Curry35Atlantis
2Clark Kent33Metropolis
5Hal Jordan32Coast City
8Selina Kyle32Gotham City
4Barry Allen28Central City
9Harley Quinn27Gotham City
7Victor Stone25Jump City

Multi-Column Sorting

This example demonstrates how to enable multi-column sorting, allowing users to sort by multiple criteria simultaneously:

  • Sort by multiple columns with priority given to columns in the order they were selected
  • Hold Shift and click on column headers to add secondary/tertiary sort conditions
  • Each column can be independently toggled between ascending and descending
  • Visual indicators show current sort direction for each column
  • Option to clear all sorting conditions at once
			<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Table from '$lib/components/ui/table';
	import { ArrowDown, ArrowUp, ArrowUpDown, RotateCcw } from '@lucide/svelte';
	import { reactiveSorting, reactiveTable, type ColumnSorting } from 'svelte-reactive-table';
	import { initialData } from '../data';

	// Sorting example with multiSort enabled
	const multiSortTable = reactiveTable(
		initialData,
		[
			{ accessor: 'id', header: 'ID', isIdentifier: true },
			{ accessor: 'name', header: 'Name' },
			{ accessor: 'age', header: 'Age' },
			{ accessor: 'city', header: 'City' }
		],
		{
			sorting: reactiveSorting({
				// Optional: Set initial sorting
				columnSortings: [{ key: 'name', direction: 'asc' }],
				// Enable multi-column sorting
				multiSort: true
			})
		}
	);

	function clearMultiSorting() {
		multiSortTable.sorting.clearSort();
	}

	// Helper function to determine the current sort direction for a column
	function getSortDirection(table: any, accessor: string) {
		const sorting = table.sorting.columnSortings.find((s: ColumnSorting) => s.key === accessor);
		return sorting ? sorting.direction : 'none';
	}
</script>

<div class="not-prose">
	<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
		<p class="text-sm text-muted-foreground">
			Click on column headers to sort. Multiple columns can be sorted simultaneously.
		</p>
		<Button variant="outline" size="sm" onclick={clearMultiSorting} class="shadow-sm">
			<RotateCcw class="mr-2 h-4 w-4" />
			Clear All Sorting
		</Button>
	</div>

	<div class="rounded-md border shadow-sm overflow-hidden">
		<Table.Root>
			<Table.Header class="bg-muted/50">
				<Table.Row>
					{#each multiSortTable.allColumns as column}
						<Table.Head class="py-2">
							<Button
								onclick={() => multiSortTable.sorting.toggleSort(column.accessor)}
								size="sm"
								variant="ghost"
							>
								<span class="font-medium">{column.header}</span>
								<span class="text-muted-foreground/70">
									{#if getSortDirection(multiSortTable, column.accessor) === 'asc'}
										<ArrowUp class="h-4 text-primary" />
									{:else if getSortDirection(multiSortTable, column.accessor) === 'desc'}
										<ArrowDown class="h-4 text-primary" />
									{:else}
										<ArrowUpDown class="h-4 w-4" />
									{/if}
								</span>
							</Button>
						</Table.Head>
					{/each}
				</Table.Row>
			</Table.Header>
			<Table.Body>
				{#each multiSortTable.rows as row}
					<Table.Row class="hover:bg-muted/20 transition-colors">
						{#each row.cells as cell}
							<Table.Cell class="p-4">{cell.value}</Table.Cell>
						{/each}
					</Table.Row>
				{/each}
				{#if multiSortTable.rows.length === 0}
					<Table.Row>
						<Table.Cell class="h-24 text-center p-4" colspan={multiSortTable.headers.length}>
							<div class="flex flex-col items-center justify-center text-muted-foreground">
								<span>No data available</span>
							</div>
						</Table.Cell>
					</Table.Row>
				{/if}
			</Table.Body>
		</Table.Root>
	</div>
</div>