@govuk-frederic/object-table

Renders a table from an object whose properties match provided fields. Also supports transforms for values.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@govuk-frederic/object-table
0.2.04 years ago4 years agoMinified + gzip package size for @govuk-frederic/object-table in KB

Readme

ObjectTable

Import

import ObjectTable from '@govuk-frederic/object-table';

Usage

Simple
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
  { key: 'three', heading: 'Three' },
  { key: 'four', heading: 'Four' },
];
const object = { one: 'test', two: 'test', three: '', four: null };
const title = ['Heading'];

<ObjectTable fields={fields} object={object} title={title}/>;

With skipEmptyValues
const fields = [
  { key: 'one', heading: 'One' },
  { key: 'two', heading: 'Two' },
  { key: 'three', heading: 'Three' },
  { key: 'four', heading: 'Four' },
];
const object = { one: 'test', two: 'test', three: '', four: null };
const title = ['Heading'];

<ObjectTable fields={fields} object={object} title={title} skipEmptyValues={false}/>

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

<ObjectTable fields={fields} object={object} title={title} hideWithNoValues />;

Properties

Prop | Required | Default | Type | Description :--- | :------- | :------ | :--- | :---------- defaultTransform | | ``(value = '-') => value`` | func | fields | | ``[]`` | arrayOfobject Object | hideWithNoValues | | ``false`` | bool | object | | ``{}`` | object | skipEmptyValues | | ``false`` | bool | title | | ``null`` | node |