To specify which column displays the `Chev` icons, set `expanderColumnName` to the same name as the header. Otherwise, the `Chev` icons will display in the rightmost column.

The `rows` prop is expected to be a list of objects -- each including a nested `cols` array (see code example).

The `rowKey` refers to which key should be used as a jsx-key. It is also used to track expanded rows. It must match a key in the nested `rows` objects, and should be unique.

```js
import { TableExpand } from 'frontend-react-components';

const headers = ['First Name', 'Last Name', 'Spice'];
const rows = [
    { id: 1, cols: ['Emma', 'Bunton', 'Baby'] },
    { id: 2, cols: ['Geri', 'Halliwell', 'Ginger'] },
    { id: 3, cols: ['Mel', 'Brown', 'Scary'] },
    { id: 4, cols: ['Mel', 'Chisholm', 'Sporty'] },
    { id: 5, cols: ['Victoria', 'Beckham', 'Posh'] }
];

const onRowClick = row => {
    if (row.id % 2 === 0)
        return (
            <React.Fragment>
                <td />
                <td><i>`Spice Up Yo Life!</i></td>
                <td/>
                <td/>
            </React.Fragment>
        )
    return (<td colspan={row.cols.length}><i>Ziga-zig-ahh!</i></td>)
}

<TableExpand
    className={ 'table-hover' }
    headers={ headers }
    numOfRowsLoading={ 25 }
    onRowClick={ onRowClick }
    rowKey={ 'id' }
    rows={ rows }
/>
```