Tree ClientSide DataProvider
The CTreeClientDataProvider manages hierarchical data on the client side, providing reactivity and basic CRUD abstractions for nested node structures.
ClientSide Tree DataProviders manage a local array of hierarchical items, supporting nested formatting and node tracking.
Dependent Providers: Inherited by Tree API ClientSide DataProvider
import { CTreeClientDataProvider } from '@katlux/providers/data'
import { RequestProvider } from '@katlux/providers/request'
const requestProvider = new RequestProvider()
const provider = new CTreeClientDataProvider()
// Manual Data Fetching Integration
async function loadTreeData() {
provider.loading.value = true
try {
// RequestProvider handles caching and deduping automatically
const result = await requestProvider.registerRequest('/api/taxonomy')
// Expected HTTP JSON response format arriving: Array of node objects
// Example: [{ id: 1, name: 'Root', parentId: null }, { id: 2, name: 'Leaf', parentId: 1 }]
provider.setData(result)
} finally {
provider.loading.value = false
}
}
await loadTreeData()Configuration for local hierarchical data management.
| Property | Type | Default | Description |
|---|---|---|---|
| idKey | string | 'id' | The unique identifier field for each node |
| parentKey | string | 'parentId' | The field used to establish parent-child relationships |
| expandedByDefault | boolean | false | Whether to show all nodes as expanded on initial load |
| paginateBy | TreePaginationMode | 'all' | Determines if pageSize limits total visible nodes or just top-level roots |
| pageSize | number | 10 | Number of visible nodes (or roots) to display per page |
| currentPage | number | 1 | Initial page index |
| SSR | boolean | false | Controls useAsyncData integration |
Control methods for local hierarchy and state.
| Name | Type | Description |
|---|---|---|
| expandedNodes | Ref<Set> | Reactive set containing the IDs of expanded nodes |
| toggleNode | (id: string | number) => void | Expands or collapses a specific node locally |
| expandAll / collapseAll | () => void | Bulk controls for all parent nodes in the local dataset |
| rowCount | Ref<number> | Total visible nodes (after filtering and expansion rules) |
| pageData | Ref<any[]> | Currently visible slice of the hierarchy for the active page |
| refresh | (hardRefresh?: boolean) => Promise<void> | Re-applies internal data mechanisms |
| setData | (data: any[]) => void | Sets the source data and triggers hierarchical rebuilding |
| getNode / getChildren | (id: string | number) => ITreeNode | Helper methods to traverse the processed hierarchy |
Note: Unlike server-side tree providers, client-side tree providers do not use a TTreePageDataHandler. Tree rebuilding, expansion, sorting, and pagination are performed entirely in-memory on the client on the data array passed to setData().
Each row passed to setData() must be a plain, flat object. The provider builds the tree hierarchy locally from id and parentId fields. Root nodes must have null (or an absent value) for their parent field.
// Load a flat array — the tree is built automatically
provider.setData([
{ id: 1, parentId: null, name: 'Root Category' },
{ id: 2, parentId: 1, name: 'Sub Category A' },
{ id: 3, parentId: 1, name: 'Sub Category B' },
{ id: 4, parentId: 2, name: 'Leaf Node' }
])The id and parentId field names are configurable via the idKey and parentKey constructor options.