@govuk-frederic/array-object-table

Renders a table from an an array of objects, providing they have properties which match provided the keys. Also supports transforms of undefined values.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@govuk-frederic/array-object-table
Minified + gzip package size for @govuk-frederic/array-object-table in KB

Readme

ArrayObjectTable

Import

  import ArrayObjectTable from '@govuk-frederic/array-object-table';

Usage

Simple

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  { one: 'test', two: 'test' },
  { one: 'test' },
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title}/>;

With skipEmptyRows

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  {},
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>

With skipEmptyRows and hideWithNoValues

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
];
const array = [
  {},
  {},
];
const title = ['Heading'];

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;

With object transform and default transform

const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
  { key: 'three', heading: 'Three' },
  { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
];
const array = [
  {one: 'One', two: 'Two'},
];
const title = ['Heading'];
const defaultTransform = value => (value || '-');

<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>

Properties

Prop Required Default Type Description
array true `````` arrayOf[object Object]
defaultTransform (value = '-') => value func
fields true `````` arrayOf[object Object]
hideWithNoValues false bool
skipEmptyRows false bool
title null node

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.