Flat ServerSide DataProvider
The CFlatServerDataProvider manages server-side structured flat data operations with pagination, sorting, and filtering configurations in mind.
ServerSide DataProviders format requests expected by a backend infrastructure where fetching, pagination, and sorting logic are all handled server-side for massive datasets.
Dependent Providers: Inherited by Flat API ServerSide DataProvider
import { CFlatServerDataProvider } from '@katlux/providers'
const provider = new CFlatServerDataProvider({
pageSize: 10,
currentPage: 1,
SSR: true
})
// Stable context key for Nuxt SSR hydration & cache reuse
provider.setContextKey('server-items')
// Custom handler for server-side fetching, filtering, and pagination
await provider.setPageDataHandler(async (currentPage, pageSize, filter, sortList) => {
const response = await $fetch('/api/my-data', {
params: {
page: currentPage,
limit: pageSize,
filter: JSON.stringify(filter),
sort: JSON.stringify(sortList)
}
})
// Expected return format: { rows: any[], rowCount: number }
return {
rows: response.rows,
rowCount: response.rowCount
}
})
// Trigger initial load or refresh on demand
await provider.refresh()Configuration options passed upon initialization.
| Property | Type | Default | Description |
|---|---|---|---|
| pageSize | number | 10 | Number of items to track per page |
| currentPage | number | 1 | Initial page index |
| filter | IDataFilter | null | Initial filter configuration |
| sortList | IDataSort[] | [] | Initial sorting configuration |
| SSR | boolean | false | Enables Nuxt useAsyncData integration |
| urlPageParam | string | '' | URL parameter for page synchronization |
| deduplicate | boolean | true | Enables request deduplication |
Reactive state and methods for server-side processing.
| Name | Type | Description |
|---|---|---|
| currentPage | Ref<number> | Current active page (triggers reload) |
| pageSize | Ref<number> | Number of items per page (triggers reload) |
| rowCount | Ref<number> | Total record count reported by the handler |
| loading | Ref<boolean> | Reactive loading state |
| pageData | Ref<any[]> | Current page results |
| setPageDataHandler | (handler: TPageDataHandler) => void | Sets the core function that fetches data from the server |
| refresh | (hardRefresh?: boolean) => Promise<void> | Re-runs data request. Cache will only be overridden if hardRefresh is true. |
| loadPageData | (opts?: { disableCache? }) => Promise<void> | Core method that triggers the data handler |
| setFilter | (filter: IDataFilter | null) => void | Updates filter and resets pagination |
| setSortList | (sort: IDataSort[]) => void | Updates sorting and resets pagination |
| setContextKey | (key: string) => void | Sets a stable key for Nuxt hydration and caching |
Each row returned by your setPageDataHandler must be a plain object with a unique identifier field (default: id). Your handler is responsible for pagination, filtering, and sorting — the provider only forwards the current state parameters.
// Handler return shape
return {
rowCount: 42, // total matching records
rows: [ // current page slice only
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'User' }
]
}The id field name is configurable via the idKey constructor option.