Svelte Component


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

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


Pd Palladium 46
Nd Neodymium 60
Nd Neodymium 60
Rg Roentgenium 111
Hg Mercury 80
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.

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

Table Utilities

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

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.

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

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