## Chart

### Usage

```jsx
import { Table } from 'ui-components';

const columns = [{
	title: 'Name',
	accessor: 'name',
	type: Table.TYPE.ELEMENT,
	cell: ({ name, title }) => (
		<>
			{name}
			<span>
				{title}
			</span>
		</>
	)
}, {
	title: 'Hire Date',
	accessor: 'date',
	type: Table.TYPE.DATE,
	format: 'll'
}, {
	title: 'Experience (Years)',
	accessor: 'experience',
	type: Table.TYPE.NUMBER,
	format: '0,0',
	tooltip: header => Signals.get('Contributors').Tooltip(header)
}];

const data = [
	{ name: 'Berenice Van Hault', company: 'Zooveo', title: 'Senior Financial Analyst', date: 1448147351000, location: 'Russia', experience: 11 },
	...
];

<Table
	id="TableTest"
	columns={columns}
	data={data}
	sort={{
		property: 'name',
		value: 'asc'
	}}
/>		
```

### Parameters

* `id` (required) is a site-unique ID (see notes below)
* `columns` (required) is an array of columns and their definitions
	* `title` (required) is the title to display
	* `accessor` (required) is the corresponding key for the value in a `data` object
	* `type` is the type of cell to display (see column type list below; defaults to string)
	* `format` is the formatting string to for display (see column type list below)
	* `cell` is a cell display override function (can only be used on `ELEMENT`-type columns). The function receives the row object as it's only parameter
	* `tooltip` is a header display override function that can be used to wrap the column title in a `Tooltip` component
* `data` (required) is the data to display in the table (an array of objects with simple key-value pairs)
* `sort` is an object with sort parameters
	* `desc` (required) is where or not this is descending as a boolean
	* `property` (required) is the accessor of the column to sort on
* `pageSize` is the default page size for the table
* `noBorder` removes the outer borders from the table

### Column Types

* `Table.TYPE.CURRENCY`, uses `Numbro` formatting string
* `Table.TYPE.DATE`, uses `Moment` formatting string
* `Table.TYPE.NUMBER`, uses `Numbro` formatting string
* `Table.TYPE.ELEMENT`

### Notes

* This component uses [React Table](https://react-table.js.org/#/story/readme); refer to their documentation for more information
* All tables within a site must have a unique ID, as each table will save it's sort preferences in local storage.
* The page size preference will also be stored in local storage, but this is set across all tables.