#### Master detail layout (horizontal & vertical)

```bash
 -----------------------------------------------------------
|                                                           |
|  APPBAR                                                   |
|                                                           |
 -----------------------------------------------------------
|                          |                                |
|  ACTIONBAR               | PAGINATION + VIEWBAR           |
|                          |                                |
 -----------------------------------------------------------
|                          |                                |
|   ANY VIEW               |  ANY VIEW                      |
|   (MOSTLY LISTVIEW)      |  (MOSTLY FORM VIEW)            |
|                          |                                |
|                          |                                |
|                          |                                |
|                          |                                |
 -----------------------------------------------------------

 ----------------------------------------------------------- 
|                                                           | 
|  APPBAR                                                   | 
|                                                           | 
 ----------------------------------------------------------- 
|                          |                                | 
|  ACTIONBAR               | PAGINATION + VIEWBAR           | 
|                          |                                | 
 ----------------------------------------------------------- 
|                                                           | 
|   ANY VIEW                                                | 
|   (MOSTLY LISTVIEW)                                       | 
|                                                           | 
| _________________________________________________________ | 
|                                                           | 
|   ANY VIEW                                                | 
|   (MOSTLY FORM VIEW)                                      | 
|                                                           | 
|                                                           | 
 ----------------------------------------------------------- 
```

    const { Box, Appbar, Actionbar, Pagination, ButtonGroup, DataTable, Form } = require('../../../src');
    const { giveMeRandomUsers } = require('../../helpers/randomData');
    const TableIcon = require('grommet/components/icons/base/Table');
    const ColumnsIcon  = require('grommet/components/icons/base/Columns');

    const tmpAppbar = (
      <Appbar
        leftOnClick={() => { window.alert('Appbar left icon clicked!'); }}
        middleText="Master detail layout"
        middleJustify="center"
      />
    );

    const tmpActionbarPrimaryActions = [
      {
        label: 'New',
        onClick: () => { window.alert('New clicked!'); },
      },
      {
        label: 'Edit',
        disabled: true,
        onClick: () => { window.alert('Edit clicked!'); },
      },
    ];

    const tmpActionbarSecondaryActions = [
      {
        label: 'Export',
        onClick: () => { window.alert('Export clicked!'); },
      },
      {
        label: 'Delete',
        onClick: () => { window.alert('Delete clicked!'); },
      },
      {
        label: 'Print',
        disabled: true,
        onClick: () => { window.alert('Print clicked!'); },
      },
    ];

    const tmpActionbar = (
      <Actionbar
        primaryActions={tmpActionbarPrimaryActions}
        secondaryActions={tmpActionbarSecondaryActions}
        flexGrow={false}
      />
    );

    const tmpPagination = (
      <Pagination
        from={1}
        to={10}
        count={100}
        onChange={(itemFrom, itemTo) => {
          window.alert('Pagination changed from' + itemFrom + ' to ' + itemTo);
        }}
      />
    );

    const tmpViewbarItems = [
      {
        id: 1,
        icon: <TableIcon />,
        onClick: () => { window.alert('View type table selecetd!'); },
      },
      {
        id: 2,
        icon: <ColumnsIcon />,
        onClick: () => { window.alert('View type columns selecetd!'); },
      },
    ];

    const tmpViewbar = <ButtonGroup items={tmpViewbarItems} activeItemId={1} />;

    const tmpTableData = giveMeRandomUsers(100);

    const { AvatarCell, TextCell, MoneyCell } = DataTable;

    const tmpTableColumns = [
      { title: 'First Name', index: 'firstname' },
      { title: 'Last Name', index: 'lastname' },
      { title: 'Gender', index: 'gender' },
      { title: 'Avatar', index: 'avatar' },
      { title: 'Is Active', index: 'isActive' },
    ];

    const tmpTable = (
      <DataTable
        fieldID="uiid"
        data={tmpTableData}
        columns={tmpTableColumns}
      >
        <TextCell field="firstname" header="Firstname" />
        <TextCell field="lastname" header="Lastname" />
        <TextCell field="city" header="City" />
        <TextCell field="country" header="Country" />
        <AvatarCell field="avatar" header="Avatar" />
        <MoneyCell field="accountBalance" header="Account Bal." />
      </DataTable>
    );

    const tmpFields = [
      {
        label: 'firstname',
        formField: <Form.TextField field="firstname" label="Name" />,
      },
      {
        label: 'accountBalance',
        formField: <Form.NumberField field="accountBalance" label="Account balance" />,
      },
    ];

    const tmpForm = (
      <Form
        title="User"
        fields={tmpFields}
        values={tmpTableData[0]}
        readonly
        compact
      />
    );

    <App>
      <MasterDetailLayout
        appbar={tmpAppbar}
        actionbar={tmpActionbar}
        pagination={tmpPagination}
        viewbar={tmpViewbar}
        master={tmpTable}
        detail={tmpForm}
        orientation="vertical"
      />
    </App>