# Controls

`object-table` [`controls`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#controls) allow the user to interact with the table and its data. They include a search box and pagination controls. They will display at the bottom of an `object-table` by default, but can also be hidden or positioned at the top and/or bottom.

#### Positioning

| Parameter | Description                                             | Example             |
| --------- | ------------------------------------------------------- | ------------------- |
| `top`     | Positions table controls at the top of the table        | `controls="top"`    |
| `both`    | Positions table controls at top AND bottom of the table | `contols="both"`    |
| `bottom`  | Positions controls at the bottom of the table           | `controls="bottom"` |
| `none`    | No controls                                             | `controls="none"`   |

#### Example: `controls` positioned at the `top`

{% hint style="info" %}
The `top` position is useful if the height of the table will be changing drastically due to large amounts of non-deterministic content. Placing the controls at the top prevents the buttons from constantly moving up and down when pages are changed.
{% endhint %}

```xml
<object-table ... controls="top">
    ...
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-405fffdaaecab9672dde2535cb6665d71169d67c%2Fobject-table-controls-top.png?alt=media)

#### Example: `controls` positioned at `both` (top and bottom)

```xml
<object-table ... controls="both">
    ...
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-eba5755b4fe92f757c69cfd96ed825ac7c577aec%2Fobject-table-controls-both.png?alt=media)

#### Example: `controls` positioned at the `bottom`

```xml
<object-table ... controls="bottom">
    ...
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-d7b31e9c41c520999fe75f9a29be9db141134459%2Fobject-table-controls-bottom.png?alt=media)

#### Example: `controls` positioned at `none` (no controls)

{% hint style="info" %}
**Tip**: It is advised to set a larger [limit](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#limit), for visibility, when controls are hidden.
{% endhint %}

```xml
<object-table ... controls="none" limit="1000">
    ...
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-4c68483d44c093664115dd62db7cd176fbd93c6a%2Fobject-table-controls-none.png?alt=media)

{% hint style="info" %}
When controls are set to `none` and the number of entries exceeds the `object-table` `limit`, a "Show more" button will appear.
{% endhint %}

### Sticky headers and footers

When an `object-table` has sticky headers and/or footers along with `mode="paginate"`, the controls will also be present in the corresponding sticky header or footer.

### Action buttons

Action buttons appear in the controls. The purpose of these buttons are to provide table actions that should in most cases, apply to the table itself.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-439720e333f78fb6d3d6371bb2dc92bee2c8d71e%2Fobject-table-buttons.png?alt=media)

Since space inside table controls are limited, the buttons employ a best fit algorithm to expand or collapse based on the available space in the render area.

#### Standard syntax

Action buttons follow the same syntax as [`button-group`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/button-group).

```xml
<object-table ...>
    <button-group>
        <button
            icon="fa-download"
            label="Export CSV"
            on-press="log($filteredData, filteredDisplayData, controls)"
        />
        ...
    </button-group>
    ...
</object-table>
```

**Exposing data**

Since action buttons will mostly be used by engineers to apply batch operations to the data, a few variables are exposed to the `on-press` function:

| parameter           | description                                                                                        | example                                                 |
| ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| $filteredData       | All table data, this also contains all the hidden column data                                      | `{columns: ['C', 'D'], rows: [{ A: '...', B: '...' }]}` |
| filteredDisplayData | Exactly the same as `$filteredData` but only contains the visible data due to the table pagination | `{columns: ['C', 'D'], rows: [{ A: '...', B: '...' }]}` |
| controls            | The state of the table based on the current controls                                               | `{ page: 1, totalPages: 1, limit: 19, filters: {} }`    |

**Split buttons**

In cases where the engineer wants to force the first button to be visible but collapse the rest `mode="split"` can be used on the button-group.

```xml
<object-table ...>
    ...
    <button-group mode="split">
        <button icon="fa-download" label="Export CSV" .../>
        <button icon="fa-envelope" label="Email" .../>
        <button icon="fa-list" label="Log" .../>
    </button-group>
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-718ff046824dcf26e92661702a031bd8e94289bd%2Fobject-table-split-buttons.png?alt=media)

**Scrollable table**

When a scrollable table is used instead of a paginated table, the action buttons are still present even without the rest of the controls:

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-fc31f67707c4cb71a5c170b6d9bdfe390523930f%2Fobject-table-scrollable.png?alt=media)
