DataIterator
Use the KDataIterator component to display data collections flexibly by providing custom row templates while retaining pagination, filtering, and selection capabilities.
Basic Data Iterator
TypeScript
// 1. Setup Data Provider
const dataProvider = new CAPIFlatServerDataProvider({ pageSize: 10 })
dataProvider.setAPIUrl('/api/exampleDataList')
// 2. Use Component with Icon Buttons
KDataIterator(:dataProvider="dataProvider" :bulkActions="bulkActions")
template(#row="{ row }")
.my-card
span {{ row.name }}
KTooltip(text="Edit")
KButton(iconOnly type="primary" @click="editRecord(row)")
template(#icon)
KIcon(iconname="edit" :width="14" :height="14")Attributes
Configure the KDataIterator component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | ADataProvider | - | Required. Provides data and handles pagination/filtering logic |
| rowActions | Array<IKDatatableAction> | [] | Array of per-item action definitions passed to row slot |
| bulkActions | Array<IKDatatableAction> | [] | Array of bulk action objects |
| search | string | '' | Triggers internal filtering if wired up (requires consumer filter logic) |
| itemsPerPage | number | 10 | Number of items to display per page |
| page | number | 1 | Current page index |
| loading | boolean | false | Controls the loading layout visibility |
Slots
| Name | Props | Description |
|---|---|---|
| default | { row, index } | Default slot to render individual item cards |
| row | { row, index } | Fallback standard row template (alias for default) |