Actions JSON configuration
How to structure JSON for actions column in Datatable.
🧩 Actions JSON Configuration
Actions in Lens tables allow users to perform context-specific operations like viewing, editing, or deleting a row. The actions configuration is a JSON object that defines a list of available actions, each rendered as a button, icon, or dropdown menu within the table's actions column.
These actions are passed as a property to the table view JSON under the key actions.
✍️ Structure Overview
The JSON structure of actions looks like this:
⚙️ Configuration Details
items: ActionItem[]
An array of individual action definitions. Each item describes one CTA in the table.
🔑 key (required)
A unique identifier for the action. Used internally.
🏷️ label (optional)
The display name of the action button or option in the dropdown.
🔗 url (optional but usually required)
Defines the endpoint or route to call when the action is triggered.
- You can use dynamic placeholders such as
:id,:state, or nested ones like:city.locality.id. - These will be auto-replaced based on the row data.
🖼️ icon (optional)
Name of the icon to render with the action.
Only three icons are officially supported out of the box:
"SquarePen""EyeIcon""Trash2"
Frontends may override these with custom icon sets if needed.
📑 options (optional)
An array of sub-actions shown in a dropdown when this action is clicked. Useful for related operations under a single action button.
⚠️ confirmation (optional)
When set to "true", the action will prompt the user for confirmation before proceeding. Ideal for destructive actions like delete.
📬 method (optional)
Defines how the action should be triggered.
"HREF"(default) → Navigates the user using React router"POST","GET", etc. → Sends an HTTP request to the specified URL with method and row data
If method is omitted, the default is treated as "HREF".
✅ Example Use in a View
To include actions in your view configuration:
🧩 Summary Table
| Field | Type | Description |
|---|---|---|
key | string | Unique identifier |
label | string | Display label for button or dropdown option |
url | string | Target route or endpoint (with dynamic :key support) |
icon | string | One of "SquarePen", "EyeIcon", "Trash2" |
options | array | Optional sub-actions shown in a popup |
confirmation | string | If "true", prompts before proceeding (used for destructive actions) |
method | string | Either "HREF" for routing, or HTTP verbs like "POST"/"GET" for fetch |
📌 Notes
- You can add custom actions to extend system behavior without changing the frontend logic.
- Nested properties like
:city.locality.idare supported via dot notation for deep data access. - Omitting required fields like
keyorurlmay result in runtime errors or non-functional actions.