Svelte Component

Tables

Utilize a data-driven model to create simple presentational tables.

typescript 
import { Table } from '@skeletonlabs/skeleton';
import type { TableSource } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

SymbolNameweight
H Hydrogen 1.0079
He Helium 4.0026
Li Lithium 6.941
Be Beryllium 9.0122
B Boron 10.811
Total Elements5 Elements

Try viewing your console log when tapping a row.

Interactive Mode

Use the interactive to make the table interactive. When a row is clicked, on:selected will pass the row's meta value.

html 
<Table ... interactive={true} on:selected={mySelectionHandler} />

Handling Reactive Data

In some scenarios you may need need to reactive manner. Since TableSource is a Javascript object, it will need to follow Svelte's rules for reactive object updates.

typescript 
function setTableSource(): TableSource {
	return {
		head: ['Symbol', 'Name', 'weight'],
		body: tableMapperValues(sourceData, ['symbol', 'name', 'weight']),
		meta: tableMapperValues(sourceData, ['name', 'symbol', 'weight']),
		foot: ['Total Elements', '', `<span class="badge variant-soft-primary">5 Elements</span>`]
	};
}

// If sourceData updates, set the new TableSource values
$: tableSimple = sourceData ? setTableSource() : undefined;

Table Utilities

The following utility methods allow you to format your source data for use within a Table component.

typescript 
import { tableMapperValues } from '@skeletonlabs/skeleton';

Combines Source Mapper and Source Values methods to handle both operations at once. This allows you to use the same source object, but format differently between display (body) and selected response (meta). It's recommended to use this in most use cases.

typescript 
tableMapperValues(sourceData, ['name', 'symbol', 'weight'])

//	[
//		['Hydrogen', 'H', '1.0079'],
//		['Helium', 'He', '4.0026'],
//		...
//	]