goodtables-ui

A web UI for goodtables validation and report visualizations. (Demo: FORM/REPORT).

Features

• render - framework-agnostic component render
• Report - goodtables report component
• Form - goodtables validation form component

Contents

• Getting Started
  • Requirements
  • Installation
• Documentation
  • General usage
  • In-React usage
  • Component: Report
  • Component: Form
• API Reference
  • render(component, props, element)
• Contributing
• Changelog

Getting Started

You can use this components in plain JavaScript code or mixing with any modern framework (with native support for React). To render report you have use goodtablesUI.render(goodtablesUI.Report, props, element) function.

Requirements

If you'd like to use bootstrap@3 please install goodtables-ui@1

It requires adding bootstrap and component styles to your HTML (or requiring it within your scripts):

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//unpkg.com/goodtables-ui/dist/goodtables-ui.min.css">

Installation

NPM

Install the package in your terminal $ npm install --save goodtables-ui

The package could be used as goodtables-ui package from NPM:

import goodtablesUI from 'goodtables-ui'

const report = '<YOUR-REPORT>'
const element = document.getElementById('report')
goodtablesUI.render(goodtablesUI.Report, {report}, element)

CDN

The distribution is 60kb minified (20kb gzipped) with no dependencies.

The package could be used as pluggable script from CDN:

<div id="report"></div>
<script src="//unpkg.com/goodtables-ui/dist/goodtables-ui.min.js"></script>
<script>
  var report = '<YOUR-REPORT>'
  var element = document.getElementById('report')
  goodtablesUI.render(goodtablesUI.Report, {report}, element)
</script>

Documentation

General usage

This library can be used in a vanilla JavaScript environment or mixed with some framework like Angular or Vue:

import goodtablesUI from 'goodtables-ui'

const report = '<YOUR-REPORT>'
const element = document.getElementById('report')
goodtablesUI.render(goodtablesUI.Report, {report}, element)

In-React usage

In this case your application should provide react and react-dom.

You can use the components as native components (import from goodtables-ui/lib to get React sources):

import React from 'react'
import ReactDOM from 'react-dom'
import goodtablesUI from 'goodtables-ui/lib'

const report = '<YOUR-REPORT>'
const element = document.getElementById('report')
ReactDOM.render(<goodtablesUI.Report report={report} />, element)

Component: Report

The Report component accepts the following props:

• report - a valid goodtables report
• spec? - an optional custom goodtables spec

Here is a example of the spec customization:

const spec = goodtablesUI.spec
spec.errors['blank-header'].description = 'New description'
spec.errors['duplicate-row'].hexColor = '0700fd'

Component: Form

The Form component accepts the following props:

• source - goodtables validation source
• options - goodtables validation options
• validate - a function in a form of (source: ISource, options: IOptions): Promise<IReport>
• reportPromise? - a valid goodtables report in a form of Promise
• spec? - an optional custom goodtables spec

API Reference

render(component, props, element)

Render component

| Param | Type | Description | | --- | --- | --- | | component | Component | one of provided by the library component e.g. Report | | props | Object | object containing props | | element | Element | DOM element to render into |

Contributing

The project follows the Open Knowledge International coding standards. There are common commands to work with the project:

$ npm run dev
$ npm run build
$ npm run test

Changelog

Here described only breaking and the most important changes. The full changelog and documentation for all released versions could be found in nicely formatted commit history.

v2.2

• Add an option that removes the row number for the header row (#40)

v2.1

• Moved react to peer dependencies

v2.0

• Rebased on bootstrap4
• Add color customization

v1.3

• added support for custom specs

v1.2

• general improvements

v1.1

Improved behaviour:

• updated to Data Quality Spec v1
• added support for custom checks

v1.0

First stable release.