---
title: "Controls"
description: "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."
permalink: /docs/build/ui-components/all-ui-components/object-table/object-table-guides/controls/
---
# Controls

`object-table` [`controls`](/docs/build/ui-components/all-ui-components/#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`

<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.

</Info>

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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-405fffdaaecab9672dde2535cb6665d71169d67c-2fobject-table-controls-top-e2fce34a.png)

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

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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-eba5755b4fe92f757c69cfd96ed825ac7c577aec-2fobject-table-controls-both-048588ba.png)

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

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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-d7b31e9c41c520999fe75f9a29be9db141134459-2fobject-table-controls-bottom-db09a8ce.png)

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

<Info>

**Tip**: It is advised to set a larger [limit](/docs/build/ui-components/all-ui-components/#limit), for visibility, when controls are hidden.

</Info>

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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-4c68483d44c093664115dd62db7cd176fbd93c6a-2fobject-table-controls-none-a6aafe9d.png)

<Info>

When controls are set to `none` and the number of entries exceeds the `object-table` `limit`, a "Show more" button will appear.

</Info>

### 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.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-439720e333f78fb6d3d6371bb2dc92bee2c8d71e-2fobject-table-buttons-50d10e36.png)

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`](/docs/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>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-718ff046824dcf26e92661702a031bd8e94289bd-2fobject-table-split-buttons-e5bd6cc0.png)

**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:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-fc31f67707c4cb71a5c170b6d9bdfe390523930f-2fobject-table-scrollable-9594ce7f.png)