Tables

Svelte Component

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

@skeletonlabs/skeleton
View Source
Doc Source
Accessibility Reference

Examples

SymbolNameWeight
H Hydrogen 1.0079
He Helium 4.0026
Li Lithium 6.941
Be Beryllium 9.0122
B Boron 10.811
Total31.7747
View your browser console when selecting a row above.

Usage

First we need a set of source data. This can start as either an array of objects, or an array of arrays. For this example we'll use the former.

typescript 
const sourceData = [
	{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
	{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
	{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
	{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
	{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
];

Create a TableSource object that houses all of our table information. Note we're using the tableMapperValues() method to prune and map our data between the body and meta values. We cover the use of this method in the Table Utilities section below.

typescript 
const tableSimple: TableSource = {
	// A list of heading labels.
	head: ['Name', 'Symbol', 'Weight'],
	// The data visibly shown in your table body UI.
	body: tableMapperValues(sourceData, ['name', 'symbol', 'weight']),
	// Optional: The data returned when interactive is enabled and a row is clicked.
	meta: tableMapperValues(sourceData, ['position', 'name', 'symbol', 'weight']),
	// Optional: A list of footer labels.
	foot: ['Total', '', '<code>31.7747</code>']
};

Finally, we pass our table source data to the component for display. The interactive prop is optional, but indicates the table is interactive, and will provide meta data via the on:selected event when a row is clicked clicked.

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

Table Utilities

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

ts 
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.

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

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

Data Tables

Need a fully featured data table with powerful features like selection and sort? See data tables.

Data Tables