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

Usage

First we need a set of source data. This can be an array of objects with key/value pairs.

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. We cover the use of tableMapperValues() further down.

typescript 
const tableSimple: TableSource = {
	// A list of heading labels.
	head: ['Name', 'Symbol', 'Weight'],
	// A formatted list of table body data.
	body: tableMapperValues(sourceData, ['name', 'symbol', 'weight']),
	// Optional: A formatted list of body data. This is returned when clicking an interactive table.
	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. Note we've opted to enable interactive mode here.

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';>

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 for selection and sort? Try data tables.

Data Tables