@matco/basic-table NPM

basic-table

basic-table displays your tabular data in a nice HTML table.

Setup

Manual

Copy the src folder as basic-table somewhere in your project.

Then, in your code:

import {Table, Datasource} from 'basic-table/index.js';

With NPM and Webpack

The instructions below are for those who are using NPM and Webpack.

Install as an NPM dependency of your project:

npm i @matco/basic-table --save

Then, in your code:

import {Table, Datasource} from '@matco/basic-table';

Usage

function render_name(value, record) {
	const link = document.createElement('a');
	link.setAttribute('href', `#id=${record.id}`);
	link.appendChild(document.createTextNode(value));
	return link;
}

function render_date(value) {
	return value.toDisplay();
}

new Table({
	container: document.getElementById('table'),
	columns: [
		{label: 'Country', data: 'country', type: Table.DataType.STRING, width: 250},
		{label: 'Name', data: 'name', type: Table.DataType.STRING, render: render_name, width: 200},
		{label: 'Date', data: 'date', type: Table.DataType.DATE, render: render_date, width: 120},
		{label: 'IBAN', data: 'iban', type: Table.DataType.STRING},
		{label: 'Value', data: 'value', type: Table.DataType.NUMBER, width: 120}
	],
	actions: [
		{label: 'Export', url: '#export'}
	]
}).render(new Datasource({url: 'data.json'}));