# Sortable Table

The sortable table component V2 is designed to allow for the easy display of data within a sortable
table, with the maximum amount of flexibility in terms of styling and the choice of component
you use to render the cell data. This is achieved with the use of render props with sensible defaults.

## Minimum usage

If you just need to display data with standard string sorting you just need to pass the data
and a cols array, with determines the cols to display and the order they are displayed.

```js
<SortableTable
  cols={['name', 'age', 'createAt']}
  rows={[
    { id: '1', name: 'a', age: '30', createAt: '2017-11-01T03:01:00.000-08:00' },
    { id: '2', name: 'd', age: '32', createAt: '2017-10-01T03:01:00.000-08:00' },
    { id: '3', name: 'g', age: '54', createAt: '2017-09-01T03:01:00.000-08:00' },
    { id: '4', name: 'j', age: '23', createAt: '2017-05-01T03:01:00.000-08:00' }
  ]}
/>
```

## Advanced Usage

If you require controls, custom rendering and styling of the cells you can use the render props to
achieve this.

**Render Props**

| render prop                                       | description                                                            |
| :------------------------------------------------ | :--------------------------------------------------------------------- |
| `renderHeader(value, { sortBy, order })`          | This customises all the Header cells                                   |
| `renderCell(defaultSchemaRender(), { id, key } )` | This customises all the value cells.                                   |
| `render(value, { id, key, sortBy, order }))`      | The schema object also supports a render prop for per col customising. |

**Schema**

The schema allows you to attach metadata to the individual cells in the table, the schema render Props
is very useful for adding input components to a cells.

| Schema props | description                                |
| :----------- | :----------------------------------------- |
| label        | The header label for a column              |
| sortType     | How to sort, string, number, date, boolean |
| render       | A per cell render function                 |

```js
<SortableTable
  renderCell={value => <div className="text-red font-mono">{value}</div>}
  cols={['name', 'age', 'createdAt', 'selected']}
  rows={[
    { id: '1', name: 'a', age: '30', createAt: '2017-11-01T03:01:00.000-08:00' },
    { id: '2', name: 'd', age: '32', createAt: '2017-10-01T03:01:00.000-08:00' },
    { id: '3', name: 'g', age: '54', createAt: '2017-09-01T03:01:00.000-08:00' },
    { id: '4', name: 'j', age: '23', createAt: '2017-05-01T03:01:00.000-08:00' }
  ]}
  schema={{
    id: { label: 'id' },
    name: { label: 'Name' },
    age: {
      label: 'Age',
      sortType: 'number',
      render: value => {
        if (value < '32') {
          return (
            <div>
              <Button theme="secondary">Save {`${value} years`}</Button>
            </div>
          )
        }
        return (
          <div>
            <Button theme="primary">Save {`${value} years`}</Button>
          </div>
        )
      }
    },
    createdAt: {
      label: 'Created',
      sortType: 'date',
      render: (value, id, key) => <DateRenderer value={value} />
    },
    selected: {
      label: 'Selected',
      sortType: 'boolean',
      render: (value, id, key) => (
        <input
          type="checkbox"
          checked={value}
          onChange={e => console.log(value, id, key)}
          name="name"
        />
      )
    }
  }}
/>
```

## Redux Integration

If the props 'order' or 'sortBy' are passed in as props these props take precedent over the local
state versions. This means that the sortable table can be used as a controlled or a uncontrolled
component.

undocumented - Coming soon