Composables
useDataTable
Manages data table state for sorting, pagination, row selection, and column filtering.
useDataTable
Central state composable for interactive data tables. Pass your raw data array and an options object; get back a rows computed that reflects the current sort, filter, and pagination window, plus helpers for toggling selection and changing page. Consumed by XATable and XADataTable components.
Usage
const {
rows,
sort,
page,
pageSize,
pageCount,
filters,
selected,
setSort,
setPage,
setFilter,
toggleRow,
selectAll,
clearSelection,
} = useDataTable(items, { pageSize: 25 })
Returns
| Key | Type | Description |
|---|---|---|
rows | ComputedRef<T[]> | Filtered, sorted, and paginated slice of the source data. |
sort | Ref<{ column: string; direction: 'asc' | 'desc' } | null> | Active sort state. |
page | Ref<number> | Current page number (1-indexed). |
pageSize | Ref<number> | Number of rows per page. |
pageCount | ComputedRef<number> | Total number of pages given current filters. |
filters | Ref<Record<string, unknown>> | Active filter map keyed by column name. |
selected | Ref<T[]> | Array of currently selected row objects. |
setSort | (column: string, direction?: 'asc' | 'desc') => void | Toggles or sets sort on a column. |
setPage | (page: number) => void | Navigates to a page; clamps to valid range. |
setFilter | (key: string, value: unknown) => void | Sets a filter value; pass undefined to clear. |
toggleRow | (row: T) => void | Adds or removes a row from the selection. |
selectAll | () => void | Selects all rows in the current page. |
clearSelection | () => void | Empties the selection. |
Example
const { items, loading } = useXCrud("/api/orders")
const {
rows,
page,
pageCount,
selected,
setSort,
setPage,
setFilter,
clearSelection,
} = useDataTable(items, { pageSize: 20 })
function search(query: string) {
setFilter("q", query)
setPage(1)
}
AI Context
composable: useDataTable
package: "@xenterprises/nuxt-x-app"
use-when: >
Any admin list view that needs sortable columns, paginated rows, row
checkboxes for bulk actions, or column filters. Pair with useXCrud to
get the raw data, then feed it through useDataTable for UI state.
pairs-with: XATable, XADataTable, XABulkAction, useColumns, useXCrud