#### Basic layout

```bash
 -----------------------------------------------------------
|                                                           |
|  APPBAR                                                   |
|                                                           |
 -----------------------------------------------------------
|                          |                                |
|  ACTIONBAR               | PAGINATION + VIEWBAR           |
|                          |                                |
 -----------------------------------------------------------
|                                                           |
|                                                           |
|                                                           |
|                 MAIN CONTENT                              |
|                                                           |
|                                                           |
|                                                           |
 -----------------------------------------------------------
```

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

    const tmpTableData = giveMeRandomUsers(100);

    initialState = {
      data: tmpTableData.slice(0, 10),
      pageFrom: 1,
      pageTo: 10
    };

    const tmpAppbar = (
      <Appbar
        leftOnClick={() => { window.alert('Appbar left icon clicked!'); }}
        middleText="Basic 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={state.pageFrom}
        to={state.pageTo}
        count={100}
        onChange={(pageFrom, pageTo) => {
          setState({
            data: tmpTableData.slice(pageFrom - 1, pageTo),
            pageFrom,
            pageTo
          });
        }}
      />
    );

    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 { 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={state.data}
        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>
    );

    <App>
      <BasicLayout
        appbar={tmpAppbar}
        actionbar={tmpActionbar}
        pagination={tmpPagination}
        viewbar={tmpViewbar}
        content={tmpTable}
      />
    </App>