Tree ServerSide DataProvider
The CTreeServerDataProvider manages server-side structured hierarchical data operations with node expansion and async loading in mind.
ServerSide Tree DataProviders format requests expected by a backend infrastructure where fetching deeply nested node children is handled incrementally or via async paths.
Dependent Providers: Inherited by Tree API ServerSide DataProvider
import { CTreeServerDataProvider } from '@katlux/providers/data'
import { RequestProvider } from '@katlux/providers/request'
const requestProvider = new RequestProvider()
// Extend to build custom Server Tree APIs
class CustomServerTreeProvider extends CTreeServerDataProvider {
async refresh(hardRefresh: boolean = false) {
this.loading.value = true
try {
// Add taxonomy queries
// Outgoing format constructed: ?sortList=[...]&expandedNodes=[1,5,6]
const query = new URLSearchParams({
sortList: JSON.stringify(this.sortList.value),
expandedNodes: JSON.stringify(Array.from(this.expandedNodes.value))
})
const result = await requestProvider.registerRequest(`/api/taxonomy?${query}`)
// Reconcile response
// Expected HTTP JSON response format arriving: { rows: Array<any>, rowCount: number }
this.setData(result.rows)
this.totalRecords.value = result.rowCount
} finally {
this.loading.value = false
}
}
}
const provider = new CustomServerTreeProvider()
await provider.refresh(true)Configuration for custom server-side 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 nodes are expanded by default on the server |
| paginateBy | TreePaginationMode | 'all' | Mode for server-side pagination (all visible nodes vs only roots) |
| pageSize | number | 10 | Items per page (reported to handler) |
| currentPage | number | 1 | Initial page index (reported to handler) |
| SSR | boolean | false | Enables useAsyncData integration |
Reactive state and methods for server-side tree expansion control.
| Name | Type | Description |
|---|---|---|
| expandedNodes | Ref<Set> | Reactive set of IDs representing the toggled expansion state |
| toggleNode | (id: string | number) => void | Toggles expansion state and triggers a server reload |
| expand / collapse | (id: string | number) => void | Explicitly adds or removes node from expanded set |
| rowCount | Ref<number> | Total visible records reported by the server result |
| loading | Ref<boolean> | Indicates if a server-side request is pending |
| pageData | Ref<any[]> | Array of already-processed hierarchical records for current page |
| setPageDataHandler | (handler: TTreePageDataHandler) => void | Sets the core function for custom server-side logic |
| refresh | (hardRefresh?: boolean) => Promise<void> | Re-runs data request. Cache will only be overridden if hardRefresh is true. |
| loadPageData | (opts?: { disableCache? }) => Promise<void> | Recovers current expansion and pagination state from handler |
Your setPageDataHandler must return a flat array of plain objects. The provider builds the tree on the server side — your handler receives the current expandedNodes set and returns only the visible nodes (roots + children of expanded nodes).
// Handler return shape
// Return only the currently visible nodes, not the full tree
return {
rowCount: 5, // total visible node count
rows: [ // only roots + expanded children
{ id: 1, parentId: null, name: 'Root Category' },
{ id: 2, parentId: 1, name: 'Sub Category A' }, // visible: id=1 is expanded
{ id: 5, parentId: null, name: 'Another Root' }
]
}The id and parentId field names are configurable via the idKey and parentKey constructor options.