Use the KDatatable component to display tabulated data from a DataProvider, with support for filtering, sorting, bulk actions, and row actions.
Datatable with client side data provider and name&email filter
Demonstrates filtering, row actions, and bulk actions. Providing :bulkActions automatically renders multi-selection checkboxes on each row and a header select-all checkbox.
You can customize individual cells using named slots: #cell-fieldName
id
name
email
TypeScript
KDatatable(
:dataProvider="provider"
:visibleFields="['id', 'name', 'email']"
)
template(#cell-id="{ value }")
span.id-cell #{{ value }}
template(#cell-name="{ value }")
.name-cell
KIcon(iconname="user" :width="16" :height="16")
strong {{ value }}
template(#cell-email="{ value, row }")
a.email-link(:href="`mailto:${value}`") {{ value }}
Virtual Scrolling & Sticky Headers (10,000 Rows)
High-performance virtual scrolling with sticky table header rendering 10,000 items in ~20 visible DOM rows, supporting global dataset selection and bulk actions.
Client-Side Encrypted Dataset with On-Demand Page Decryption (100 Rows)
Demonstrates zero-trust in-memory security using CFlatClientDataProvider. All 100 employee records are stored strictly encrypted in provider memory (allData). Only the visible page rows (pageData, 10 items) are decrypted on the fly as pages are navigated. The KDatatable component is completely encryption-agnostic.
Zero-Trust In-Memory Security Console
Total In-Memory Rows: 100 (Encrypted)Active Visible Page: 1 (0 Rows Decrypted)Dataset at Rest: 100 Rows (Remain Encrypted in Memory)
Inactive Row Memory (Row #25 from allData)AES-GCM Ciphertext
Encrypting in-memory rows...
Active Visible Row (Row \#1 on Current Page from pageData)Decrypted Plaintext
Decrypting visible page slice...
TypeScript
// 1. Initialize client data provider with AES-GCM field encryption
const provider = new CFlatClientDataProvider({
pageSize: 10,
encryption: {
enabled: true,
key: 'katlux-client-secret-passphrase-32ch',
fields: ['salary', 'secretCode']
}
})
// 2. Ingest 100 rows: allData immediately converts to ciphertext in memory
await provider.setData(oneHundredRecords)
// 3. KDatatable is completely encryption-agnostic
// Only the visible page slice (10 rows) is decrypted on demand by the provider
KDatatable(
:dataProvider="provider"
:visibleFields="['id', 'name', 'role', 'department', 'salary', 'secretCode']"
:columnHeaders="{
salary: 'Salary (Decrypted on View)',
secretCode: 'Access Key (Decrypted on View)'
}"
)
Attributes
Configure the KDatatable component using these attributes.
Array of bulk action definitions { label, action(selectedRows, selectAll, filter) }. When provided, multi-selection checkboxes on rows and the header select-all checkbox are automatically enabled.
emptyStateText
string
'no result'
Text to display when dataset is empty
emptyFilterStateText
string
'no result found for filter'
Text to display when filtered dataset is empty
currentPage (v-model:currentPage)
number
undefined
Current page number with two-way sync to provider
pageSize (v-model:pageSize)
number
undefined
Page size number with two-way sync to provider
sortList (v-model:sortList)
IDataSort[]
undefined
Active sorting definitions with two-way sync
filter (v-model:filter)
IDataFilter | null
undefined
Active filter object with two-way sync
selectedRows (v-model:selectedRows)
any[]
undefined
Array of currently selected row objects with two-way sync
selectAll (v-model:selectAll)
boolean
undefined
Header select-all boolean state with two-way sync
virtualScroll
boolean
false
Enable virtual windowing to render large datasets with sticky headers
itemHeight
number
40
Height of each row in pixels for virtualization calculations
viewportHeight
number
500
Height of the virtual scrollable container in pixels
buffer
number
5
Number of extra off-screen rows rendered above and below viewport
Slots
Customize the look and feel of headers and cells.
Name
Description
cell-[fieldName]
Custom render slot for a specific column field (Props: row, field, value)
header-[fieldName]
Custom render slot for a specific column header (Props: field)
Events
Listen to component state changes.
Name
Description
@update:currentPage
Triggered when active page changes (number)
@update:pageSize
Triggered when page size changes (number)
@update:sortList
Triggered when sort definitions change (IDataSort[])
@update:filter
Triggered when filter definition changes (IDataFilter | null)
@update:selectedRows
Triggered when the selection of rows changes (Array<any>)
@update:selectAll
Triggered when the "Select All" state changes (boolean)