Tables

Svelte Component

Simple presentational tables for tabular display.

@brainandbones/skeleton
View Source
Doc Source
Accessibility Reference

Examples

NameSymbolWeight
Hydrogen H 1.0079
Helium He 4.0026
Lithium Li 6.941
Beryllium Be 9.0122
Boron B 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. The latter is preferred as this is the only format the table source can accept and display. Don't worry though, we've provides utility methods to help format you data.

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' },
];

Next, we 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.

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 props enables a mouse hover effect for rows, and returns the matching meta data via the on:selected event when clicked.

html 
<Table source={tableSimple} interactive={true} />

Table Utilities

A set of utility methods to format your source data for use within a Table component.

ts 
import { tableCellFormatter } from '@brainandbones/skeleton';>

Table cells can accept HTML via template literals. This method allows wrapping HTML tags arround a particular object value.

ts 
tableCellFormatter(sourceData, 'weight', '<code>', '</code>');

// [
//     { position: 1, name: 'Hydrogen', weight: '<code>1.0079</code>', symbol: 'H' },
//     { position: 2, name: 'Helium', weight: '<code>4.0026</code>', symbol: 'He' },
//     ...
// ]

Data Tables

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

Data Tables