IKDatatableAction Interface
Defines a single row-level action button displayed inside a KDatatable. Pass an array of these to the datatable's :actions prop to add contextual controls such as Edit, Delete, or View to each row.
Define an actions array and bind it to a KDatatable component.
<template lang="pug">
KDatatable(
:dataProvider="provider"
:columns="columns"
:actions="tableActions"
)
</template>
<script lang="ts" setup>
import type { IKDatatableAction } from '@katlux/providers'
const tableActions: IKDatatableAction[] = [
{
label: 'Edit',
action: (row) => {
router.push(`/users/${row.id}/edit`)
}
},
{
label: 'Delete',
action: async (row) => {
await provider.delete([row])
}
},
{
label: 'View Details',
action: (row) => {
selectedUser.value = row
modalOpen.value = true
}
}
]
</script>| Property | Type | Required | Description |
|---|
| label | string | ✓ | The button label displayed in the action column or bulk actions menu. |
| action | (rows: any, selectAll?: boolean) => void | ✓ | Callback invoked when the action button is clicked. |
| icon | string | | Optional name of the icon (e.g., 'edit', 'trash', 'settings') to display inside the button. |
| iconOnly | boolean | | When true, renders a square icon-only button without text padding. |
| type | 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark' | | Optional visual color variant for the action button. |
| visible | (rowOrSelectedRows: any, selectAll?: boolean) => boolean | | Optional visibility callback. Row Action: `(row) => boolean`. Bulk Action: `(selectedRows, selectAll) => boolean`. |