npm package: @invisionag/iris-react-table
Description: ```js import Table, {Column} from '@invisionag/iris-react-table'; ```
Latest version: 6.6.2

```js
import Table, {Column} from '@invisionag/iris-react-table';
```

`react-table` is a component that exposes multiple building blocks for structured, table-like display of data, while also providing freedom to supply data in a more dynamic and react-oriented way. We also get the freedom to animate row movement freely, without worrying about breaking the `<table>` markup. The central piece is the `Table` component, as it provides
the basic styles. Instead of using `tr` for rows, you nest `Columns` into it to outline  a structure. The rows themselves are provided as an Array of objects in the `rows` prop.

### Usage

#### Basic

Please note, a `__props.key` attribute is required. Otherwise animations and sorting/searching in the virtualized version of the table will break.
```js
rows = [
  {__props: { key: 1 }, name: 'Superman', morality: 'good'},
  {__props: { key: 2 }, name: 'Joker', morality: 'evil'},
  {__props: { key: 3 }, name: 'Wonder Woman', morality: 'good'},
];
<Table rows={rows}>
  <Column name="name" label="Name" />
  <Column name="morality" label="Morality" />
</Table>
```

### Animation and Virtualization
Animations are enabled by default, you can disable them by setting `animation` to `false`.
If animations are disabled the table will by virtualized. You should do this if your table needs to handle a lot of rows. It's required to set a height for the virtualized table to render rows.

#### Custom Column width

For custom column width you can pass a string in the `width` prop of a column. The string will directly be injected as a css value.

```js
rows = [
  {__props: { key: 1 }, name: 'Superman', morality: 'good' },
  {__props: { key: 2 }, name: 'Joker', morality: 'evil' },
  {__props: { key: 3 }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows}>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>
```

#### Disabled rows

Rows can receive the disabled styling. For that, the row object should contain a `true` value for its `__props.disabled` key.
```js
rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 2, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 3, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows}>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>
```

#### Sortable

A table can use the built-in functionality to make columns sortable by providing the `sortable` prop in the table component.
```js
rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 1, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 1, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows} sortable showHeader>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>
```

For more elaborated sorting mechanisms, a valid alternative is providing the sorting functionality in a parent component. `Columns` can be passed an `onClick` prop, which will be fired when the header "cell" of this column is clicked. This means that custom sort functionality should only be used in conjunction with `showHeader`. Example [here](https://github.com/ivx/forecast-ui/blob/master/src/scripts/components/QueueTable.js)

#### Fixed height

For fixed height and any other inline styles you want to put on the table body, you can either pass just pass style object to the `Table` or use the `height` prop. If both are specified the `height` prop will overrule the style object.

```js
const tableStyles = {
  height: '160px',
};

const height = '180px';
```

```js
rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 1, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 1, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows} style={tableStyles} height={height}>
  <Column name="name" />
  <Column name="morality" />
</Table>
```

#### Placeholder

A placeholder can be provided. It will be displayed when the rowGetter doesn't return any elements to show. The placeholder can be either a string, or jsx.
```js
rows = [];
<Table rows={rows} placeholder={<p>There is no data here.</p>}>
  <Column name="name" />
  <Column name="morality" />
</Table>
```

#### Custom Column Headings

It is possible to specify custom Column content via render prop. The render prop is expected as a child of column, and it passes along all of the column props.

Column Props:
* name (string): name passed to the column
* label (string or React$Node): the label passed to the column,
* onClick (SyntheticMouseEvent<*> => any): Call to invoke sorting functionality
* handleClick (SyntheticMouseEvent<*> => any): Call to invoke sorting functionality. Calls `preventDefault` before executing.
* sorted ('unsorted' | 'ascending' | 'descending'): Whether the column is currently sorted (and in which direction)
* className (string): ClassNames of the column
* width (string): width passed to the column

Example:
```js
rows = [];
<Table rows={rows} placeholder={<p>There is no data here.</p>}>
  <Column name="name" />
    {props => <button onClick={props.onClick}>{props.name}</button>}
  </Column>
</Table>
```