Flat ClientSide DataProvider
The CFlatClientDataProvider manages data on the client side, providing reactivity and basic CRUD abstractions for a local, flat array of items.
ClientSide DataProviders do not make API calls on their own. They manage a local array of items and handle client-side sorting, formatting, filtering, and pagination if implemented.
Dependent Providers: Inherited by Flat API ClientSide DataProvider
import { CFlatClientDataProvider } from '@katlux/providers'
import { RequestProvider } from '@katlux/providers'
const requestProvider = new RequestProvider()
const provider = new CFlatClientDataProvider()
// Manual Data Fetching Integration
async function loadData() {
provider.loading.value = true
try {
// RequestProvider handles caching and deduping automatically
const result = await requestProvider.registerRequest('/api/my-data')
// Expected HTTP JSON response format arriving: Array of objects
// Example: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
provider.setData(result)
} finally {
provider.loading.value = false
}
}
await loadData()Configuration options passed when initializing the provider.
| Property | Type | Default | Description |
|---|---|---|---|
| pageSize | number | 10 | Number of items per page for client-side slicing |
| currentPage | number | 1 | Initial page index |
| filter | IDataFilter | null | Local filtering logic configuration |
| sortList | IDataSort[] | [] | Local sorting logic configuration |
| SSR | boolean | false | Controls useAsyncData integration (rarely used for local data) |
| urlPageParam | string | '' | Syncs pagination state with a URL query parameter |
| filterDebounce | number | 0 | Debounce delay in milliseconds before re-filtering |
| sortDebounce | number | 0 | Debounce delay in milliseconds before re-sorting |
| encryption | IProviderEncryptionOptions | undefined | Optional AES-GCM encryption configuration. When enabled, encrypts rows eagerly on setData() and decrypts lazily per page in loadPageData(). |
Reactive state and methods for local data management.
| Name | Type | Description |
|---|---|---|
| allData | Ref<any[]> | The complete, unfiltered dataset (always retains ciphertext in memory when encryption is enabled) |
| filteredData | Ref<any[]> | Data after filters and sorting are applied |
| rowMap | readonly TRow[] | Internal reference map array containing the active filtered & sorted rows for O(1) page slicing |
| pageData | Ref<any[]> | The final slice of data for the current page (decrypted into plaintext on active page load) |
| pageSize | Ref<number> | Reactive page size (updates trigger re-slicing) |
| currentPage | Ref<number> | Reactive current page (updates trigger re-slicing) |
| rowCount | Ref<number> | Total items in `filteredData` |
| setData | (data: TDataRow[]) => Promise<void> | void | Ingests rows. When encryption is enabled, encrypts designated fields eagerly and stores ciphertext in allData. |
| setDataChunked | (data: TDataRow[], options?: ISetDataChunkedOptions) => Promise<void> | Ingests large datasets in batches, yielding between chunks to keep the UI thread responsive. |
| setEncryption | (encryption?: IProviderEncryptionOptions) => void | Dynamically updates or rotates the active encryption configuration at runtime. |
| clearEncryption | () => void | Removes encryption configuration and clears all cached cryptographic keys. |
| updateMap | () => void | Explicitly rebuilds the internal reference map array after in-place record mutations |
| setFilter | (filter: IDataFilter | null, immediate?: boolean) => void | Updates the active local filter (pass immediate=true to bypass debounce) |
| setSortList | (sort: IDataSort[], immediate?: boolean) => void | Updates the active local sorting (pass immediate=true to bypass debounce) |
| refresh | (hardRefresh?: boolean) => Promise<void> | Re-applies internal data mechanisms |
| loadPageData | () => Promise<void> | Applies filtering, sorting, and pagination, lazily decrypting only the visible page slice. |
Note: Unlike server-side providers, client-side providers do not use a TPageDataHandler. All pagination, sorting, and filtering are computed in-memory on the client on the data array passed to setData().
Each row is a plain object passed directly in the array to setData(). The only requirement is a unique identifier field (default: id). Filtering and sorting are performed entirely on the client.
// Load data array into the provider
provider.setData([
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'User' }
])The id field name is configurable via the idKey constructor option.