@govuk-frederic/table

Renders a table with optional heading row. Cell data is derived from an array and can include names per cell or per row.

Stats

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

Readme

Table

Import

  import Table from '@govuk-frederic/table';

Usage

Simple

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />

rowIncludesHeading

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />

rowIncludesHeading, no titles

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

<Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />

rowIncludesHeading, no titles, small single row

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

<Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />

rowIncludesHeading, with titles, with flexible columns

const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
 ['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
 ['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
 ['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />

Properties

Prop Required Default Type Description
borderless false bool
flexibleColumns false bool
name `````` string
nameByRow false bool
names [] arrayOf[object Object]
rowIncludesHeading false bool
rows true `````` arrayOf[object Object]
spacing SPACING.SCALE_3 string
titles null arrayOf[object Object]

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.