Table

Tables display data in a tabular format.

Examples

Normal Table
Name	Surname	Age
John	Smith	27
Adam	Smith	32
Jane	Doe	40
John	Doe	51
Mary	Gary	67

Table with borders
Name	Surname	Age
John	Smith	27
Adam	Smith	32
Jane	Doe	40
John	Doe	51
Mary	Gary	67

Striped Table with sorting
name	surname	age
John	Smith	27
Adam	Smith	32
Jane	Doe	40
John	Doe	51
Mary	Gary	67

Horizontal table
Name	John	Adam	Jane	John	Mary
Surname	Smith	Smith	Doe	Doe	Gary
Age	27	32	40	51	67

Table with Grouping Column
#	Name	Surname	Age
1	John	Smith	27
1	Adam	Smith	32
2	Jane	Doe	40
2	John	Doe	51
3	Mary	Gary	67

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, TableHead, TableBody, TableRow, TableCell, TableCaption } from 'furl-components';

ReactDOM.render(
  <div>
    <Table tableStyle='striped'>
      <TableCaption>People</TableCaption>
      <TableHead>
        <TableRow>
          <TableCell heading>Name</TableCell>
          <TableCell heading>Surname</TableCell>
          <TableCell heading>Age</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>John</TableCell>
          <TableCell>Smith</TableCell>
          <TableCell>27</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Adam</TableCell>
          <TableCell>Smith</TableCell>
          <TableCell>32</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Jane</TableCell>
          <TableCell>Doe</TableCell>
          <TableCell>40</TableCell>
        </TableRow>
      </TableBody>
    </Table>
    <Table>
      <TableCaption>Horizontal table</TableCaption>
      <TableBody>
        <TableRow>
          <TableCell heading>Name</TableCell>
          <TableCell>John</TableCell>
          <TableCell>Adam</TableCell>
          <TableCell>Jane</TableCell>
        </TableRow>
        <TableRow>
          <TableCell heading>Surname</TableCell>
          <TableCell>Smith</TableCell>
          <TableCell>Smith</TableCell>
          <TableCell>Doe</TableCell>
        </TableRow>
        <TableRow>
          <TableCell heading>Age</TableCell>
          <TableCell>27</TableCell>
          <TableCell>32</TableCell>
          <TableCell>40</TableCell>
        </TableRow>
      </TableBody>
    </Table>
    <Table
      data={[
        { name: 'John', surname: 'Smith', age: 42 },
        { name: 'Adam', surname: 'Smith', gender: 'male' }
      ]}
      propertyNames={['name', 'surname', 'age']}
      title='People'
      sortable
    />
  </div>, 
  document.getElementById('root')
);

API

Table props
Property	Description	Type	Default
tableStyle	table style	string	'none'
data	table data source	array(object)
propertyNames	table dat source selected property names	array(string)
sortable	table sortable property	boolean	false

TableCell props
Property	Description	Type	Default
heading	table cell heading style	boolean	false
colSpan	table cell column span	int	1
rowSpan	table cell row span	int	1

Notes

You can populate a table either via passing children to it or via the use of the data prop. If data is provided, it will take precedence over passed children, therefore rendering only the content provided in data.
A Table only accepts children of the TableCaption, TableHead or TableBody component types.
TableBody and TableHead components only accept children of the TableCell component type.
data only accepts an array of objects.
propertyNames and sortable only apply if the table is populated using data.
propertyNames only accepts an array of strings, corresponding to keys of the objects in data.
If propertyNames is not specified, the component will automatically pick all shared keys of the objects in data.
sortable determines if the rendered table will have controls for sorting its contents.
tableStyle can be one of the following: 'none', 'bordered' or 'striped'.