Tables

Svelte Component

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

@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. 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 { 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