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

Virtual Scrolling Data Iterator (5,000 Cards)

Demonstrates virtual windowing for custom card templates with 5,000 items, mounting only ~12 cards in the DOM at any time.

ID: 1✉️ member1@organization.io

Role: Contributor

ID: 2✉️ member2@organization.io

Role: Maintainer

ID: 3✉️ member3@organization.io

Role: Contributor

ID: 4✉️ member4@organization.io

Role: Maintainer

ID: 5✉️ member5@organization.io

Role: Contributor

ID: 6✉️ member6@organization.io

Role: Maintainer

ID: 7✉️ member7@organization.io

Role: Contributor

ID: 8✉️ member8@organization.io

Role: Maintainer

ID: 9✉️ member9@organization.io

Role: Contributor

ID: 10✉️ member10@organization.io

Role: Maintainer

ID: 11✉️ member11@organization.io

Role: Contributor

ID: 12✉️ member12@organization.io

Role: Maintainer

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 (v-model:search)	string	''	Search string with two-way binding
page / currentPage (v-model:page / v-model:currentPage)	number	1	Current active page with two-way binding
itemsPerPage / pageSize (v-model:itemsPerPage / v-model:pageSize)	number	10	Number of items to display per page with two-way binding
selectedRows (v-model:selectedRows)	any[]	[]	Array of currently selected row items with two-way binding
selectAll (v-model:selectAll)	boolean	false	Header select-all boolean state with two-way binding
loading	boolean	false	Controls the loading layout visibility
visibleFields	string[]	null	Array of field keys to expose to item rendering (null = all fields).
virtualScroll	boolean	false	Enable virtual windowing to render large collections efficiently
itemHeight	number	60	Height of each item in pixels for virtual calculations
viewportHeight	number	500	Height of the virtual scroll container in pixels
buffer	number	5	Extra items rendered before and after the visible viewport

Name	Payload	Description
update:page / update:currentPage	number	Emitted when current page changes
update:itemsPerPage / update:pageSize	number	Emitted when page size changes
update:search	string	Emitted when search string changes
update:selectedRows	any[]	Emitted when selected rows change
update:selectAll	boolean	Emitted when selectAll toggles
page-change	number	Emitted on page transition
search-change	string	Emitted when search value changes

Name	Props	Description
default	{ row, index }	Default slot to render individual item cards
row	{ row, index }	Fallback standard row template (alias for default)