# Table Actions

## Actions

Table is an interactive component which means you can bind all **different kinds of actions** to it. You can configure:

* Row click
* Rows check
* Inline action
* Header action
* Hover action

To proceed to the actions, select the table and click on the **"Actions" tab**:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FALFNies7hz3wZxOJkSAv%2Fdxnrtfyg.png?alt=media\&token=e9eef045-158c-4ab2-aa41-61b23256e80f)

{% hint style="warning" %}
For the **Hover action**, you'll need to drill down into an individual column in the column settings (see the "Hover action" section below)
{% endhint %}

### Row click

When the Row click action is enabled, the specified action will be executed once a row is clicked. You'll be able to use any value from a selected row in the action. Now, click on it: 

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FAlyz0bGqy57lgZovLoxs%2Fxhctf.png?alt=media\&token=646d32e8-35dc-4a2d-b47f-03b433e15e11)

The most **common use-case** for the "Row click" action is drilling down into the record or proceeding to the page with more record-related data (you'll need to use the "Navigate to Page" action type for that). But you are free to use any action type.

{% hint style="info" %}
Learn more about different types of actions in the [Types of action](https://docs.jetadmin.io/user-guide/design-and-structure/actions) section
{% endhint %}

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FXfZI2B6zZORJk2CceKIo%2Fxftgyju.png?alt=media\&token=231b1bff-d407-4c93-9fd5-22d21be24355)

Here's an **example** of how that might look in the user-mode:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FjiJyT0F8TcGzaRdZ3UI5%2Ftfhyu.gif?alt=media\&token=b3598c3c-efc8-4550-ba07-789e0009d335)

{% hint style="danger" %}
**It's crucial** to understand how **data is bound** under the hood when linking pages. Otherwise, things might break when customizing the auto-generated pages or building the drill-downs from scratch. 

Please, **read more** in the [Values section](https://docs.jetadmin.io/user-guide/binding-and-values/parameters) 
{% endhint %}

### Rows check

The Row check action allows you to execute actions using data from multiple rows. Click on it: 

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FeMwSxIDkE7PoGBEp6q4a%2Ftjyuyju.png?alt=media\&token=e3c48776-db62-4c43-adcf-af2085b12f81)

Here's an **example** of how that might look in the user-mode for when we've set the "Row check" action to change the statuses of the checked rows to "Packed":

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FOsJ0Bb4fVM6pRoPCbE3q%2FKYGMUJBH.gif?alt=media\&token=716a1e14-ae35-497e-8709-cc199b8baa32)

{% hint style="info" %}
Learn how to set up this or other **CRUD** (Create, Read, Update, Delete) use-cases in the [Values section](https://docs.jetadmin.io/user-guide/binding-and-values/parameters)
{% endhint %}

### Row action

If you want to add action buttons inside of **individual rows**, you should use "Row actions"(Inline actions):

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FGnUCcCUTQlJ4pB7P4EWt%2Fgyvkbuhy.png?alt=media\&token=87b54502-563b-4db1-9eb8-b8d91e288905)

As an example, here's the action that fetches the status from the row in which the "Inline action" was clicked and uses it in the notification pop-up:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FODFKPXkz7HS2tNVkiZ0e%2Ffmcnghu.gif?alt=media\&token=c41a2e17-9145-49b1-b218-6dc060bab0ff)

When you add a Row action you often need to pass some value from the row the button was clicked on. For that you always have access to the context of the current row the button was clicked on. You just need to pass the desired value to the input parameter that is necessary to perform your action. The example below shows how to run a Workflow specifically for the desired row with the value from that row: 

{% embed url="<https://www.loom.com/share/a6d6b075fe6f4b409914ba9f17aead41>" %}

### Header action

Header action allows you to set up an action and put the button in the **"Header" of the table**. By default, all header actions will be hidden in one dropdown button, but you have an option to pin an individual header action for better visibility.&#x20;

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FzQcGvmmG4fHOaBl7pFLE%2Fhdshtfy.png?alt=media\&token=8138bf59-7f39-4dd6-ae62-32dd75cedaa3)

You can create multiple header actions and **pin** the ones you'd like to see on top:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FSVHgXrUFiOKA2B6WkQWq%2Ftdxjct.png?alt=media\&token=4d2e3625-a525-4e5b-b179-09285c7afe79)

Here's an **example** of two header actions in the dropdown and executing the pinned one (downloading the whole list of orders):

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FVP75CDuMKepOYwnvmaMo%2Fftvyg.gif?alt=media\&token=e15cc746-c855-4007-b614-725ba29bcb54)

### Hover action

Hower action helps set up actions, specific to certain fields or columns. When you **hover your mouse** over the field, the action, otherwise hidden, will show up.

To access it, select the table and drill down into the column that you want to enable it for:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FBmVlijaxni6D9XLAOxFf%2Fyfkcgu.png?alt=media\&token=b1276a04-065e-4865-9b81-af5e6d5c4849)

Then go to the "Actions" tab:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F752RGdtNsAepZ2bjOupk%2Fxtjcfvgy.png?alt=media\&token=1c8c2ee6-7066-4903-9de6-cec8351416ae)

Here's an **example** of a "Hover action", triggering the modal popup and pushing the `Order date` there:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FjmmY57afs86GqxSrWIqK%2Fcfykvguy.gif?alt=media\&token=7f71a73e-c58a-43b7-8e94-08c7a73e6e61)

{% hint style="info" %}
**Learn more** about using **modal popups** and how to configure them in the ["Modal component" section](https://docs.jetadmin.io/user-guide/design-and-structure/components/modal)
{% endhint %}

{% content-ref url=".." %}
[..](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists)
{% endcontent-ref %}

{% content-ref url="../../../actions" %}
[actions](https://docs.jetadmin.io/user-guide/design-and-structure/actions)
{% endcontent-ref %}